Containers – Attributes First/Last Step

Business Background

You can dynamically change what should happen on the last step based on user interaction. If the number of steps in your stepper (for example) depends on user input, you can add conditional logic to the last step.

For instance, if a user completes an application form with five steps, but based on their answers, they don’t need to see the fifth step as it does not apply to their situation, you want the Submit button on the last step that this specific user sees, that is the fourth step in this example.

You can add conditions to suit your business needs in a few clicks with no code.

Titan Solution

We added differentiation to the stepper, accordion, and tab elements so that you can configure conditions for the first and/or last step of the container. The last step may depend on the information a user completes and may differ for different users depending on their situation.

You can configure conditions applicable to the last step for a scenario, regardless of the number of steps in the element.

How to Video

Coming soon.

How to Guide

We will explain this with the following example for a stepper element:

1. Click on the Gear icon of the stepper elements. We will configure the attributes Stepper/Is First or Stepper/Is Last under Conditions.
2. Under Conditions, click on the Configure Conditions button. The Set Conditions screen opens.

3. Next to the condition that was added by default, click on the Kebab icon and click on the Edit option. (You can also double click on the Condition to edit it.) The Edit Node screen opens.

4. In this example, use the drop-down list and select the Stepper/Is Last option.

5. Create a rule as follows: Stepper/Is Last > Equals > Field > Boolean True. The condition will only run when the user gets to the final step in the container.
6. Click on the Next button and add a tag if necessary.

7. Click on the Save button. The new condition is added to the Actions Flow.

8. Click on the Apply button.
9. Do the following if you want to add debug mode to your project:

10. Save and Preview the project.

In this example, the following options have been clicked:

1. Stepper 5
2. Accordion 2
3. Tab 1

13. Click on the Debug option (bottom right of the screen).

The Debug Project screen opens.

You will see the following, based on the current example:

• Stepper/Is Last is true because the last stepper on the stepper has been selected.
• Accordion/Is First, and Accordion/Is Last are both false because the second step in the accordion has been selected.
• Tab/Is First is true because the first tab on the container has been selected.