Create Widget data grid and button in UI builder

Sam M
Tera Contributor

Hi,
I'm trying to replicate a workspace similar to the "Service Operation Workspace", but I'm unsure how to create a Widget Data Grid that can display and reflect data from the Donut Chart (as seen in the picture). Is there a specific component for this? Additionally, I'd like to know how to create a button that allows users to switch between group data. Any help or suggestions would be greatly appreciated.

SamM_0-1695610956515.png

SamM_1-1695611022658.png

 

 

2 REPLIES 2

mmeazza
Tera Contributor

Hi Sam,

I don’t know if you’re still looking for a way to do this – if that’s the case I hope the following links can help:

How to add additonal reports to Service Operations Workspace (SOW) homepage - Support and Troublesho...

Solved: Re: Please help me configure the use case in Servi... - ServiceNow Community

Modify the donut cards in the Overview section (servicenow.com)

From what I could understand, the “simpler” way to do this is to duplicate the OOTB page and then to proceed with your customizations.

Furthermore, these two UX Script Includes have a lot of info about the components and the data that’s displayed on the page: SowIncidentLandingPageUtils and SowIncidentLandingPageUtilsSNC.

Hope it helps!

Haseeb-Ahmed
ServiceNow Employee
ServiceNow Employee

Hi @Sam M ,

1. OOTB landing page uses EVAM component to create card's grid, you may follow below doc and search for similar resources for EVAM component

https://docs.servicenow.com/bundle/washingtondc-servicenow-platform/page/administer/evam/concept/eva...

2. OOTB landing page implementation is covered in details in the below document

https://www.servicenow.com/community/itsm-articles/configuration-activities-for-service-operations-w...

3. For switching between groups you may use dropdown component and on dropdown value selection can dynamically pass visualization component(donut) query to load different data 

 

Please mark it helpful, if it answers your query.

Thanks,
Haseeb Ahmed