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.

1. 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: