Interactions determine the dynamic behaviors of widgets and pages. Clicking a button to navigate to another page in the prototype is an interaction, as is mousing over a widget to reveal another widget on the page.
You'll create and manage your prototype's interactions in the Interactions pane. You can choose from the most common interactions for a selected widget at the bottom of the pane, or you can click New Interaction to build your own.
Tip: If you need more room to work on your interactions, click the window icon at the bottom-right of the Interactions pane or double-click any event or widget name to open the Interaction Editor dialog.
The Structure of an Interaction
Interactions are made up of three parts: widget and page events, cases that are added to events, and actions that are added to cases.
Events are triggers that correspond to particular page and widget behaviors. When the triggering behavior occurs in the web browser, the event is "fired," and any cases attached to it are executed in response. For example, if you click a button to navigate to a different page in the prototype, you have fired its OnClick event.
To view a page or widget's available events, select it and click New Interaction in the Interactions pane. Then, select an event in the list to configure an interaction under it. (You can view the full list of available page and widget events lower down on this page.)
To delete an event and all of its cases and actions, select it in the Interactions pane and press DELETE.
Cases are ordered lists of actions that occur in the web browser in response to a page or widget event firing. A case is automatically added to an event when you assign one or more actions to it, though the first case's name is hidden by default. Hover your cursor over the event's name and click Enable Cases to the right to see the first case's name.
If needed, you can add additional cases to an event by clicking the Add Case icon to the right of the event's name. When the event fires in the web browser, you can choose which of its cases to execute in the menu that appears. Alternatively, you can set up conditional logic to make this determination automatically based on certain criteria.
To delete a case from an event, select it in the Interactions pane and press DELETE.
You can reorder the cases under an event by dragging them up and down. (The order of cases is important when you're working with conditional logic.)
Actions are the changes that occur in the web browser in response to a page or widget event firing. For example, if you click a button to navigate to a different page in the prototype, an Open Link action has occurred in response to the button's OnClick event.
When you select an event in the New Interaction menu, you'll be shown the list of available actions. After selecting an action, you'll be prompted to configure it. You can then add additional targets to the action (for actions that take targets) by hovering your cursor over the action's name and clicking Add Target to the right.
To add more actions to a case, click the "+" Insert Action icon at the bottom of the case. To delete an action from a case, select it in the Interactions pane and press DELETE.
You can reorder the actions in a case by dragging them up and down. Actions occur in sequential order from top to bottom, so it's important to arrange them in the exact order you want them to happen in the web browser.
Page and Master Events List
OnPageLoad: When a page initially loads in the web browser
OnWindowResize: When a page initially loads in the web browser and whenever the browser window is resized
OnWindowScroll: When the browser window is scrolled in any direction
OnWindowScrollUp: When the browser window is scrolled up
OnWindowScrollDown: When the browser window is scrolled down
OnPageClick: When the page's background is clicked
OnPageDoubleClick: When the page's background is double-clicked
OnPageContextMenu: When the page's background is right-clicked
OnPageMouseMove: Fires continuously as the cursor is moved around the page
OnPageKeyDown: When a keyboard key is pressed
OnPageKeyUp: When a keyboard key is released
OnAdaptiveViewChange: When the current adaptive view changes due to the browser window resizing or the view being set with the Set Adaptive View action or the Adaptive Views dropdown in the prototype player
Widget Events List
OnClick: When a widget is clicked
OnMouseEnter: When the cursor is moved over a widget
OnMouseOut: When the cursor is moved off a widget
OnDoubleClick: When a widget is double-clicked
OnContextMenu: When a widget is right-clicked
OnMouseDown: When a widget is clicked, while the cursor is pressed down
OnMouseUp: When a widget is clicked, upon the release of the click
OnMouseMove: Fires continuously as the cursor is moved while over a widget
OnMouseHover: After the cursor hovers over a widget for one second
OnLongClick: When a widget is clicked and held for one second
OnKeyDown: When a keyboard key is pressed while typing in a widget
OnKeyUp: When a keyboard key is released while typing in a widget
OnMove: When a widget is moved by a Move action
OnRotate: When a widget is rotated by a Rotate action
OnResize: When a widget's size is changed by a Set Size action
OnShow: When a widget is shown by a Show or Toggle Visibility action
OnHide: When a widget is hidden by a Hide or Toggle Visibility action
OnFocus: When a widget gets browser focus by being clicked or tabbed to
OnLostFocus: When a widget loses browser focus by being clicked or tabbed away from
OnLoad: When the widget initially loads in the web browser (fires after OnPageLoad)
Droplists and List Boxes Only
Text Fields and Text Areas Only
OnTextChange: When the text on a text field or text area changes, either by a user typing in it or with the Set Text action
Dynamic Panels Only
OnPanelStateChange: When a dynamic panel's state is changed with the Set Panel State action
OnDragStart: When you begin to drag a dynamic panel
OnDrag: Fires continuously while a dynamic panel is being dragged
OnDragDrop: When you stop dragging a dynamic panel (fires when the mouse is released, not when it stops moving)
OnSwipeLeft: When a dynamic panel is swiped from right to left
OnSwipeRight: When a dynamic panel is swiped from left to right
OnSwipeUp: When a dynamic panel is swiped from bottom to top
OnSwipeDown: When a dynamic panel is swiped from top to bottom
OnScroll: When a dynamic panel with scrollbars is scrolled in any direction
OnScrollUp: When a dynamic panel with scrollbars is scrolled up
OnScrollDown: When a dynamic panel with scrollbars is scrolled down
OnItemLoad: When the repeater's items first load in the web browser and when the repeater's dataset changes in any way
OnItemResize: When a repeater item's size changes as a result of any interaction (such as a widget in the item being shown, hidden, or resized)
Open Link: Opens a prototype page or external URL in one of the following locations:
- Current Window: the current browser window
- New Window/Tab: a new browser window or tab
- Popup Window: a popup window
- Parent Window: the parent window of a popup window (this must be used from a page loaded in a popup window)
Close Window: Closes the current browser window or tab
Open Link in Frame: Changes the page loaded in an inline frame widget or the page containing an inline frame
- Inline Frame: and inline frame on the page
- Parent Frame: the page containing an inline frame (this must be used from a page loaded in an inline frame)
Scroll to Widget (Anchor Link): Scrolls the browser window to the location of a widget on the page
Show/Hide: Changes the visibility of a widget
Set Panel State: Changes the visible state of a dynamic panel
Set Text: Changes the text on a widget
Tip: The Rich Text option allows you to format the new text however you'd like.
Set Image: Changes the image on an image widget
Set Selected/Checked: Changes a widget's selected/checked state. This changes the widget's visual appearance if it has a Selected style effect
Enable/Disable: Enables or disables a widget. A disabled widget cannot be interacted with in the web browser, and its visual appearance changes if it has a Disabled style effect
Move: Moves a widget to a new location on the page
Rotate: Rotates a widget around a chosen anchor point
Set Size: Changes the size of a widget
Bring to Front/Back: Brings a widget to either the frontmost or backmost layer in the depth order (z-index) of the page
Set Opacity: Changes a widget's opacity
Focus: Gives a widget browser focus, moving the text cursor onto text-input widgets and highlighting clickable widgets
Expand/Collapse Tree Node: Expands or collapses the selected nodes of a tree widget
Set Variable Value: Sets the value of a global variable
Add Sort: Sort a repeater dataset using the specified sort criteria
Remove Sort: Removes sorting from a repeater
Add Filter: Filters a repeater dataset using the specified filter criteria
Remove Filter: Removes filtering from a repeater
Set Current Page: Shows a specific page of a paginated repeater
Set Items per Page: Sets the number of items displayed per page of a paginated repeater
Datasets > Add Rows: Add new rows to a repeater's dataset
Datasets > Mark Rows: Marks the rows in a repeater's dataset that meet specified criteria
Datasets > Unmark Rows: Unmarks rows the rows in a repeater's dataset that meet specified criteria
Datasets > Update Rows: Updates the existing data in a repeater's dataset
Datasets > Delete Rows: Deletes rows from a repeater's dataset
Set Adaptive View: Changes the adaptive view displayed in the web browser
Wait: Adds a pause of the designated amount of time, in milliseconds, before any subsequent actions are executed
Other: Shows a specified text description (as a placeholder for an action that has not been prototyped)
Fire Event: Fires a specified event on a page, master, or widget
Raise Event: “Raises” an event on a widget in a master up to the page level