Getting a list view of records from a UI component

Matt H
Tera Contributor

‎04-03-2024 02:45 PM

Hi All,

 

I'm upgrading our ITSM implementation from Agent Workspace to Service Operations Workspace and I've hit a bit of an issue around replicating the single score incident widget functionality. Namely clicking 'through' the score to a list of underlying incidents/requests/interactions.

 

ServiceNow suggested making 'pages' for each list that trigger after a clicked event ( and suggested I consult the community) but it seems convoluted compared to the old report widget

 

Has anyone implemented a solution like this? Do you have any documentation handy?

0 Helpfuls
  • 1,348 Views
8 REPLIES 8

James Chun
Kilo Patron

‎04-03-2024 03:12 PM

Hi @Matt H,

 

I believe you would still need a 'list' page within the Workspace but you can reuse the same page for displaying various lists.

 

In terms of the configuration, you would pass the parameters such as the filter within the Event.

Found an example in HR Agent Workspace that could help you.

JamesChun_0-1712182203795.png

 

Cheers

 

Matt H
Tera Contributor
In response to James Chun

‎04-03-2024 08:22 PM

HI @James Chun 

 

Thanks for that. I've managed to set the event to the OpenSimpleList script include but it opens *my incidents* not the 'unassigned incidents. How do you pass the components filters?

 

Cheers

0 Helpfuls

James Chun
Kilo Patron
In response to Matt H

‎04-03-2024 08:55 PM - edited ‎04-03-2024 08:56 PM

Hi @Matt H,

 

This is an example from the HR Agent Workspace:

JamesChun_0-1712202735275.png

Pasting the script below for you to copy and modify:

 

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    api.emit("NAV_ITEM_SELECTED",
    {
        "route":"simplelist",
        "targetRoute": "current",
        "fields":{
            "table": event.payload.params.table,
        },
        "params": {
            "listTitle": event.payload.params.listTitle,
            "query": event.payload.params.query,
            "view": "workspace_uib",
            "fromRecordPage": false,
        },
    });
}

 

As you can see, the filter is applied from the event object. 

But you would need to modify the value of 'route' to your 'list' page's name and the 'view' as well.

 

Hope it helps, cheers

0 Helpfuls

James Chun
Kilo Patron
In response to James Chun

‎04-03-2024 09:31 PM

Done some quick testing in my PDI and realised you would need to do some config in the 'list' page as well.

Create a new page and add the 'list' component. Make sure the page contains the following parameters:

  • Required: table
  • Optional: query

JamesChun_1-1712204925315.png

In the 'list' component, apply the following configurations:

  • Table (use data bind): @context.props.table
  • Filter: @context.props.query

JamesChun_2-1712205018563.png

Now the client script will be something like:

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    api.emit("NAV_ITEM_SELECTED",
    {
        "route":"yourpagename",
        "targetRoute": "current",
        "fields":{
            "table": event.payload.params.table,
        },
        "params": {
            "query": event.payload.params.query
        },
    });
    
}

 

Feel free to add more parameters such as the view as per your need.

You may need to clear the cache for it to start working.

 

0 Helpfuls