mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 14:07:26 +00:00
75 lines
6.9 KiB
Markdown
75 lines
6.9 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/actions/run-query) 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**.
|
||
:::
|