logo

NJP

Display related Incidents in a Workspace Modal

Import · Dec 15, 2020 · article

image

It seems that more and more users are working with Agent Workspace because there are more and more questions asked about this topic here in the community.

And of course it is also about enhancing the existing configuration options and features with own customizations so that the daily routines are supported even better.

For example there are questions about how a modal displaying list of records can be opened by clicking on a button.

image

The button is implemented easily, because UI Actions have a section for workspaces, but opening and configuring a modal is the challenge.

On the documention page there is a manual for that, but it is rather sparse and in practice there are unexpected difficulties that are not mentioned there.

And so I started some extensive investigations to find out how to create a modal with a predefined list of records. The use case is getting a list of Incidents for the same caller as for the one in the currently opened Incident record.

The following step-by-step guide describes how to do that, but you also can download the attached update set, which contains all necessary artifacts.

(1) Create a "Registered Scripting Modal"

According to the documentation, you first have to register a component in the table sys_aw_registered_scripting_modal, which then can be referenced in the UI Action.

I don't know why, but access to that table is currently restricted due to underlying ACLs. Therefore, the first task is to modify the ACLs. I just checked the option "Admin overrides":

image

After that you can create a new record with the following configuration values:

image

Hint:

The "Public API" value is needed for the UI Action script.

(2) Create and configure a UI Action

Create a UI Action "Related Incidents" with the following configurations:

Active true
Update true
Client true
Condition !gs.nil(current.caller_id)
Workspace Form Button true
Workspace Client Script function onClick(g_form) { g_modal.global.showRecordList({ title: 'Related Incidents for ' + g_form.getDisplayValue('caller_id'), confirmTitle:'Close', size: "xl", params: { "listTitle" : "Related Incidents", "table" : "incident", "query" : "caller_id=" + g_form.getValue("caller_id"), "columns" : "number,short_description,state,category", "limit" : "20", "maxColumns" : "5", "page" : "1", "hideHeader" : true, "hideTitle" : false, "hideTitleRowCount" : false, "hideRefreshButton" : false, "hideLastRefreshedText" : false, "hideLinks" : false, "hideViewAll" : false, "hideHighlightedValues" : false, "hideCellFilter" : false, "hideCheckboxHover" : true, "hideColumnFiltering" : false, "hideColumnGrouping" : true, "hideColumnSorting" : false, "hideFilterPanel" : false, "hideFirstPage" : false, "hideLastPage" : false, "hideLimitSelector" : false, "hideMenuButton" : false, "hideMultiEdit" : false, "hideDeclarativeActions" : false, "hideNextPage" : false, "hidePages" : false, "hidePagination" : false, "hidePanel" : false, "hidePanelAdvanced" : false, "hidePanelConditionDelete" : false, "hidePanelFooter" : false, "hidePanelRestore" : false, "hidePreviousPage" : false, "hideQuickEdit" : true, "hideRange" : false, "hideRowCount" : false, "hideRowSelector" : true, "hideSelectAll" : true, "hideEmptyStateImage" : false, "hideDBViews" : false, "hideUnnecessaryRowSelectors" : true } }).then(function(result) {}, function(error) {}); }

Hints:

  • On line 2 you can find the previously configured Public API Call g_modal.global.showRecordList
  • On line 3 and 9 display name and Sys ID of the caller are handed over to the modal.
  • There are a lot of parameters you can play with.

You may wonder where I got all the configuration parameters from, and I want to give the answer here. If you are not interested in, you can skip the rest of the article.

As there is no reference documentation for UX components you have to do a kind of reverse engineering. As described on the documentation page create an empty landing page and then drop a list component on that page:

image

Next, open the developer console of your browser and inspect the HTML code. You have to find the component of the page itself:

image

Take the Sys ID from the tag and enter it in my dashboard widget "Open record page by Sys ID" to perform a search for the corresponding record.

For the above Sys ID a record at table sys_ux_macroponent was found. It has two fields with JSON based data:

  • Layout Model: Describes the page layout and the placement of components in it.
  • Composition: Contains the configuration parameters of each component.

And at field "composition" you can find all the configuration parameters from the above Workspace Client Script:

image

Labels:

image

View original source

https://www.servicenow.com/community/now-platform-articles/display-related-incidents-in-a-workspace-modal/ta-p/2314695