---
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 Case Cards widget

# Add and configure the Portal Case Cards widget {#ariaid-title1}

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

Add a Portal Case Cards widget to your portal and modify its data, presentation, and
behavior. You can use the Portal Case Cards widget to display status, priority, and other relevant details related to your
cases.

## 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 Case Cards</kbd>.
8. Drag the widget onto the container.
9. In the Edit page, select the Portal Case Cards widget.
10. Select the Pencil icon (![Pencil icon]()).
11. If you want to use modified background and text colors to indicate the state of the cases displayed in the widget, enter JSON code in the following format in the State Highlight Color field and modify it with your desired colors.  
    The default text color for all case states is #181A1F (black). If you create a state, the default highlight color is #CBE9FC (light blue) and the text color is #181A1F
    (black). For more information about the default color values, see [Default highlight color for different case states](https://servicenow-prod.fluidtopics.net/y2tR48Def1htVuUjGzv~oA "Default values for the background and text color for all case states on the Portal Case Cards widget.").

        [
          {
            "value": "1",
            "background_color": "#CBE9FC",
            "text_color": "#181A1F"
          },
          {
            "value": "10",
            "background_color": "#D1D2EE",
            "text_color": "#181A1F"
          },
          {
            "value": "18",
            "background_color": "#FBF7BF",
            "text_color": "#181A1F"
          },
          {
            "value": "6",
            "background_color": "#D2EABC",
            "text_color": "#181A1F"
          },
          {
            "value": "3",
            "background_color": "#C2C4CA",
            "text_color": "#181A1F"
          },
          {
            "value": "7",
            "background_color": "#FFCCD2",
            "text_color": "#181A1F"
          }
        ]

    For \<value\>, enter an integer value of the case state for which you want to change the colors. For more information about finding this value, see [Display the integer values of all case states](https://servicenow-prod.fluidtopics.net/IAAnVw76QdEGbyVXwILoRg "Display the integer values of all of the states associated with cases.").
12. On the Instance form, fill in the fields.  
    For a description of the field values, see [Portal Case Cards widget instance options form](https://servicenow-prod.fluidtopics.net/9_5m5Kp_39PE4SyqgMuogw "Instance options enable you to configure the Portal Case Cards widget on a portal page.").
13. Select Save.

*[\>]: and then