Containers – Attributes First/Last Step

Business Background

You can dynamically change the last step’s outcome 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 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 the Configure Conditions button. The Set Conditions screen opens.

3. Next to the condition that was added by default, click the Kebab icon and click the Edit option. (You can also double-click 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 the Next button and add a tag if necessary.

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

8. Click 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 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.