All Collections
Using Editor
Examples
Example: Tabbed Views using Viewstacks
Example: Tabbed Views using Viewstacks
Viewstacks in iRise Editor
Kirsten Stevens avatar
Written by Kirsten Stevens
Updated over a week ago

Viewstacks are an important concept to utilize when creating a dynamic user experience. You can use them to create a variety of different objects like fly-out menus, carousels, and tabbed views. 

In this article, I'll be showing you how to use Viewstacks and Switch view actions to create a collection of tabbed interfaces, allowing you to flip between the different tabs without refreshing the page and without having to navigate through multiple screens. 

First, we're going to add a fill container to the screen. Click the Container dropdown from the widget toolbar and draw a new Fill Container widget.

Next, right click on the Container and select Add view -> Duplicate view from the context menu. 

Rename the views to View 1 and View 2 on the Format panel. 

Next, we'll create the tabs.  Above the Viewstack, create two square shapes from the widget toolbar. Enter 'Tab 1' and 'Tab 2' respectively as the text for each square then position them together to the top left of the Container Viewstack using the alignments guides or alignment icons in the Format panel.

Create a duplicate view on the Tab 1 square shape and rename the views to 'Tab 1 - Selected' and 'Tab 1 - Not Selected'. Repeat the step above for the Tab 2 square shape.  Remove the fill color for the 'Not Selected' views. 

Add an Action - Switch Views to the Tab 1 - Not Selected view. This action will switch three views: 1) Tab 1 - Selected view 2) Tab 2 - Not Selected view and 3) Container Viewstack set to View 1. 

Add another Action - Switch views to Tab 2 - Not Selected. This action will also switch three views: 1) Tab 1 - Not Selected 2) Tab 2 - Selected, and 3) Container Viewstack to View 2.

Add user inputs and text widgets to the container views to differentiate the two. I created a user information form as View 1, and a credit card information form as View 2. 

As a final check, make sure that the views are set up to display exactly how your screen should show when it loads. For my example, Tab 1 is set to Selected, Tab 2 is set to Not Selected, and the container Viewstack is set to View 1. 

Did this answer your question?