How to Make a Stepper Component Advance to next stage Only After a Form Is Saved

[anushreem1]

Hi Community,

I am working with a Stepper component in ServiceNow UI Builder and would like the Stepper to advance to the next stage only after the form is successfully saved, not immediately when the State field value is changed on the form.

I am looking for an approach that uses a Client State Parameter to control the Stepper's Selected Item.

Could anyone share:

• How the Client State Parameter should be configured?
• What value should be stored in the Client State Parameter?
• How should the Stepper's Selected Item be bound to the Client State Parameter?
• What event and handler configuration is required to update the Client State Parameter after a successful form save?

Any examples or recommended configuration would be greatly appreciated.

Thanks in advance!

[Me Being Mustaq]

Hi @anushreem1 ,

Yes, using a Client State Parameter (CSP) is the recommended approach to prevent the Stepper from advancing until the record has been successfully saved. The Client State Parameter acts as the source of truth for the Stepper's selected item and is only updated after the save operation completes successfully.

 

1. Create a Client State Parameter

In UI Builder, create a Client State Parameter with the following configuration:

Name: stepperState
Type: String
Initial Value: New

Client State Parameters are designed to store page-level values that can be dynamically bound to components, making them ideal for controlling Stepper navigation.

 

2. Store the Current Saved State

The Client State Parameter should store the value that represents the currently saved state of the record.

Example states:

1. New
2. Assess
3. Authorize
4. Scheduled
5. Implement
6. Review
7. Closed

The value stored in the Client State Parameter should match the ID of the Stepper item, not necessarily the display label.

Example:

[
  {
    "id": "draft",
    "label": "Draft"
  },
  {
    "id": "review",
    "label": "Review"
  },
  {
    "id": "approval",
    "label": "Approval"
  },
  {
    "id": "closed",
    "label": "Closed"
  }
]

 

3. Bind the Stepper Selected Item

In the Stepper component, configure Selected Item using Dynamic Data Binding and bind it to the Client State Parameter:

Selected Item → @state.stepperState

This ensures that whenever the value of stepperState changes, the Stepper automatically updates to the corresponding stage.

 

4. Update the Client State Parameter After a Successful Save

Configure an event handler on the form's save success event (for example, Record Updated).

Example Configuration

Client State Parameter

Name: selectedStep
Type: String
Initial Value: draft

Stepper

Items: [draft, review, approval, closed]
Selected Item: @state.selectedStep

Form Event

Record Updated

Handler

Set Client State Parameter

selectedStep = stateMap(currentRecord.state);

The event handler updates the Client State Parameter only after the record has been successfully saved. Since the Stepper is bound to this parameter, it advances only when the save operation completes.

 

Result

•  User changes the State field → Stepper does not move.
• User saves the record successfully → Client State Parameter is updated.
• Stepper advances to the next stage only after the save is completed.

This approach keeps the Stepper synchronized with the persisted record state rather than the unsaved value currently displayed on the form.

Warm Regards,
Shaik Mustaq