How to Configure Home Page Widgets?

Updated 

RECORD PAGE EDITOR 

Each persona has a defined view of its own and this is called the Record Page of the Persona. This view includes multiple tabs like Home Page, Queues, Agents, etc. Each page has a lot of different widgets that display various metrics, and these are customisable.  

 

​The Record Page Editor is used to add and modify the widgets being displayed on the different aforementioned tabs (for example, Home Page).  

   

We can add standard widgets such as:  

1. Overall Performance Metrics 

 

2. To Do 

 

3. My Schedule 

 

4. Knowledge Base Widget 

 

5. Recently Viewed Dashboards 

 

6. Guided Workflow - Enter the Guided Workflow ID in the widget configuration panel.​ Enable the Should Auto Execute Guided Workflow toggle to render an auto-executed guided workflow.

7. Escalated Alerts - Input the Upfront alert count to be displayed on the widget.

8. Contact Us 

How to open Home page's Record Page Editor? 

Step 1 – Search for ‘All Settings’ and click on the option as shown below. 

 

Step 2 – Go to ‘Manage Customer’. 

 

Step 3 – Search for ‘Persona Apps Manager’ and click on the icon. 

 

Step 4 – Search for the [Persona Name] whose Home Page needs to be edited. Click on the [Persona Name]. 

A screenshot of a computerDescription automatically generated 

Step 5 – Click on the ‘Home’ tab. 

A screenshot of a search boxDescription automatically generated 

Step 6 – Click on ‘Customise Home Page’. 

 

You land on the Record Page Editor of the Home Page of the [Persona Name]. 

A screenshot of a computerDescription automatically generated 

How to add reporting metrics in the Home page? 

There are 2 ways in which this can be done: 

Using a counter summary widget -  

Step 1 – Choose the reporting dashboard (For example, Record Page Editor 1) whose metrics are required to be displayed on the home page. 

 

Step 2 – Create a new widget by clicking on Add Widget on the top right corner. We create a counter summary widget here. This widget would include the metrics mentioned in all the other widgets whose data is to be displayed in order to have them all together on the home page. Save the widget. 
For example, as shown in the picture below, we have used the metrics Case Count, Agent Average Handle Time and Volume of Published Messages.  

 

 

 

Step 3 – Go to the record page editor of the specific persona to which the widget is supposed to be added.  
All Settings -> Manage Customer -> Persona Apps Manager -> Choose the required persona (Eg. Care Agent) ->  Double-click on the page where the widget is to be added (Eg. Home) -> Click on Customise Home Page  

 

 

 

A screenshot of a computerDescription automatically generated 
 

Step 4 – Hover over the widget where the new widget is to be added until you can see the plus sign as shown in the picture. Click the ‘+’ sign to proceed. 

 

Step 5 – Clicking the ‘+’ sign opens the widget library. Choose Reporting Widget. 

 

 

Step 6 – Select the correct Dashboard and the Counter Summary widget previously created and give a suitable title. You can choose to let the widget be collapsible or not and provide a refresh interval for the widget.  

A screenshot of a computerDescription automatically generated 

Step 7 – Click on Save. The widget will now be visible on the Home Page of the Care Agent persona. 

A screenshot of a computerDescription automatically generated 

Note: Drawbacks of this method is that all the different widgets in the counter summary widget need to have the SAME data source. Also, if different filters are used for different metrics, the above method cannot be used (for example – Number of Pending Cases and Number of New Cases will use the same metric (Case Count) but with different filters).  

This can be resolved using the following method -

Adding individual widget configurations in the JSON editor of the Persona Home Page -  

Step 1 – Open the record page of the desired persona where the widget is supposed to be shown following the same process as before. Select the widget and open its JSON editor. 

A screenshot of a computerDescription automatically generated 

Step 2 – Replace the code starting from “templateId” with the following piece of code. 

"templateId": "@sprinklr/widget/SupervisorHygieneMatrix", 

  "persistedId": null, 

  "name": "TWO", 

  "order": 0, 

  "children": [], 

  "props": { 

    "collapsible": true, 

    "title": "Overall Performance Metrics for the past 24 Hours", 

    "iconName": "solid/Graph", 

    "config": { 

      "widgetInfoList": [ 

        { 

          "primaryLabel": "New Cases", 

          "iconName": "solid/Asset", 

          "isSentimentInverselyProportional": true, 

          "currentPeriod": { 

            "widgetId": "64b79458b73188151e31b1a9", 

            "duration": "1d" 

          } 

        }, 

        { 

          "primaryLabel": "Assigned Cases", 

          "iconName": "solid/Asset", 

          "isSentimentInverselyProportional": true, 

          "currentPeriod": { 

            "widgetId": "64b7945eb73188151e31b2ce", 

            "duration": "1d" 

          } 

        }, ... 

      ] 

    } 

  }, 

  "context": null, 

  "uiEvents": null, 

  "formLayout": null, 

  "tableLayout": null, 

  "buttons": null, 

  "valueSource": null, 

  "evaluatedValue": null, 

  "translations": null 

Step 3 – In the widgetInfoList in the above piece of code, each block represents a different widget. You can change the widget id to what you want to be displayed and change the primaryLabel as well which is the display name of the widget.  
You can add the config for more widgets in the widgetInfoList. 

You can secure the widget id in the following manner –

Care Reporting -> Choose dashboard -> Right-click on the screen and select Inspect 
-> Go to Network Tab -> Refresh the UI page -> Chose REPORTING as shown in the picture below -> In the Preview Tab, open the widgets list and you will see a numbered list of the widgets present in widgets present in the dashboard -> Open the numbered dropdown and you will find at the bottom the id and widget name.  

 

You can copy the widget id and replace it with the widget id in the code previously pasted in the record page editor of the persona.

How to add drilldowns to a widget?

Drilldowns can directly be added using Explore lenses. Refer to this article.

How to add Time Filter in Home Page widget?  

Step 1 – Open the Record Page Editor of the desired persona (for example: Care Agent) using the steps mentioned above and open the Home Page editor. 

 

Step 2 – Add a New Widget by clicking on the ‘+’ icon and add a Reporting Widget. 

 

Step 3 – Choose the required dashboard and the widget to be displayed (For example: Refer to the picture below) 

 

Step 4 – Go to the JSON Editor. 

 

Step 5 – Add the following block of code in the “props” section (Refer to the attached picture) and click on Apply Changes and Click on Save.

"headerActions": [ 
      { 
        "id": "TIME_FILTER", 
        "props": { 
          "upfrontTimeRangeOptions": [ 
            "TODAY", 
            "THIS_WEEK", 
            "THIS_MONTH" 
          ] 
        }, 
        "initialValues": { 
          "timeRange": "TODAY" 
        } 
      } 
    ] 

The time filter has now been added.

 

Open the Persona View to find the Time Filter added onto the widget.