View container element

Use a View container to break up your content into multiple views.

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.

View container

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.

View item

  • 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.

View navigation element

Full article here

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.

View container navigation button action

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.

Jump to next view upon answer

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.

Skip views

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.

In addition to requiring a dedicated flow builder, the navigation conditions are limited to simple equal to, lower than, and greater than conditions. As a result, we prefer using logic and formulas. When we replace the logic of "Page 2" with formulas, we get the following show-hide formula on View 2:
FS
OR(QA_OA, QA_OB, QA_OC, QA_OD, QA_OE)

//or by using a different notation

QA_OA || QA_OB || QA_OC || QA_OD || QA_OE

//or by using a different formula which stands for NOT Question A Option F

!QA_OF
This method is not only simple but also more powerful, as it allows you to use highly complex conditional logic. In this example, you will also need to include the above formula in Views 2, 3, and 4, as they all depend on the same condition.

Related articles

Learn more about view container in one of the following articles