Stepper

The stepper component helps you lay out multi-step apps, with an optional validation function to validate a step.

If no validation function is defined, the stepper will behave a tabs component where the user can switch between tabs (with Previous and Next buttons, or directly on the step).

A validation function can be set and won't allow users to go to the next step while the runnable returns an error.

The following section details Stepper component's specific settings. For more details on the App editor, check the dedicated documentation or the App editor Quickstart:

App editor Documentation

The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.

Apps quickstart

Learn how to build your first app in a matter of minutes.

Outputs

Name	Type	Description
currentStepIndex	number	Number of the step / tab.
result	any	The result of the runnable.
loading	boolean	The loading state of the button.
lastAction	string: "previous", "next"	The last action performed by the user.

Controls

This component can be controlled by frontend scripts using these functions:

Name	Parameters	Description	Example
setTab	id: string, index:number	Set the current tab.	setTab('a',1)

Event handlers

The stepper component has the following event handlers:

• onPrevious: Trigger a runnable when the user clicks on the previous button.
• onNext: Trigger a runnable when the user clicks on the next button.

Multiple runnables can be added to each event handler.