Your app can easily include a dozen or so questions. Breaking up your content into multiple views improves its performance and enhances conversion rates. The “View container element” introduces a new method that combines the benefits of the "View break element" and the "Set input action" while eliminating their drawbacks or complexity. The View container element offers several benefits:
- Break your content into multiple views.
- Skip views based on a condition.
- Add view animations.
- Connect (multiple) View navigation elements.
- Auto-advance views upon question answer.
- Nest view containers to create advanced interfaces.
The View container element is a new workhorse that provides an accessible method to build advanced flows and applications with complex navigation. The View container element includes a View container and a View.
A View container is the wrapper, or parent element, around your Views. In your View container, you have the following options:
- View items: By default, your view element has 2 View items. You can add more View items by clicking the “Add view item” button.
- Transition animation: set a transition animation on your View items. To set a transition animation on your View items, you have several options: Fade in/out; Height; Slide in from top; Slide in from bottom; Slide in from left; Slide in from right. The show animations (from top, right, bottom, and left) have corresponding hide animations in the opposite direction.
- Transition duration (optional): update the transition animation duration from 300 to 1000 milliseconds.
- Add fade to animation (optional): toggle to add a fade animation to your transition animation.
- Show/Hide Logic: Use the toggle to control whether the View container element is shown or hidden under certain circumstances.
- Visibility formula: If the result of the formula is TRUE or a number above 0. The View container is visible. If the result is FALSE or 0, it is hidden.
- Show/Hide Logic: Use the toggle to control whether the View item is shown or hidden under certain circumstances.
Note: Adding show/hide logic to your view items allows you to create conditional flows where only views that meet certain conditions are included in the view navigation.
When you add a View container element to the canvas, a View navigation element is automatically added. If you do not need the view navigation element, you can delete it. By default, the bundled View navigation element is connected to the view container element. However, if you add a new View navigation element from scratch, you will need to manually connect it to the View container.
We offer the following View navigation display types:
- Arrows (navigate)
- Counter (track)
- Arrows with counter (track and navigate)
- Numbers (track and navigate)
- Dots (track and navigate)
- Progress bar (track)
By using one or multiple View navigation elements, you can create advanced interactive interfaces.
You can also use regular Button elements to facilitate your View container navigation via the View Container Navigation button action. Within your View container navigation action, you first need to select the View container you want to navigate. You then have access to three actions:
- Navigate to next View: navigates the View container to the next View in the view index.
- Navigate to previous View: navigates the View container to the previous View in the view index.
- Navigate to View index: this option allows you to connect a variable that sets the View navigation.
You can navigate a View container by using the questions in a View element. This is useful when your View only has one question and you want to navigate based on the answer, instead of relying on a button click. This method reduces friction in your flow and leads to an increased completion rate.
To activate the "Jump to next view upon answer" feature, toggle the switch in the question element logic settings.
The View container enables you to create advanced conditional flows in a straightforward manner. In ConvertCalculator conditional flows are built with logic and formulas. You can apply conditional logic to each View item, determining whether a view should be displayed or skipped.
Let's compare this method of building conditional flows to tools that use a visual interface for building conditional flows like Typeform.