---
title: Add and configure the Portal Data List widget
description: 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.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/customer-service-management/customer-self-service-and-omnichannel-engagement/config-data-list-widget-inst-optns.html
release: australia
product: Customer Self-service and Omnichannel Engagement
classification: customer-self-service-and-omnichannel-engagement
topic_type: task
last_updated: "2026-03-12"
reading_time_minutes: 2
breadcrumb: [Portal Data List widget, Configurable Portal widgets, Set up self-service, Configure, Customer Service Management]
---

# Add and configure the Portal Data List widget

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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/customer-self-service-and-omnichannel-engagement/activate-config-portal-widget.md).

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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/customer-self-service-and-omnichannel-engagement/create-page-configurable-portal-widget.md).

Role required: sp\_admin

## Procedure

1.  Navigate to the **All** > **Service Portal** > **Service 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 \(\[Omitted image "portal-plus-icon.png"\] Alt text: Plus button\).

7.  On the Widgets pane, in the **Filter Widget** field, enter `Portal Data List`.

8.  Drag the widget onto the container.

9.  In the Edit page, select the Portal Data List widget.

10. Select the Pencil icon \(\[Omitted image "icon-pencil-ac.png"\] Alt text: 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",
        "ID": "all_cases",
        "table": "sn_customerservice_case",
        "view": "csp",
        "card_view_primary_column": "number",
        "card_view_secondary_column": "short_description",
        "card_view_additional_columns": "product|contact|account|priority",
        "target_page_id": "standard_ticket",
        "guest_view": "connect"
        "role_based_views":{
    	  "field_service_agent_view":"snc_field_technician",
    	  "agent_case_view":["snc_customer_service_agent","snc_manager"]
         },
         "sub_categories": [
          {
            "sub_category": "Open",
            "sub_category_query": "active=true"
          },
          {
            "sub_category": "Closed",
            "sub_category_query": "active=false"
          }
        ],
        "run_time_filters": [
          {
            "column": "product",
            "selection_type": "multi_select"
          },
          {
            "column": "contact",
            "selection_type": "multi_select"
          },
          {
            "column": "account",
            "selection_type": "multi_select"
          },
          {
            "column": "priority",
            "selection_type": "multi_select"
          },
          {
            "column": "state",
            "selection_type": "multi_select"
          },
          {
            "column": "sys_updated_on",
            "selection_type": "single_select",
            "ranges": [
              {
                "label": "Last 30 days",
                "query": "sys_updated_on<=javascript:gs.endOfToday()^sys_updated_onRELATIVEGT@dayofweek@ago@30"
              },
              {
                "label": "Last 60 days",
                "query": "sys_updated_on<=javascript:gs.endOfToday()^sys_updated_onRELATIVEGT@dayofweek@ago@60"
              },
              {
                "label": "Last 90 days",
                "query": "sys_updated_on<=javascript:gs.endOfToday()^sys_updated_onRELATIVEGT@dayofweek@ago@90"
              },
              {
                "label": "Before 90 days",
                "query": "sys_updated_onRELATIVELT@dayofweek@ago@90"
              }
            ]
          }
        ]
      },
      {
        "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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/portal-datalist-widget-data-json.md).

    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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/r-port-data-list-inst-options.md).

13. Select **Save**.