The problem
The secondary items on the standard record page template truncates its contents. Maybe it's important information. Maybe it's a long numeric ID and it won't be obvious if the value is wrong. Perhaps you just want to be able to use the available space to show the entire set of data instead of squeezing it down into 1/4 of the screen width.
In short, we need to fix this:
Label Value Stacked Component to the rescue
Luckily ServiceNow has a component that looks almost identical the standard one which is called "Label Value Stacked". Unfortunately the data that it needs is in a different format so we'll need to translate the values from the underlying sys_aw_form_header and sys_ux_header_config tables into a format that the Label Stacked Value component can understand.
Getting Ready to Edit a Page
First, you need a Record page to edit. There are three situations you may encounter.
A. If you cannot edit the default record variant (you get the message "The page definition has a protection policy). You have two choices.
1. Click on the variant and choose "Duplicate". This will give you an exact, but editable, copy of the original page variant.
2. However, if you're on Tokyo or later then consider creating an all new variant and selecting the Standard Record template.
B. If you can already edit the page then you're good to go!
NOTE: Be sure to check the variant conditions and set the orders of your variants so that yours is on top.
Getting Started
I am going to offer three ways to solve this, getting progressively more functional and re-usable as we go. But no matter which you chose first you need a new Label Value Stacked component to configure.
1. Open your page in UI Builder (UIB) and find "Secondary items" under header content. We'll leave it in place for now.
2. Immediately after that component add a new Label Value Stacked component and name it "Secondary Items Stacked Labels".
3. (Make a note and when you're done testing come back and configure the component visibility (the little eye icon) to match that of the existing component.)
A: I want a fix and I want it with as little effort as possible!
The quick and dirty solution is to just use a script to directly map the values from data.record.form.header.secondaryItems into a new structure. In your data resources you can select "Record" to inspect the values returned as part of the standard template.
On the "Items" property of the component select the script option and use the following:
/**
* {params} params
* {api} params.api
* {TransformApiHelpers} params.helpers
*/
function evaluateProperty({
api : { data : { record: {form : { header } } } },
helpers
}) {
// I don't love hard coding the workspace path, but I couldn't figure out
// another way to do this.
const secondaryItemsMapped = header.secondaryItems.map((x) => {
let value = {};
if (x.type == "reference") {
value.label = x.displayValue;
value.type = "text-link";
value.href = `/now/cmdb/record/${x.table}/${x.sysId}`;
value.underlined = true;
} else {
value = {
type: "string",
value: x.displayValue
};
}
return {
label: x.fieldLabel,
value: value
};
});
return secondaryItemsMapped;
}
This works, but there are three downsides.
A. You have to hard-code the full path to the current workspace for links.
B, that stinks if you have to copy and paste this code all over the place.
C. When you click the links to references they do open in the same workspace, but on a whole other tab, instead of staying along side your current tabs.
B: O.K., I will exert a little more effort--let's fix the links
The second option is to capture the click event for the stacked label component and handle the navigation ourselves. This will require changing our Items binding script and creating a new script to handle those click events.
We will add the table and sysId of the reference so the script which we create in the next step can navigate for us.
1. Change Items binding script
/**
* {params} params
* {api} params.api
* {TransformApiHelpers} params.helpers
*/
function evaluateProperty({
api: { data: { record: { form: { header } } } }, helpers }) {
const secondaryItemsMapped = header.secondaryItems.map(({
sysId,
displayValue,
table,
fieldLabel : label,
type : itemType
}) => {
if (itemType == "reference") {
return {
label,
value: {
label : displayValue,
type : "text-link",
sysId,
table,
href : `javascript:void(0);`,
underlined : true
}
};
} else {
return {
label,
value : {
type : "string",
value: displayValue
}
}
};
});
return secondaryItemsMapped;
}
2. Create a new client script on your page called Handle Secondary Items Clicked
/**
* {params} params
* {api} params.api
* {any} params.event
* {any} params.imports
* {ApiHelpers} params.helpers
*/
function handler({api, event : {payload : {item : {table, sysId}}}, helpers, imports}) {
const fields = {table, sysId};
helpers.navigate.to('record', fields, {}, false, false, "current");
}
Now that we have that script go to your
3. Bind that script to the secondary items control's Label value stacked text link clicked event like this:
This makes the links behave more naturally but still leaves the last problem--we have to re-implement this binding script on every record page we use.
