Hi everyone!
CAB Workbench has moved to the Workspace and comes with a modern, fresh look.
However, what if you want to add more information to the board? That's not so straightforward so I wrote this guide. Please note. Minimum Zürich release is required
1. Open the CAB Meeting: Agenda item details workspace component /now/builder/ui/component/297d7f8943a11210b28e0d05a6b8f2c9?theme_sys_id=fad87d2ca304121029a4d1aed31e610f
If the URL isn't available, navigate manually: UI Builder > Service Operations Workspace (the experience) > CAB Meeting (default variant) > open the CAB Meeting component in the body by clicking Edit component > find CAB Meeting: Agenda item details (under Components) and click Edit component.
You'll arrive at the page shown below
Don't forget to create a variant first, and apply your changes to that variant!
2. Here you can change two arrays the stackedValues and the stackedDesc. These are colour-coded to match the highlights in the screenshot.
3. Say we want to add justification and Implementation Plan to stackedDesc.
- Open the Props to State script and look at the pattern.:
const stackedDesc = []; // array containing all field objects to be shown
const description = {}; //field represented as an object
description.label = await helpers.translate('Description'); //label to show, it uses the translate helper function to translate to the user language
description.value = {
type: 'string',
value: taskRecordData?.description?.display_value
}; /*the actual value that tells the component what to display and what iss the type of the data. Here you can use string (plain text) , text-link (record example) , highlighted-value (risk example)*/
stackedDesc.push(description); //adds the field to the array
What happens here:
This Props to State client script is responsible for providing the information shown for the selected agenda item. It reads the record from the agendaItemRecordData context property.
- By repeating this pattern, you can add as many new fields as you need.
// Set the Description stacked value
const stackedDesc = [];
const description = {};
const justification = {};
const implementationPlan = {};
description.label = await helpers.translate('Description');
description.value = {
type: 'string',
value: taskRecordData?.description?.display_value
};
justification.label = await helpers.translate('Justification');
justification.value = {
type: 'string',
value: taskRecordData?.justification?.display_value
};
implementationPlan.label = await helpers.translate('Implementation Plan');
implementationPlan.value = {
type: 'string',
value: taskRecordData?.implementation_plan?.display_value
};
stackedDesc.push(description);
stackedDesc.push(justification);
stackedDesc.push(implementationPlan);
info.stackedDesc = stackedDesc;
- The final result:
