configuring Stepper component for Incident table in UI Builder (dynamic state based stepper)

[DevYadav]

Hi everyone
I am trying to configure a Stepper component in UI Builder for the Incident table and I want the stepper to automatically sync with the current state of the Incident record that is open.

I do not want to use a Transform Data Source or any custom server script. I simply want the Stepper to read the Incident state and show the correct step or stage based on the state field, the same way the process flow formatter works in the classic view.

I read an article that explained how to set this up for Change Request, but the UI Builder options shown in that article are different from what I see now. Because of these UI differences, I am not able to figure out the correct way to bind the Stepper to the Incident state in the current Workspace UI.

Can someone guide me on how to do the following without using a Transform or server script:

1. How to make the Stepper display the state labels of the Incident table

2. How to bind the Stepper so it highlights the correct state based on the record that is currently open

3. What is the correct way to configure Items and Selected item in today’s UI Builder

I simply want the stepper to behave dynamically based on the Incident state. Any updated guidance would really help.

Thanks In Advance

[M Iftikhar]

Hi @DevYadav,

To configure the Stepper component in UI Builder for the Incident table and dynamically bind it to the current state of the record, please follow the steps below:

1. Create a Page with Standard Record Template:

   • In UI Builder, create a page using the Standard Record page template.

     

2. Set Test Values:

   • On the top-left panel, enter the test values and apply them to simulate data.

     

3. Add Stepper Component:

   • In the Content Pane (left side), right-click on the Top Container component and select Add After.

     

   • In the Add Content popup, search for and select the Stepper component.

     

4. Configure Stepper Items:

   • Select the Stepper component, and in the Configuration Pane (right side), go to the Config tab.

     

   • For the Items field, select Bind data or use scripts.

     

   • In the popup, select Use Script in the top-right corner and enter the following script to dynamically load the stepper items based on the state choices of the Incident record:

function evaluateProperty({
    api,
    helpers
}) {
    var stepperItems = [];
    var choices = api.data.record.form.fields.state.choices;
    for (var i = 0; i < choices.length; i++) {
        var item = {
            "label": choices[i].displayValue,
            "id": choices[i].value
        };
        stepperItems.push(item);
    }
    return stepperItems;
}

• Click Apply to save this script.

• Bind Stepper to Incident State:

  • For the Selected Item field, select Bind data or use scripts.

    

  • In the bind field, enter @data.record.form.fields.state.value to dynamically highlight the current state of the Incident record.

    

  • Click Apply.

• Save the Page:

  • After applying the above configurations, save your page.

Outcome:

This will make the Stepper component display the state labels dynamically and highlight the appropriate state based on the currently open Incident record.

If my response helped, please mark it as the accepted solution so others can benefit as well.