Overview (10 min)
Completion requirements
01 Getting Started
In this lesson, we discuss what multi-step containers are and when to use them. We look at the differences between the different multi-step containers in Titan Web when to use which multi-step containers, and several key differences between the different multi-step containers.
Multi-step containers are designed to break down complex or lengthy information-gathering processes into smaller, more manageable steps. Instead of overwhelming users with a single long form, the process is divided into multiple stages or steps, each focusing on a specific set of inputs or questions.
The purpose of using multi-step containers is to enhance the user experience and improve the completion rates of forms or processes. Presenting information more digestibly reduces cognitive load, improves clarity, and increases user engagement.
Multi-step containers are designed to break down complex or lengthy information-gathering processes into smaller, more manageable steps. Instead of overwhelming users with a single long form, the process is divided into multiple stages or steps, each focusing on a specific set of inputs or questions.
The purpose of using multi-step containers is to enhance the user experience and improve the completion rates of forms or processes. Presenting information more digestibly reduces cognitive load, improves clarity, and increases user engagement.
02 How to Add a Multi-Step Container
You can add different contents to each step of the container.
1. Browse to the Container option.
2. Scroll down and drag-and-drop the required multi-step containers to the canvas, for instance:
3. Make sure to add auto-fit containers or form elements to the multi-step containers for the best results.
4. Add elements to the auto-fit containers or form elements.
In this example, we added a form with input elements to Tab 1 …
… a file upload element to Tab 2 …
… and an interactive document to Tab 3.
Each tab/step can have completely different elements for the end-user to interact with, making it easier for them to complete the steps in a process on a single web page.
1. Browse to the Container option.
2. Scroll down and drag-and-drop the required multi-step containers to the canvas, for instance:
- Tabs
- Accordion
- Stepper
- Multi-stepper
3. Make sure to add auto-fit containers or form elements to the multi-step containers for the best results.
4. Add elements to the auto-fit containers or form elements.
In this example, we added a form with input elements to Tab 1 …
… a file upload element to Tab 2 …
… and an interactive document to Tab 3.
Each tab/step can have completely different elements for the end-user to interact with, making it easier for them to complete the steps in a process on a single web page.
03 Add Steps to a Multi-Step Containter
- Add Static Values
- Remove Static Values
- Add Dynamic Values
04 Add Static Values
This process is the same for all the multi-step containers. You can create custom static values.
1. Select the multi-step container and click the Gear icon. The Settings screen opens.
2. Under Content, make sure that the Static Values radio button is selected and click the Edit Mapping button. The Configure Tabs screen opens.
3. Click the Add a Tab option to add more steps.
4. Complete the fields. Each step has a unique value, and you can configure conditional logic for a specific step based on that value.
1. Select the multi-step container and click the Gear icon. The Settings screen opens.
2. Under Content, make sure that the Static Values radio button is selected and click the Edit Mapping button. The Configure Tabs screen opens.
3. Click the Add a Tab option to add more steps.
4. Complete the fields. Each step has a unique value, and you can configure conditional logic for a specific step based on that value.
05 Remove Static Values
1. Select the multi-step container and click the Gear icon. The Settings screen opens.
2. Under Content, make sure that the Static Values radio button is selected and click the Edit Mapping button. The Configure Tabs screen opens.
3. Click the Kebab icon next to the row you want to remove and click the Delete option.
2. Under Content, make sure that the Static Values radio button is selected and click the Edit Mapping button. The Configure Tabs screen opens.
3. Click the Kebab icon next to the row you want to remove and click the Delete option.
06 Add Dynamic Values
This process is the same for all the multi-step containers. You can get the values from Salesforce.
1. Select the multi-step container and click the Gear icon. The Settings screen opens.
2. Click the Dynamic Values radio button and click the Sync from Salesforce button.
3. Use the drop-down lists to select the object and the field from Salesforce, for instance, the Stages on an Opportunity.
4. Click the Apply button.
1. Select the multi-step container and click the Gear icon. The Settings screen opens.
2. Click the Dynamic Values radio button and click the Sync from Salesforce button.
3. Use the drop-down lists to select the object and the field from Salesforce, for instance, the Stages on an Opportunity.
4. Click the Apply button.
07 Which Multi-Step Container Should You Use?
Tabs and accordion containers are for processes that are not linear. The user doesn't have to follow the process linearly.
An accordion works well if you want to show different content, one option at a time.
There isn't a big difference between the two multi-step containers, and you can choose based on your UI/UX preference or business requirement.
Steppers and multi-step containers are typically for linear processes where the user needs to complete one step before going to the next step.
Multi-step containers do not show the step that a user is currently on or where they are in the process (unless you add a progress bar).
An example of where a stepper container was used is a scholarship application. The user has to complete the following steps:
The user can click on any option and in any order.
An accordion works well if you want to show different content, one option at a time.
There isn't a big difference between the two multi-step containers, and you can choose based on your UI/UX preference or business requirement.
Steppers and multi-step containers are typically for linear processes where the user needs to complete one step before going to the next step.
Multi-step containers do not show the step that a user is currently on or where they are in the process (unless you add a progress bar).
An example of where a stepper container was used is a scholarship application. The user has to complete the following steps:
- Start
- Head of household
- Address
- Questionnaire
- Student Information
- Income
- Household Members
The user can click on any option and in any order.
08 Adding Mandatory Fields
When you add mandatory field/s to a step, the user cannot continue to the next step without completing the mandatory field/s.
Note: This option is not available for the tab or accordion containers.
1. Select the element and click the Gear icon to open the Settings screen.
2. Under Interactivity, click the Mandatory checkbox.
3. Save and Preview the project.
If the user clicks the Next button, but the mandatory field has not been completed, a warning is shown, and the user cannot go on to the next step.
Note: This option is not available for the tab or accordion containers.
1. Select the element and click the Gear icon to open the Settings screen.
2. Under Interactivity, click the Mandatory checkbox.
3. Save and Preview the project.
If the user clicks the Next button, but the mandatory field has not been completed, a warning is shown, and the user cannot go on to the next step.
09 Changing Orientation
You can display the steps horizontally (default) or vertically.
1. Select the tab or stepper element and click the Gear icon to open the Settings screen.
2. Under Interactivity, click the Vertical checkbox. The tabs and steps are no longer displayed horizontally.
1. Select the tab or stepper element and click the Gear icon to open the Settings screen.
2. Under Interactivity, click the Vertical checkbox. The tabs and steps are no longer displayed horizontally.