In these examples below, you will see how to open a page within the parent Record page through:
- Related List Action (sys_declarative_action_assignment), configuring the Payload attribute containing the data to be passed together with the event.
- Client Script in UI Builder, emitting the event specifying the data required.
The event that we need to use is called RECORD#NAV_ITEM_SELECTED. Below is an example of content sent when the event is called/emitted and the URL representation following it:
SelectedContent: {
route: 'record',
fields: {
table: 'sys_user',
sys_id: '77ad8176731313005754660c4cf6a7de'
},
params:{
key1 : 'value1',
key2: 'value2'
},
targetRoute: 'current' | {
route: 'record',
fields: {
table: 'incident',
sys_id: 'e329de99731423002728660c4cf6a73c'
},
params: {
key3: 'value3'
}
},
redirect: true | false,
reload: true | false,
multiInstField: `sys_id`,
passiveNavigation: true | false
}
URL: {baseUrl}/record/incident/e329de99731423002728660c4cf6a73c/params/key3/value3/sub/record/sys_user/77ad8176731313005754660c4cf6a7de/params/key1/value1/key2/value2
The targetRoute value is used to specify a sub navigation.
Opening Page within Record Page through Related List Action
In this example, we will see how to emit the RECORD#NAV_ITEM_SELECTED event outside UI Builder in a Next Experience action.
Before we begin with our example, let's give some background: we want to compose an email through an action placed in the Emails related list tab of a Case, and having the relative page opened at Details level. We want to avoid opening the new page outside the Case record context, as indicated in the screenshot:
Below are the steps to achieve that:
1. Create an Action Assignment record (sys_declarative_action_assignment) via menu Workspace Experience → Related List Action, and configure it to be the same as the screenshot below (for the "Specify client action" value refer to the next point)
2. Create a Client Action (sys_declarative_action_payload_definition), like in the screenshot, copying the payload containing the targetRoute values from below:
{
"route": "record",
"fields": {
"table": "sys_email_draft",
"sysId": "-1"
},
"params": {
"parentTable": "{{parentTable}}",
"parentSysId": "{{parentRecordSysId}}",
"headerValue": "New email"
},
"targetRoute": {
"route": "record",
"fields": {
"table": "{{parentTable}}",
"sysId": "{{parentRecordSysId}}"
}
}
}The parentTable and parentRecordSysId are sn_customerservice_case, while SysId is the opened case. This will be the targetRoute URL generated:
/now/cwf/agent/record/sn_customerservice_case/69e76b44db26501015364c9b0b961972/params/selected-tab-index/9/sub/record/sys_email_draft/400c10b8471791102a8e8762e36d4330/params/extra-params/parentTable/{{parentTable}}/parentSysId/{{parentRecordSysId}}/headerValue/New email
If the JSON content is correct, you will see new Action Payload Fields automatically created in the related list.
3. From the previously created Action Assignment, create an Event Mapping from the related list UX Add-on Event Mappings saving the JSON below in the Target Payload Mapping attribute:
{
"type": "MAP_CONTAINER",
"container": {
"route": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"route"
]
}
},
"fields": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"fields"
]
}
},
"multiInstField": "sysId",
"params": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"params"
]
}
},
"additional_data": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"additional_data"
]
}
},
"redirect": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"redirect"
]
}
},
"passiveNavigation": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"passiveNavigation"
]
}
},
"title": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"title"
]
}
},
"targetRoute": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"targetRoute"
]
}
},
"external": {
"type": "EVENT_PAYLOAD_BINDING",
"binding": {
"address": [
"external"
]
}
}
}
}
The other attributes must be the same as the screenshot above, and note the Target Event name RECORD#NAV_ITEM_SELECTED.
In a different use case, if, for instance, the action is triggered from a form, then the source element ID might be different.
4. From the previously created Action Assignment, click on Edit in the related list Action Configurations and select the one belonging to your Workspace Experience.
At this point, this is what you should see after clicking on Compose Email from the chosen related list Emails:
Opening Page within Record Page through Client Script in UI Builder/UIB
In this example, we show you how to see the small Details tab in the record page on a bigger page. This is done through a small "Button Iconic" (available out of the box from our component library), placed at the top of the form. It triggers the same event we used in the previous sample.
Steps I followed:
1. I created a variant of the Record page within UI Builder.
2. I added the Button Iconic component on top of the Details form.
3. I created a new Client Script calling it "Open Page Fullscreen" and added the code below:
function handler({
api,
event,
helpers,
imports
}) {
const sysId = api.context.props.sysId;
api.emit('NAV_ITEM_SELECTED', {
"route": "form",
"fields": {
"table": "sn_customerservice_case",
"sysId": sysId
},
"targetRoute": {
"route": 'record',
"fields": {
"table": "sn_customerservice_case",
"sysId": sysId
}
}
});
}
4. I associated the Clicked event on the button to the Client Script through a new Event Handler:
5. I quickly created a new page called Form (route name → form, used in the "Open Page Fullscreen" client script) containing a form component, available out of the box from the Component library. At the top we easily understand which info we need to have defined in the event content:
At this point, if on a small laptop screen, we can enjoy all the case details in a bigger page!
