The iOS Human Interface Guidelines define an action sheet as a component that “displays a set of choices related to a task the user initiates.” In this tutorial, you will set up an action sheet on the login screen for an iPhone app simulation. The action sheet will be displayed when the reviewer taps the “Forgot your password?” link on the screen, and will give the reviewer three choices: reset their password, answer a security question, or cancel the action. This tutorial will provide you with some solid experience in setting up dynamic page actions in iRise Studio.
This tutorial assumes that you have already added the transparent overlay master and the action sheet component to an iPhone 4 page, as well as a Text widget containing the text “Forgot your password?” The overlay and action sheet components can be found in the “iPhone Mobile Content iDoc for iRise 8.9″ in the iRise iDoc Library.
We need to configure two sets of actions on this page:
This video demonstrates the tasks performed in this tutorial:
In iRise Studio, dynamic events such as page actions and navigation are configured by adding Link and Action widgets to the canvas area of the workspace (the canvas is the gray area surrounding the page). You can then connect these “canvas widgets” to widgets on your page so the events can be triggered by user interaction.
First let’s set up the transparent overlay.
Follow these steps to add the Show/Hide Widget actions that will be applied to the transparent overlay:
Now that the page action is on your canvas, you need to link it to the UI component that will trigger the action. To do this, you might need to collapse the transparent overlay and the action sheet component so you can access the “Forgot your password?” Text widget behind them. See “Collapsing page content” below if you’re not sure how to do this.
After you’ve done that, just drag the Text widget and release it on the Show Widget action on the canvas. A blue navigation line will appear indicating the association between the UI component and the Show widgets event.
Now that you’ve set up the action to reveal the transparent overlay, go ahead and add the action to hide the overlay. This time you will choose Hide in the Set Page Action dialog and connect the resulting Hide widgets action to the Cancel button in the action sheet. Don’t forget to expand the action sheet component if you can’t see it on the page.
To collapse an object on the page in Studio, right-click or Control-click the object and choose Collapse widget from the context menu. The object will be collapsed to a small box that appears at its X/Y coordinates. You can then expand the object by right-clicking or Control-clicking the box and choosing Expand widget. This action does not affect the appearance of the page in the Reader.
We’ll use a different approach to reveal and hide the action sheet. For this interaction, we’ll create an alternate view of the action sheet that contains no content — an “empty view” — and switch between the two views to toggle the action sheet’s visibility.
First we need to create the empty view.
Now that you have two alternate views, you can add the Switch Views action that will reveal the action sheet. Follow these steps:
With the Switch Views action on the canvas, you can now associate the event with the UI component that will trigger it. Since the Show widgets action is already connected to the “Forgot your password?” Text widget, you need to “chain” the two events together. To do this, simply drag the Show widgets action to the Switch Views action and release. Now both page actions will be triggered in sequence by the same reviewer interaction.
Similar to the process of hiding the transparent overlay, you now need to configure another Switch Views action to hide the action sheet. This time choose the Empty View in the Set Page Action dialog, and don’t forget to apply the same transition effect we used previously. Chain this Switch Views action to the Hide widgets action you connected to the Cancel button earlier.
Make sure to test the simulation in the Reader to make sure everything is working as expected.
When the simulation launches in the Reader, your transparent overlay should be hidden (because you selected Hidden in the Properties panel) and the action sheet should also be hidden (because you specified the Empty View as your default view). When you click the Forgot your password? link, the transparent overlay should appear and the action sheet should slide up into position on the page. When you click the Cancel button, the action sheet should slide back down out of view, and the transparent overlay should be hidden.