Enabling Datasheet Interactions

Datasheets are wonderful tools for storing and displaying data records. Neither of these functions, however, requires much involvement from your reviewers, which means that a truly engaging experience for your stakeholders might still be lacking.

Fortunately, Record actions can do much more than simply retrieve data from a datasheet. As you will see in this tutorial, you can also use Record actions to create, update and delete datasheet records.

Watch a Video

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

What is a Record action?

Choose datasheet and action pop-upA Record action is an event that you can add to a page in your simulation with a type of canvas widget called a Record widget. Record widgets come in four varieties: Get Record, Save Record, Update Record and Delete Record. When you add a Record widget to your canvas, you will be prompted to choose one of these action types.

Because the purpose of a Record widget is to perform an action on datasheet records, it will always be associated with a specific datasheet. You can even create a Record widget by dragging a datasheet from the Directory panel to a page’s canvas, which eliminates the need to select a datasheet.

Get, Update and Delete Record actions often rely on an interplay with the Clipboard to determine which records should be displayed or modified. In this tutorial, you will use the Clipboard along with Record widgets to enable the display, updating and deleting of a single data record from a datasheet.

 

Building a simple CRM workflow

Let’s build out a basic CRM-type workflow in which we display a list of customers, and have the ability to update or delete the data associated with any customer record. We’ll also enable the creation of a new customer from the same page.

CRM scenario flow

Tip

If you completed the “Displaying Records in a Data Table” tutorial, you can use your work product as a starting point for this tutorial.

Build the Customer List page UI

We’ll start out by laying out the simple scenario shown above. This will give us three pages in our Directory panel: Customer List, New Customer, and Update Customer.

On the Customer List page, create a data table with the four columns and the following headers: First Name | Last Name | Email Address | Action. Only the first three cells in the data row need Text widget placeholders. To the last cell, add two buttons, one labeledUpdate and the other Delete (you can use Text widgets or icons for these actions if you prefer). Your table will look something like this:

Data table layout

Use a Text widget to add a page title above the table. Below that, but still above the table, add a Button widget with the label Quick Add.

Map data flow to the Customer List data table

Create a new datasheet called CUSTOMERS in your Directory panel. Populate the datasheet by clicking the Import CSV button and importing the Person.csv file from the Sample Datasheets folder.

Return to the Customer List page and use a Get Record action to map the “First Name”, “Last Name” and “Email” fields in the datasheet to the respective placeholders in the data table. Test the page in your browser to make sure the data displays as expected.

Enable the creation of a new customer record

When our reviewer clicks the Quick Add button, it will launch a pop-up window containing a form for entering some basic customer data and saving that input as a new customer record. First, let’s build the UI for the New Customer form.

Open the New Customer page. In the upper left corner of the page, add a Form widget with dimensions 300 x 250. Name the form New Customer Form. Inside the Form widget, use Text widgets, Text Input widgets and Button widgets to lay out the UI shown below.

New Customer Registration form

Add a Record widget to the page by dragging the CUSTOMERS datasheet from the Directory panel and releasing it on the canvas on the right side of the page. When prompted to select an action type, choose Save Record.

Map the data flow by dragging the Form widget itself and releasing it on the Save Record widget. This will open the Data Flow Editor window, which will allow you to map all three Text Inputs to the Record action.

Data Flow Editor

When you click Save, a dotted data flow line will connect the Form widget to the Save Record action. You can expand this “collapsed” data flow to see the individual mappings by right-clicking the line and choosing Expand from the context menu.

Now right-click the Create button and choose Add Event > Action. Configure a Submit Form action in the Set Page Action dialog and click Done.

The final action for both the Create and the Cancel buttons will be to close the pop-up window. For the Create button, add a Link widget to the canvas to the right of the Submit Form action. In the Set Destination window, choose Window Controls on the left, and then Close and Refresh on the right. Then connect the Submit Form action to the Close and Refresh link.

For the Cancel button, you will also add a Link widget to the canvas; however, this time choose Window Controls > Close when configuring the link. Connect the Cancel button directly to this Link widget.

New customer data flow

All that remains is to enable the link to the pop-up window on the Customer List page. Right-click the Quick Add button above the data table and choose Add Event > Link. In the Set Destination window, choose Go to Page on the left, and the New Customer page in the pane on the right. Then select the Open in a pop-up window check box and click the ‘pop-up window‘ link to open the window Settings dialog box. Specify a height of 340px and a width of 270px and click OK. Finally, click Done to create the link.

Test your simulation by launching the Customer List page in your browser and clicking the Quick Add button. This should launch the New Customer page in a pop-up window. Enter some information in the registration form and click Create. The pop-up window should close and the Customer List page should refresh, after which the data table should include a new row containing the customer record you just created.

Enable the deletion of a customer record

Now let’s configure the events associated with the Delete and Update buttons in our data row, starting with the Delete button. Both of these Record actions will rely on a built-in feature of a data row: the ability to send the data associated with a particular record to the Clipboard when a data row is clicked by the reviewer. This feature, which is enabled by default when you create a data table, has the effect of sending all of the fields in a datasheet record to the Clipboard without your having to submit a form or configure data flow to a Clipboard widget.

Sending a clicked record to the ClipboardConfigure the Delete Record action by right-clicking the Delete button in the data row and choosing Add Event > Record. In the Choose Datasheet and Action pop-up window, select the CUSTOMERS datasheet and the Delete Record option, and click OK. Now select the Delete Record widget that was created on the canvas, and note that in the Properties panel, the Clipboard Record(s) option is selected by default.

When the reviewer clicks the Delete button, two things happen in sequence: first, the data associated with the row containing that Delete button is placed on the Clipboard; then that data is deleted from the datasheet. All of this happens without a page refresh; however, to see the change applied in the data table, you will need to refresh the page. Do this by chaining a Link widget after the Delete Record action and choosing Window Controls > Refresh in the Set Destination window.

Test the Delete Record action by launching the page in your browser and deleting any record shown in the data table.

Update a customer record

Finally, let’s enable the Update customer feature. To do this, we’ll follow a procedure that is very similar to the one we used to create a new customer record, except we’ll use the Update button to launch the Update Customer page in a pop-up window. The Update Customer page will be nearly identical to the New Customer page, with the following exceptions:

Note: If you want, you can add additional user inputs to the Update Customer form to enable your reviewer to edit more of the data fields contained in the datasheet.

The last item in the list above deserves a little explanation. Remember that clicking the Update button in the data row on the Customer List page will place the associated data record on the Clipboard. Since the reviewer will be updating this data, it makes sense to display the existing data in the form so the reviewer can see what she is changing.

Update record setup

The key to making this work is selecting the Clipboard Record(s) option when creating the Get CUSTOMERS Record action on the Update Customer page. If, when you test the page in your browser, you see an array of data in each User Input in the Update Customer form, then you did not make this selection.

Test the update customer feature by launching (or refreshing) the Customer List page in your browser and clicking the Update button in any data row. The data associated with the row you clicked should be displayed in the Update Customer form. Changing any of that data and clicking the Update button should close the pop-up window and refresh the parent window, after which the changes you made should be displayed in the data table.

Conclusion

After completing this tutorial, you should have a solid understanding of the the four Record actions available in iRise, and how you would use each of them in a basic data administration workflow. You should also have a basic understanding of the potential interplay between record data and the Clipboard. This interplay is what makes it possible to perform actions on specific records within a datasheet, whether that action is to display, update or delete those records. As you will see in later tutorials, it also makes it possible to use fields within datasheets to control dynamic behaviors such as branching navigation and alternate views.