---
sourceDocument: Xanadu Customer Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/customer-service-management

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Add and configure the Portal Data List widget

# Add and configure the Portal Data List widget {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Add a Portal Data List widget to your portal and modify its data, appearance, and behavior. You can use the Portal Data List widget to display different case-related data in a card or list format on your portal.

## Before you begin

The UI Components for Customer Portals plugin must have been activated. For more information, see [Activate the UI Components for Customer Portals plugin](https://servicenow-prod.fluidtopics.net/Pb0heiF4RROdFS2ew2xp6g "You can activate the UI Components for Customer Portals plugin (sn_ciwf_ui_cmpnt) to enable Configurable Portal widgets. The application installs related plugins if they are not already installed.").

If you have not already created the page to which you want to add the widget, see [Create a page for Configurable Portal widgets](https://servicenow-prod.fluidtopics.net/A6NdZO9SGG4PFGM0QWgoJg "Create a page into which you can add Configurable Portal widgets.").

Role required: sp_admin or admin

## Procedure

1. Navigate to the AllService PortalService Portal Configuration.
2. Select Designer.
3. On the Service Portal Designer page, search for and select the page to which you want to add the widget.
4. Select the Widgets tab.
5. In the Layouts section, drag the Container layout onto the portal edit page.
6. On the container, add a set of columns by selecting the plus button (![Plus button]()).
7. On the Widgets pane, in the Filter Widget field, enter <kbd class="ph userinput">Portal Data List</kbd>.
8. Drag the widget onto the container.
9. In the Edit page, select the Portal Data List widget.
10. Select the Pencil icon (![Pencil icon]()).
11. On the instance options page, in the Data field, paste and update the following JSON code to configure the lists.  

        [
          {
            "category": "All Cases",
            "table": "sn_customerservice_case",
            "view": "Case",
            "card_view_primary_column": "number",
            "card_view_secondary_column": "short_description",
            "card_view_additional_columns": "product|priority|state|contact",
            "glyph": "th-list",
            "target_page_id": "csm_ticket",
            "sub_categories": [
              {
                "sub_category": "Open",
                "sub_category_query": "active=true"
              },
              {
                "sub_category": "Closed",
                "sub_category_query": "active=false"
              }
            ],
            "run_time_filters": [
              {
                "column": "priority",
                "selection_type": "single_select",
                "values": [
                  {
                    "label": "1-Critical",
                    "value": 1
                  },
                  {
                    "label": "2-High",
                    "value": 2
                  },
                  {
                    "label": "3-Moderate",
                    "value": 3
                  },
                  {
                    "label": "4-Low",
                    "value": 4
                  }
                ]
              },
              {
                "column": "state",
                "selection_type": "multi_select"
              },
              {
                "column": "contact",
                "selection_type": "multi_select"
              },
              {
                "column": "sys_updated_on",
                "selection_type": "single_select",
                "ranges": [
                  {
                    "label": "Last month",
                    "query": "sys_updated_on>javascript:gs.endOfLastMonth()"
                  },
                  {
                    "label": "Last 3 months",
                    "query": "sys_updated_on>javascript:gs.beginningOfLast3Months()"
                  },
                  {
                    "label": "Last 6 months",
                    "query": "sys_updated_on>javascript:gs.beginningOfLast6Months()"
                  }
                ]
              }
            ]
          },
          {
            "category": "Actions Needed",
            "table": "sn_customerservice_case",
            "view": "Case",
            "card_view_primary_column": "number",
            "card_view_secondary_column": "short_description",
            "card_view_additional_columns": "product|priority|state|contact",
            "filter": "stateIN6,18",
            "glyph": "check",
            "target_page_id": "csm_ticket"
          },
          {
            "category": "Work Orders",
            "table": "wm_order",
            "card_view_primary_column": "number",
            "card_view_secondary_column": "short_description",
            "card_view_additional_columns": "priority|state",
            "glyph": "briefcase"
          }
        ]

    For more information, see [Portal Data List widget JSON parameters](https://servicenow-prod.fluidtopics.net/~Fm7d4LMgx8TUH7qq2ewAg "JSON parameters define aspects of the Portal Data list widget on the portal page.").

    Each category in the widget displays a list of filtered records from a selected table. The default table is the Case \[sn_customerservice_case\] table. In a category, you can further
    filter the records and display them in tabs using the pre_defined_filters parameter. You can also configure the filter options displayed in the filter icon using the run_time_filters
    parameter.
12. On the Instance form, fill in the fields.  
    For a description of the field values, see [Portal Data List widget instance options form](https://servicenow-prod.fluidtopics.net/SJORcygV7faGTRllC8NhAA "The instance options enable you to configure the Portal Data List widget on a portal page.").
13. Select Save.

*[\>]: and then