Recently I've been asked to do this:
In the previous version of Service Operations Workspace you'd have to go to UI Builder, duplicate a page variant and modify the tabs on the page. But we recently upgraded to Service Operations Workspace 4.2.0 and I decided to check if there is another way of customising tabs on the record page.
If you're using the 4.0 or later version of the SOW you noticed that the record page was completely redesigned and Record SNC page was replaced by SRP Record page. If you open SRP Record page in the UI Builder you'll notice that in addition to Details and Related Records tabs there are now new tabs:
If you click on Edit content you'll notice that SOW - Record tabs left, SOW - Record tabs middle and SOW - Record tabs right navigate you to page collections where you can modify existing pages or create your own custom pages. But it doesn't solve my use case, I don't want to build a new custom page, I want to move 2 related lists from Related Records tab to a separate tabs and keep other related lists as is.
So let's see how Related Records Tab is configured.
Related Records Tab is a repeater that contains Related Records component, which is basically a tab with a related list (or multiple related lists). Data for this repeater is coming from client state variable called RelatedRecordTabs.
If you do a bit of searching through the client scripts you'll realise that this variable is populated by data from
Last step is to read the data broker script and here it is: data is coming from sn_sow_record.SOWRouteUtil extension point! If you're not familiar with extension points you can check the documentation. OOTB sn_sow_record.SOWRouteUtil extension has 4 implementations, but since OOTB version for incident does not meet the requirements I deactivated it and replaced with the custom one.
To create a custom implementation click Create Implementation related link. Name it the way you want and create the custom script. This is full implementation:
var SOWIncidentRouteUtilCustom = Class.create();
SOWIncidentRouteUtilCustom.prototype = Object.extendsObject(sn_sow_inc.SOWIncidentRouteUtil, {
initialize: function() {},
getListsForRelatedListTab: function(relatedLists, table, tabName) {
if (!relatedLists)
return;
var excludeLists = ["REL:0a4f2e481b265510bd075465604bcb20","REL:6524b3a41b26d910bd075465604bcb26"];
var lists = [];
if (tabName === 'related_list') {
lists = relatedLists.filter(function(rl) {
return excludeLists.indexOf(rl.value) === -1;
});
}
return lists;
},
getRelatedListConfig: function(table, sysId) {
//Related lists that should be excluded from standard related lists tab
var excludeLists = ["REL:0a4f2e481b265510bd075465604bcb20","REL:6524b3a41b26d910bd075465604bcb26"];
//Standard related lists tab configuration
var relatedRecordTab = this.RELATED_RECORD_TAB;
relatedRecordTab["exclusionList"] = excludeLists;
//List of objects, each object is a separate tab
var result = [{
"label": gs.getMessage("Emails"),
"id": "sow_emails",
"exclusionList": null,
"inclusionList": ["REL:0a4f2e481b265510bd075465604bcb20","REL:6524b3a41b26d910bd075465604bcb26"] //Related lists to show on the tab
}
];
result.push(relatedRecordTab);
return result;
},
type: 'SOWIncidentRouteUtilCustom'
});
I extended sn_sow_inc.SOWIncidentRouteUtil extension point to leverage OOTB features of incident. If you're doing it for another table, you don't need to do it.
To show related lists on the separate tab you need to customise getRelatedListConfig function. This function returns the list of tabs, where each tab consists of:
- tab label,
- tab id,
- related lists that should be shown on the tab,
- related lists that should be hidden on the tab.
In this example I created a new tab called Emails and added 2 related lists on it. These related lists are scripted relationships, that's why their names consist of REL and the sys_id.
Note! For this implementation to work these related lists must be added to the workspace view of your record!
The ootb related lists tab is stored in this.RELATED_RECORD_TAB variable, so you just need to add it to the list of tabs. But, I'd like to hide the Emails and Draft emails related lists from the ootb tab, so I added these 2 related lists to the exclusionList on the ootb tab.
getRelatedListConfig: function(table, sysId) {
//Related lists that should be excluded from standard related lists tab
var excludeLists = ["REL:0a4f2e481b265510bd075465604bcb20","REL:6524b3a41b26d910bd075465604bcb26"];
//Standard related lists tab configuration
var relatedRecordTab = this.RELATED_RECORD_TAB;
relatedRecordTab["exclusionList"] = excludeLists;
//List of objects, each object is a separate tab
var result = [{
"label": gs.getMessage("Emails"),
"id": "sow_emails",
"exclusionList": null,
"inclusionList": ["REL:0a4f2e481b265510bd075465604bcb20","REL:6524b3a41b26d910bd075465604bcb26"] //Related lists to show on the tab
}
];
result.push(relatedRecordTab);
return result;
},
getListsForRelatedListTab: function(relatedLists, table, tabName) {
if (!relatedLists)
return;
var excludeLists = ["REL:0a4f2e481b265510bd075465604bcb20","REL:6524b3a41b26d910bd075465604bcb26"];
var lists = [];
if (tabName === 'related_list') {
lists = relatedLists.filter(function(rl) {
return excludeLists.indexOf(rl.value) === -1;
});
}
return lists;
},
If you're implementing this customisation for a table other that incident, problem change request you'll need to add one more function to your script - handles. This function controls under which conditions the extension point should be executed. Example:
handles: function(table, sysId) {
return table === "change_request";
},