The Steps bar Control is an extremely practical tool used to visually display processes or steps within forms or application interfaces. It helps users understand the current progress and comprehend the steps that need to be completed.
Steps bar Control Business Scenarios
Project Management:
Scenario Description: Projects typically consist of stages such as planning, executing, reviewing, and delivering.
Using the Steps bar Control: This tool aids teams in tracking project progression, displaying the current phase to ensure adherence to the schedule.
Sales Process Tracking:
Scenario Description: Sales processes are divided into stages like lead follow-up, opportunity development, contract signing, and after-sales service.
Using the Steps bar Control: It clearly indicates a customer's position within the sales pipeline, helping salespeople manage and monitor each client's progress.
Form Completion Tracking:
Scenario Description: For forms, particularly complex ones with multiple steps or pages, the steps bar control significantly boosts user experience and efficiency in form completion.
How to Add a Steps bar Control
1. Locate the Steps bar Control: In your form or dashboard designer, navigate to the “Advanced” controls group. Here, you’ll find the Steps bar control, as shown below:
2. Drag and Drop: Click on the Steps bar control and drag it to the desired location on your form or dashboard.
This control can be used in Approval forms, Data list’s list forms, and Dashboards, providing flexibility in manage your applications across different areas of your application.
Configuring the Steps bar Control
Once you’ve added the Steps bar control to your form or dashboard, you can configure its settings to tailor it to your needs:
Steps bar Settings
After selecting the Steps bar control, go to the Settings panel and navigate to Content > Steps bar.
1. Selecting the Source for the Steps Bar:
Static: Directly add and name each step within the control in the form.
Selected Options: The steps bar control initially provides four steps. Enter the names of the steps in the text boxes. Steps can be removed by clicking the delete button and reordered by dragging the order block.
+Add step: Click the "+ Add Step" button to include new steps.
Current Step: The step text can be set to static or dynamic content, displaying the name of the current default step.
Select..: Choose steps from an existing data source, which can display fixed steps, current list fields, or data set records as steps.
Collection item: When integrating a steps bar control within a collection item in a form, a new source option, "Collection item," becomes available. This lets users dynamically generate steps in the steps bar by selecting single-choice or multi-choice fields from the collection item. This feature is handy for forms that dynamically adjust steps based on the data within the collection item.
Object fields: Utilize existing single-choice or multi-choice fields from the collection item as list fields for the steps bar.
Current Step: This can be configured using a field from the collection item or static text.
Current list item: When using a steps bar control in a list form, users can select "Current list item" as the source, in addition to fixed sources. This option allows users to choose single-choice or multi-choice fields from the current list to automatically generate steps in the steps bar. This feature is ideal for scenarios requiring dynamically generated steps based on list items, such as task management or process tracking.
Object fields: Select existing single-choice or multi-choice fields from the list as list fields for the steps bar.
Current Step: This can be set to a field from the data list or static text.
Note:
In the source settings of the Steps bar control, the "Static" option is available in approval forms, custom pages, and list forms. The "Collection item" option is only available in steps bar control within collection controls like kanban boards, collections, horizontal timelines, and vertical timelines in forms. The "Current list item" option is only available in the steps bar control within list forms.
2. Layout:
Circle accent: Steps are displayed with dot markers, suitable for simple step indications.
Basic chevron/ Closed chevron: Steps are displayed in a continuous chevron or closed chevron layout, offering a more coherent visual flow.
2.Step Indicator: Optionally use numbers or icons to represent each step.
3.Past steps/Current step/Ahead steps: Set the step icons for each step.
4. Show step text: Choose the placement of step text, such as none, inner, at top, or at bottom.
Appearance
Dynamic Display Rules: When you set dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Steps Bar and Button Interaction Setup:
The Steps Bar control can also interact with other controls, such as jumping from Step 1 to Step 2 by clicking a button. To set this up, follow these steps:
1.Add a Variable: Click the "Variable" button in the top right corner of the form page to add a new variable, which will control the steps bar navigation.
2.Link Variable to Steps Bar:
Select the steps bar control and click the "Current step" expression button to open the expression editor.
In the expression editor, insert the newly added variable and link it to the steps bar control.
3.Set Button Action:
Add an action to the button, selecting "Set Variable" as the step type.
In the step type settings panel, set the variable to the newly added one linked to the steps bar.
Set a new value, e.g., "steps bar = Step 2", to indicate a jump to Step 2.
Save the settings and bind this action to the button.
After setup, clicking the button will trigger the steps bar to jump to the specified step. You can further explore linking the steps bar control with other controls for more interactive functionalities.
Style Settings
Steps Bar
Steps
Radius: Adjust the border radius of the step bar.
Angle of the arrow: Adjust the tilt angle of the arrow part at the end of each step block.
Items Gap: Set the space between steps, helping to clearly distinguish each step.
Past/ Current/ Ahead settings:
Set the color, background color and height for each of the three steps individually.
Note: Settings for arrow angle and items gap are necessary only when the step type is Basic chevron or Closed chevron; they are not needed for Circle accent.
Timeline Style for Circle accent
Color: Set the color of the lines connecting the steps, which can be used to differentiate between different status steps.
Background Color: Set a specific background color for the connection line part.
Height: Customize the height of the connection line, which affects the visual thickness of the line.
Step Text Style
Color: Set the color of the step text.
Typography: Adjust the font, size, and font style of the step text.
Gap: Set the distance between the text and the step icon or border.
Advanced Settings
Set the Advanced options that are applicable to this control.