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.
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":
After that you can create a new record with the following configuration values:
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 |
|
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:
Next, open the developer console of your browser and inspect the HTML code. You have to find the component of the page itself:
Take the Sys ID from the tag <now-uxf-page> 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:
Really good article. It is really helping me to understand the Now Experience capabilities 🙂
One question though, where does the value on the API field came from? I was looking on the Developer site for a list of API, but no luck
Thanks for your help!
Hi Pedro,
I've had simillar requirments, this is how I managed to solve this:
After selection and click ok the field is populated.
I know it doesn't look good but it was first aproach to componnents.
UI action code from Workspace Client Script:
function onClick(g_form) {
var table = "cmdb_ci";
var user = g_form.getValue("caller_id");
var query = "u_active=true^assigned_to=" + user;
g_modal.global.showCIList({
title: 'Caller CI',
confirmTitle: 'OK',
cancelTitle: "Cancel",
size: "xl",
params:{
dataQuery:query,
}
}).then(function(result) {
g_form.setValue("cmdb_ci", result.data.selectedValue);
});
}
additionally I have created custom component index.js of this component:
import { createCustomElement,actionTypes } from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import styles from './styles.scss';
import { createHttpEffect } from '@servicenow/ui-effect-http';
const { COMPONENT_BOOTSTRAPPED } = actionTypes;
const view = (state, { updateState, dispatch}) => {
const { dataColumns, dataTable } = state.properties;
var {dataRows} = state.properties
var mainRow = Object.keys(dataColumns[0])[0];
if(state.dataRows)
var {dataRows} = state;
return (
<div class="container">
<div className="table-container">
<table>
<thead>
<tr>
<th>
Selected
</th>
{dataColumns.map((col) => {
if(col.name == 'sys_id')
return("")
return (
<th>
{col.label}
</th>
);
})}
</tr>
</thead>
<tbody>
{dataRows.map((row) => {
return (
<tr >
<td>
<input onclick={() => {dispatch("ROW_choosen", row)}} name="selection" id="selection" class="btn btn-primary" type="checkbox" value={row}></input>
</td>
{dataColumns.map((col) => {
if(col.name == 'sys_id'){
return("")
}
if(col.name == mainRow){
return (
<td>
{row[col.name]}
</td>
)}
return (
<td>
{row[col.name]}
</td>
)
})}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
};
createCustomElement('ELEMENT_NAME', {
renderer: { type: snabbdom },
view,
styles,
actionHandlers: {
'FETCH_DATA': createHttpEffect('api/now/table/cmdb_ci', {
method: 'GET',
queryParams: [
'sysparm_fields',
'sysparm_query',
'sysparm_display_value',
'sysparm_exclude_reference_link'
],
successActionType: 'FETCH_DATA_SUCCEEDED'
}),
[COMPONENT_BOOTSTRAPPED]: (coeffects) => {
const { dispatch } = coeffects;
const {dataTable, dataColumns, dataQuery} = coeffects.properties;
const query = dataQuery;
const fields = dataColumns.map((col) => {
return col.name;
}).join(',');
dispatch('FETCH_DATA', {
sysparm_query: query,
sysparm_display_value: 'all',
sysparm_exclude_reference_link: true,
sysparm_fields: fields
});
},
'FETCH_DATA_SUCCEEDED': (coeffects) => {
const { action, updateState } = coeffects;
const { result } = action.payload;
const dataRows = result.map((row) => {
return Object.keys(row).reduce((acc, val) => {
if (val === 'sys_class_name') {
acc[val] = row[val].value;
} else {
acc[val] = row[val].display_value;
}
return acc;
}, {});
});
updateState({ dataRows });
},
'ROW_choosen':(coeffects) =>{
const { dispatch } = coeffects;
var data = coeffects.action.payload.sys_id
console.log(data);
dispatch('SN_SCRIPTED_MODAL#DATA_SET', {
selectedValue:data
});
}
},
properties: {
dataTable: {
default: "cmdb_ci"
},
dataQuery: {
default: 'manufacturerISNOTEMPTY^locationISNOTEMPTY^short_descriptionISNOTEMPTY^assigned_toISNOTEMPTY'
},
dataColumns: {
default: [{ name: 'name', label: 'Name' }, { name:'manufacturer', label: 'Manufacturer' }, { name:'sys_class_name',label: 'Class' }, {name:'location', label: 'Location' }, { name:'short_description',label: 'Description' }, { name: 'assigned_to', label: 'Assigned to' }, {name:'sys_id', label:'Selected'}]
},
dataRows: {
default: []
}
}
});
One again please see it more like a guide thean premade solution I'm not fully satisfied.
Hope it helps you
Best Regards,
Daniel
Exactly what I was looking for. Since I wanted it available on only a new record so the agent can see the list before saving (related lists show after) I simply took the condition off of the UI action and added a check for a value in the script to throw a message to add a value. Excellent documentation.
