Activating an iPhone Action Sheet

iPhone banking app login screenThe 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.

iPhone action sheetThis 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:

Watch a video

This video demonstrates the tasks performed in this tutorial:

Link and Action widgets

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.

Add Show/Hide Widget actions

Follow these steps to add the Show/Hide Widget actions that will be applied to the transparent overlay:

  1. Drag the Action widget icon from the Widget Toolbar and release it on the canvas. The Set Page Action dialog appears.
  2. In the Set Page Action dialog, accept the default selection in the left column (Show/Hide Widgets) and change the Select widgets to property to Show.
  3. In the list of page widgets, select your transparent overlay.
  4. Click Done.

Set Page Action dialog

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.

Setting an On click event trigger

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.

Collapsing page content

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.

Add Switch Views actions

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.

  1. With the action sheet visible on your My Bank Start Page, right or Control-click the action sheet and choose Add View > Add View from the context menu. The action sheet will appear to have been replaced by a box with a dotted outline. Above the box you will see a gray rectangle containing the words “View: Empty View”, and a Views panel is now displayed instead of the Properties panel.
  2. In the Views panel, make sure the Empty View is selected as the Default View.

Now that you have two alternate views, you can add the Switch Views action that will reveal the action sheet. Follow these steps:

  1. Drag the Action widget icon from the Widget Toolbar and release it on the Canvas. The Set Page Action dialog appears.
  2. In the Set Page Action dialog, select Switch Views in the left column. Your options in the right side of the dialog will change.
  3. In the Views column on the right side of the dialog, choose the view containing the action sheet from the drop-down list.
  4. Click the None link to open the Set Transition Effect dialog box.
  5. Choose the Slide transition and accept the default settings for Direction and Duration.
  6. Click OK.
  7. Click Done.

Set Page Action dialog - Switch Views

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.

Chaining page actions

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.

Test your simulation

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.