Adding another visulization to the Service Operations Workspace landing page in Vancouver

[TEdwards]

I am new to UI Builder, and I have a requirement to add a 'My Approvals' visualization to the Overview in the Service Operations Workspace. I have created my variant and have been looking for some guidance in the community. There is a lot of good information on how to do this prior to Vancouver, but the components are no longer set up the same way as they were previously. They used to be separate components for each donut: 

However they are now in a Repeater inside a carousel:

I would appreciate any help with how to accomplish my requirement. Thanks!

[Dibyaratnam · Accepted solution]

@TEdwards , If you check the UIB configuration for the same, as you have mentioned it uses Repeater component here.

so the Repeater component gets the data from a state parameter named donutConfig and this gets set on page load from the page script 'UpdateDonutsConfig'.

In this file, you will find the mapped UX Client Script Include named 'SowIncidentLandingPageUtilsSNC' and this is a protected one so you need to create a duplicate of it and map it to the client script and make changes in the script include for custom requirement.

In SI, there's a function called getVisualizationConfig where the format is set which are displayed on the overview page. This is basically array of json objects and each object correspond to Incident Assigned, Incident SLAs and so on.

{
                    "id": "incident_sla",
                    "tableName": "task_sla",
                    "tableDisplayValue": "Task SLA",
                    "myWorkQuery": "task.sys_class_name=incident^task.assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe^task.active=true^sla.type=SLA^ORsla.type=OLA^active=true^time_left<=1970-01-08 00:00:00",
                    "myTeamQuery": "task.sys_class_name=incident^task.assignment_groupDYNAMICd6435e965f510100a9ad2572f2b47744^task.active=true^sla.type=SLA^ORsla.type=OLA^active=true^time_left<=1970-01-08 00:00:00",
                    "listView": 'sow_landing_page',
                    "header": await helpers.translate("Incident SLAs"),
                    "groupByField": "time_left",
                    "evamId": evamDef['incidentSlaEvamDefinitionId'],
                    "updated_on": "^ORDERBYtime_left",
                }

you need to create another array element consisting of all the required values for your custom vizualization. Once done, you are good to go. This will now reflect on the overview page once saved.

Please mark my answer as correct if it helps.

[himmat10005]

How to find this page script "UpdateDonutsConfig"? Which table is it?

[TEdwards]

You can find it by entering sys_ux_client_script.LIST in the filter navigator and searching the name. The table for the UX Client Script Includes is sys_ux_client_script_include if you need to find the associated 'SowIncidentLandingPageUtilsSNC'.