mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
77 lines
4.7 KiB
Markdown
77 lines
4.7 KiB
Markdown
|
---
|
|||
|
|
id: steps
|
|||
|
|
title: Steps
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
The **Steps** component helps break down complex process into clear, manageable stages. It’s ideal for multi-step forms, onboarding flows, or approval processes, giving users a clear sense of progress and direction.
|
|||
|
|
|
|||
|
|
## Properties
|
|||
|
|
|
|||
|
|
| Property | Description |
|
|||
|
|
|:---------|:------------|
|
|||
|
|
| Variant | Choose what you want to display on the component - Label, Number, Plain. |
|
|||
|
|
| Dynamic Options | Toggle on to add steps dynamically or click on **Add new option** button to add a new step. |
|
|||
|
|
| Current step | Select which step should be selected by default. |
|
|||
|
|
|
|||
|
|
## Events
|
|||
|
|
|
|||
|
|
| Event | Description |
|
|||
|
|
|:-------|:---------------------|
|
|||
|
|
| On select | Triggers whenever the user selects any step. |
|
|||
|
|
|
|||
|
|
:::info
|
|||
|
|
Check [Action Reference](/docs/category/actions-reference) docs to get detailed information about all the **Actions**.
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
## Component Specific Actions (CSA)
|
|||
|
|
|
|||
|
|
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
|
|||
|
|
|
|||
|
|
| <div style={{ width:"150px"}}> Action </div> | <div style={{ width:"250px"}}> Description </div> | <div style={{width: "200px"}}> RunJS Query </div>|
|
|||
|
|
| :------------ | :---------- | :------------ |
|
|||
|
|
| setStepVisible( ) | Set the step visibility. | `components.steps1.setStepVisible` |
|
|||
|
|
| setStepDisable( )| Disables the step. | `components.steps1.setStepDisable` |
|
|||
|
|
| resetSteps( )| Resets the completed steps, takes user to the default step. | `components.steps1.resetSteps` |
|
|||
|
|
| setStep( )| Takes user to step ID, marks all the previous steps as completed. | `components.steps1.setStep` |
|
|||
|
|
| setVisibility( )| Sets the visibility of the component. | `components.steps1.setVisibility(false)` |
|
|||
|
|
| setDisable( ) | Disables the component. | `components.steps1.setDisable(true)` |
|
|||
|
|
|
|||
|
|
## Exposed Variables
|
|||
|
|
|
|||
|
|
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div>|
|
|||
|
|
|:----------- |:----------- |:--------------|
|
|||
|
|
| currentStepId | Holds the ID of the currently selected step on the step component.| `{{components.steps1.currentStepId}}` |
|
|||
|
|
| steps| Stores information of all the steps. | `{{components.steps1.steps}}` |
|
|||
|
|
| isVisible | Indicates if the component is visible. | `{{components.steps1.isVisible}}`|
|
|||
|
|
| isDisabled | Indicates if the component is disabled. | `{{components.steps1.isDisabled}}`|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Additional Actions
|
|||
|
|
|
|||
|
|
| <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|
|
|||
|
|
|:------------------|:------------|:------------------------------|
|
|||
|
|
| Steps selectable | When disabled will disable the selection of steps. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|||
|
|
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|||
|
|
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|||
|
|
|
|||
|
|
## Devices
|
|||
|
|
|
|||
|
|
|<div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Expected Value </div>|
|
|||
|
|
|:---------- |:----------- |:----------|
|
|||
|
|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|||
|
|
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|||
|
|
|
|||
|
|
## Styles
|
|||
|
|
|
|||
|
|
| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | Expected Value |
|
|||
|
|
|:------------ |:-------------|--------------|
|
|||
|
|
| Incompleted accent | Choose color for incomplete accent. | Select from theme or choose from color picker. |
|
|||
|
|
| Incompleted label | Choose color for incomplete label. | Select from theme or choose from color picker. |
|
|||
|
|
| Completed accent | Choose color for completed accent. | Select from theme or choose from color picker. |
|
|||
|
|
| Completed label | Choose color for completed label. | Select from theme or choose from color picker. |
|
|||
|
|
| Current step label | Choose color for current step label. | Select from theme or choose from color picker. |
|
|||
|
|
|
|||
|
|
:::info
|
|||
|
|
Any property having **fx** button next to its field can be **programmatically configured**.
|
|||
|
|
:::
|