Creating and Controlling Views

Dynamic displays, also known as ”alternate views”, are a powerful component of iRise that allows you to change the state of objects within a page without having to refresh the page. This creates a much richer visualization experience and saves you time by eliminating the need to recreate pages over and over.

Although there are several ways to control a dynamic display, the most common method is to use a Switch Views action. This tutorial will walk you through the creation of a dynamic display and the configuration of a Switch Views action to control its behavior.

Watch a Video

Watch the following video for a quick demonstration of the concepts covered in this tutorial.

What is a dynamic display?

One way to describe a view is to compare it to a notecard that’s resting on a sheet of paper. Let’s say that the notecard represents a Section widget and the paper represents a page in iRise Studio. Within that Section you could have any page widget that you like, arranged in any way. Now let’s say that you slide another notecard with other widgets on it behind the first notecard so that now you have a stack of two cards on the page. This represents our dynamic display. Even though you can only show one card at a time, you can trigger each of the views/cards to appear without having to refresh the page. This gives the reviewer a real sense of interaction with the page.

When should I NOT use a dynamic display?

Excessive use of dynamic displays can result in undue complexity and potential performance issues in a simulation. When determining whether a dynamic display is called for, consider whether it would be easier to navigate to a separate page (typically when more than 50% of the page content will change). You should also think twice about creating “nested views” (a dynamic display within an alternate view), which can add significant overhead to the logic behind your simulation.

Dynamic display elements

This is an example of a dynamic display viewed in Studio:

Dynamic display

Creating alternate views

To create an alternate view of content on a page, you will first need to select a page widget from which you want to create the new view. This can be a Section, Form, Button, Image or any other page widget. There are two ways you can create a view once you have your widget selected:

Once you have a dynamic display (at least two views) you can always add more views to that display by using either of the methods described above.

Tip

When using the Duplicate View option, a common practice is to start out with a group of widgets contained within a Section widget. Applying the Duplicate View command to the Section widget will copy not only the Section, but all of its children as well. This approach works well when your alternate views will differ only slightly, as in the example below.

More on managing views

Within the Views panel, you can manage your views and how they interact with the rest of the simulation. The text field at the top of the panel will be the name of your dynamic display (remember that a dynamic display is a collection of views). Giving the dynamic display a descriptive name will make it easier to configure page actions or other dynamic behaviors that affect the display.

The names of the individual views can also be changed in the Views list, which again will help with the process of configuring interactions involving the display. To change the order of the views, drag and drop them in the list by clicking the area to the left of the view name.

You can also set the default view from the dropdown at the bottom. The default view is the view that will appear when the page is loaded in the browser – keep in mind that refreshing the page or navigating to a new page will reset all views to their default view.

Using a dynamic display to create an image viewer

In the following example, you will create a single dynamic display that uses Switch Views actions to cycle through a series of images. This type of interface component could be used for any number of applications, including online catalogs, photography sites, or even social networking sites.

Before you start

Decide on three images that you will use for your image viewer and make sure they are available in your file system. Although not necessary, it would be best if you resize the images to the dimensions you want them displayed on your page, and so they are identical in size.

Also, create a new project in iRise Studio with a single page called “Image Viewer.”

Create the dynamic display

Let’s start out by setting up the alternate views for our image viewer.

With your Image Viewer page displayed in Simulation View, drag an Image widget to the page. When prompted to choose an image file, browse to one of the images you prepared ahead of time and select it.

Add View context menuNow right-click the image and choose Add View > Duplicate View. Although the content on your page will not appear to have changed, you will notice that the dynamic display dropdown now appears above the upper left corner of the image, and the Views tab is now open in the Details panel.

To swap out the image in your new view, right-click the image and choose Change image from the context menu. Browse to another of the images you prepared ahead of time and select it. You will notice that the name of this view automatically changes to the name of the image you selected.

Repeat this process to create another view containing your third image.

Modify dynamic display properties

Throughout this process, the Views panel will have remained visible. If at any point the Details panel shifted back over to the Properties tab, you can switch back to your dynamic display’s properties by clicking whichever view is currently displayed and then selecting the Views tab, or by clicking directly on the icon in the upper left corner of the dynamic display.

Views panel

With the Views panel open, note that you can switch between your alternate views by selecting them in the Views list. You can also switch views manually in Studio by using the dropdown above the dynamic display, or by clicking the Views button on the far left of the Status Toolbar in Studio, which is only active if a dynamic display is present on the page (the Views button is also present in iRise Reader, which can be a useful tool for testing the appearance of your dynamic displays in your browser).

Now that you are finished adding views, you can rename your dynamic display and its views appropriately in the Views panel. Let’s call the dynamic display “Image Viewer.” Since your views have already taken on the names of the images they contain, renaming them is optional, but might make sense depending on the image subjects. Finally, make sure that the desired view is selected in the ‘Default view’ dropdown.

Add Switch Views actions to “activate” your dynamic display

Now that we’ve made a dynamic display, we want to give the reviewer the ability to change the views when interacting with the page in the browser. To do this, we’ll use Switch Views actions.

To add a Switch Views action to the page, drag an Action widget from the Widget Toolbar to the canvas. When the Set Page Action dialog appears, choose Switch Views from the options on the left. Now on the right you will see the dynamic display along with a dropdown that includes all of its views, as well as some other options.

Switch Views action dialog

For this example we want to cycle through the views instead of choosing one specifically, so select [Next view] in the Views dropdown. This means that the action will switch the display to the next view every time it is triggered (if at the last view it will cycle back to the first view).

Click Done, and then provide a descriptive label for the canvas widget by typing “Next view” in the Properties panel.

To give your reviewer the ability to choose the previous view, simply repeat the procedure above, this time choosing [Previous view] in the Set Page Action dialog, and labeling the resulting canvas widget with “Previous view”.

Now that we have the page actions on our canvas, we just need to add the source widgets to the page so the reviewer has something to interact with. You could use buttons or icons for this, but we’ll keep things simple and use Text widgets.

Either above or below your dynamic display, add two Text widgets arranged side-by-side. One will contain two left-facing angle brackets (<<) and the other will contain two right-facing angle brackets (>>).

Connect the Text widgets to the Switch Views actions by dragging each one and releasing it on the corresponding action widget. The result will look something like this:

Switch Views actions

Launch the page in iRise Reader and confirm that clicking the next link and the back link have the desired effect.

Optional enhancement – add a transition effect

Transition pop-upSwitch Views actions, like Show/Hide Widgets actions, can have transition effects applied to them. Double-click either of your Switch Views actions to reopen the Set Page Action dialog and click the Effect link (which will currently say “None”). This will open the Set Transition Effect pop-up, where you can choose from among several transitions available in iRise.