4. Interactions
Understanding interactions
Interactions can be added to pages and widgets in the Interactions pane. They are made up of Events, Actions, and sometimes Cases.
Events are the triggers in an interaction. For example, a click, a mouse enter, or a key up. Different widgets can respond to different events. Full list of Events.
Actions are responses to those events. For example, when a button is clicked, an Open Link action can be performed to link to another page. Full list of Actions.
Cases allow you to perform different actions depending on the scenario. To use cases on an event, first click Enable Cases next to the event. More on this below.
Follow the steps below to try building a simple interaction.
- Open a new RP file and add a second page in the Pages pane.
- Add a Paragraph widget to the new page so it isn’t blank.
- Open Page 1 and add a Button widget.
- Select the Button widget and click New Interaction in the Interactions pane.
- Select the Click or Tap event.
- In the actions list, select the Open Link action.
- Choose Page 2 from the Link To dropdown and click OK.
- Click the Preview button to test out the interaction.
Showing different flows with Cases
You can use Cases when you want an event to perform different actions depending on the scenario. For example, a login button may result in showing an error message or successfully signing in.
Once you have an interaction on a widget or page, follow these steps to add cases.
- Select the event and click Enable Cases next to the event.
- Name the first case.
- Click Add Case next to the event to add a second case and name it.
- Add actions to the second case by clicking the + button under the case.
- Click the Preview button to try it out. Triggering the event displays the case names and you can click one to perform the related actions.
For advanced prototypes, you can add Conditions to cases and automatically perform actions when the conditions are met. More about Conditions.
You can also learn more about interactions from the reference guides and tutorials below:
Next, let’s learn about Dynamic Panels, an incredibly useful widget for prototyping.