Working with User Input:

Capturing and Displaying Clipboard Data

In iRise, you are not limited to the data records stored in datasheets when you want to add data flow to your simulations. Field data, sometimes referred to as form data or user input data (depending on the context), can also be passed between widgets or stored on the Clipboard.

This capability opens up enormous potential for making your simulations more interactive and dynamic. Rather than static UI components, user input widgets can be configured to capture data entered by your reviewer. Field data stored on the Clipboard can be displayed on a page, or it can be used for more advanced features such as controlling simulation logic.

In this tutorial, we’ll look at some of the most common use cases for field data, especially as it pertains to the Clipboard.

Watch a Video

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

What is field data?

Fields are simple name-value pairs, like “username=bsmith” or “birthday=12/14/1970″. They are typically passed in and out of user input widgets, Text widgets or Image widgets. In the image below, two fields – Name and Email Address – are being sent from the Clipboard to Text widgets on a page. When the page is launched in a browser, the Text widgets will be replaced with the values associated with each field.

Basic data flow

What is the Clipboard?

The Clipboard is a critical component of your data toolset in iRise. Unlike record data stored in a datasheet, data stored on the Clipboard exists only during a reviewer’s browser session. Any data captured on the Clipboard during a review session is cleared out when the browser is closed, and because Clipboard data is session-based, simultaneous reviews can take place on a Definition Center without conflict.

It might help to think of the Clipboard as temporary data storage that is unique to each review session, whereas a datasheet provides data storage that persists across review sessions. Although they might not hold up under scrutiny, these analogies might also help:

Four basic rules for the Clipboard

Capturing and displaying user input

This tutorial will focus on one of the most common use cases for field data in iRise: capturing data entered by the reviewer and passing it to another page via the Clipboard. The basic scenario is that a new user is registering for a service. After entering their personal information, they have an opportunity to review it for accuracy and make changes before final submission.

Create the registration form

Start out by creating three blank pages, a Registration page, a Registration Conformation page and a Registration Complete page. On the Registration page, assemble the form shown below, making sure that all of the layout and user input widgets are contained within a Form widget, and that the Form widget and each user input widget is given a descriptive name in the Properties panel. Enclose the user input widget names in brackets as a clear indication that they will be used to capture data. Finally, add two or three state abbreviations to the Select widget, and specify Output Values of “Yes” and “No” for the respective Radio Buttons.

Registration form

Tip

To capture user input data, all of your user input widgets must be contained within a Form widget. While adding your Form widget to the page first is the best way to make sure this happens, all is not lost if you forget this step. In this case, just select all of the widgets on the page, right-click and choose Wrap in > Form.

Send data flow to the Clipboard

Clipboard icon on Widget ToolbarWe are going to pass the data entered by the reviewer onto the Clipboard. In order to accomplish this, drag a Clipboard widget from the Widget Toolbar onto the canvas on the right side of your page.

Now drag the first Text Input widget and release it on top of the Clipboard widget. When prompted, choose Send data, type Name in the Select a Field pop-up window, and click OK. A red data flow line labeled with the field name will appear between the Text Input and the Clipboard.

Sending data to the Clipboard

Using the same Clipboard, repeat this procedure for each of the remaining user input widgets in the form. When you are finished, your page should look something like this:

Registration form data mapping

Submit the form

All that remains on this page is to add the final necessary component for capturing data (the first two being a Form widget and data flow). Drag an Action widget onto the canvas, and in the Set Page Action dialog, configure the action to submit the form. Then create navigation from the Register button to the Submit Form action. Finally, drag the Registration Confirmation page onto the canvas and create navigation from the Submit Form action to the Registration Confirmation page.

Form submission

Display the captured data

Open the Registration Confirmation Page and assemble the UI shown below. Note that the widgets in the right column are standard Text widgets, and not Text Input widgets. The field labels in the left column, however, you can copy and paste directly from the Registration page.

Registration confirmation UINow we are going to take the data that is currently on our Clipboard and pass it back onto the page. To do this, drag and drop a Clipboard widget onto the canvas on the left side of the Registration Confirmation page. Then drag the Clipboard widget onto the [name] Text widget, and when it turns black, release it. In the Select a Field window, select the appropriate field from the list and click OK.

Using the same Clipboard, repeat the actions above for each remaining placeholder, selecting the appropriate field for each one. Note that if you included the city, state and zip placeholders all in one Text widget as we did, you will need to move your mouse cursor horizontally over the widget to highlight individual words. It can be a bit tricky at first, but with patience, you will see that you can drag and drop your Clipboard onto a portion of the text, which is indicated by the dotted red underscore in the image below.

Registration confirmation data mapping

Display Clipboard data on the Registration Complete page

The last step is to display the Registration Complete page if the user clicks the Confirm button. When the confirmation is displayed, we will include the value of the Name field currently on the Clipboard.

With the Registration Confirmation page still displayed in your workspace, drag the Registration Complete page onto your canvas. Then create navigation from the Confirm Button to the Registration Complete page.

On the Registration Complete page, add a Text widget containing the text “Thank you for registering, [name]!” And finally, drag a Clipboard widget onto your canvas and pass the Name field into the [name] substring of your Text widget.

Registration complete

Test your simulation

Launch the Registration Page in the Reader. To test the data flow, fill in the form and click the Register button. If all goes according to plan, the Registration Confirmation Page will open with the data captured on the previous page displayed in the proper locations. If not, review the sections above to make sure you didn’t miss a step. Finally, click the Confirm button to test the data flow on the Registration Complete page.

Optional enhancement – Enable the reviewer to edit captured data

Currently the Edit button on the Registration Confirmation page doesn’t do anything. Let’s enable this button to switch to an editable view of the Clipboard data displayed on the page. To do this, we’ll need to create an alternate view of the content on the page, send the Clipboard data to that view, and then trigger a Submit Form action to save any edits back to the Clipboard.

Create the alternate view

To create the alternate view, we’ll first want to wrap the content currently on the page inside a Section widget. Select all of the page widgets except the form heading, right-click one of them and choose Wrap in > Section. In the Properties panel, configure the scroll settings for your new Section widget so scroll bars will never be displayed.

Now right-click the Section widget and choose Add View > Duplicate View. Since we’ll use the alternate view to capture any edits to the data, we’ll need to convert the Section widget to a Form widget. Just right-click the Section and choose Convert to Form. Then click the Views tab in the Details panel and rename the views Read-only and Editable. Make sure the Read-only view is set as the default view.

Now delete all of the Text widget placeholders from the right column and replace them with user input widgets. Again, you can copy and paste from the Registration page to speed this up. Also, delete one of the two Button widgets, and change the Button Label in the remaining widget to Save Changes.

To map the Clipboard data to the Editable view, drag the field labels themselves and release them on the corresponding user input widgets. The data flow will end up looking something like this:

Editable view data mapping

Add a Switch Views action

To reveal the Editable view, the reviewer will click the Edit button in the Read-only view. Right-click the Edit button and choose Add Event > Action. In the Set Page Action dialog, configure a Switch Views action that displays the Editable view, and click Done.

Capture the edited data

To capture any changes the reviewer makes to the data, you will need to submit the form in the Editable view and send the data back to the Clipboard. Follow the same steps you used to capture the data in the Registration Form, using a second Clipboard widget on the right side of the page to receive the data, and linking the Submit Form action to the Save Changes button. No Link widget will be necessary, since the Submit Form action automatically invokes a page refresh, which has two effects: the dynamic display will switch back to its default Read-only view, and the edited data will be captured on the Clipboard and displayed in the Read-only view.