How to configure stepper component in ui builder ?

[Serge T1]

Hi,

I try to configure dynamically a stepper component (see attach) wth my record page tabs, in particularly the state field.

I work in UI Builder.

Can you please help me beacuse i didn't any documentation about that.

Thanks in advance

[Saurav11]

Hello,

Did you check the below article

https://developer.servicenow.com/dev.do#!/reference/now-experience/sandiego/now-components/now-stepper/uib-setup

Please mark answer correct/helpful based on Impact

[Serge T1]

Hello,

yes i did but there is nothing about the detailed configuration.

Regards

Serge T

[fran_oisschneid]

Hi,

Same question for me.

I want to use a client script to be able to "merge" the closed complete+closed skipped+closed incomplete into one step "Closed".

I did the client script to set a @state and bind it to the stepper, but I didn't find how to read the record state from the client script.

I didn't find doc nor sample code to understand how to do that. 

[fran_oisschneid]

Hi,

I searched, and found, an answer that I applied.

You can perform this with a data resource or a client script.

In both case you will need to trigger it with the event "Set loading state (FORM)" of the Data resource instance "Glide Form".

If you have a 1 to 1 mapping between your states and the stepper steps, the most simple is to create a new client script with the code :

const gFormData = api.data.gform.nowRecordFormBlob;

if (gFormData) {

const stateValue = gFormData.fields.state.value;

api.setState('stepIndex', stateValue);

}

Then create a state stepIndex and bind it to the Stepper selected item with @state.stepIndex.