5.6 Accessing the Most Recent User Modification

When a user makes a modification to an editable table or Input component, the change triggers the Viewsheet's onLoad Handler script to re-execute. The onLoad handler offers an 'event' object which you can use to detect the user's action and make an appropriate response. The event object provides access to the following Viewsheet events:

Name and region of the Editable Table in which the user has just made a modification.

Name and type of an Input Component in which the user has just made a selection.

For an editable table, the 'event' object provides the following properties:

name

The name of the table component.

type

The type of the component, always 'table'.

row

The index of the modified row in the table.

column

The index of the modified column in the table.

source

A reference to the table object which can be used to access table properties.

Example: Recalculating Table Data  >>

The following example illustrates how you can use the 'event' object to dynamically update table data in response to user modifications. You will create a table that contains the fields 'Name', 'Price', 'Quantity', and 'Total'. You will enable the user to modify the 'Price' and 'Quantity' fields, and use script to automatically update the 'Total' field with the corresponding data (i.e., the product of 'Price' and 'Quantity').

To create this example, follow the steps below:

1. Create a new Viewsheet based on the 'Order Model' data model. To do this, follow the steps below:

a. Press the 'New Viewsheet' button in the toolbar. This opens the 'New Viewsheet' dialog box.

b. Expand the 'Data Source' node, and then expand the 'Orders' node.

c. Select the 'Order Model' entry, and press 'OK'. This creates a new Viewsheet based on the 'Order Model' data model.

2. From the Viewsheet Component panel, drag a Table component to the Viewsheet grid.

3. Expand the 'Order Model' node at the top of the Component panel, and drag the following fields into the Table component:

Product.Name

Product.Price

Product.Quantity Purchased

Product.Total

4. Resize the table as desired.

 

5. Right-click the table and select 'Properties'. This opens the 'Table Properties' dialog box.

6. Under the Advanced tab, select 'Enable Table Editing' and press 'OK'.

7. In the table, right-click the 'Product:Name' header and select 'Column Option' from the context menu.

8. Deselect the 'Enable Column Editing' option, and press 'OK'. This prevents the user from editing the product name.

9. In the table, right-click the 'Product:Total' header and select 'Column Option' from the context menu.

10. Deselect the 'Enable Column Editing' option, and press 'OK'. This prevents the user from manually editing the total. (The total will be calculated by script.)

11. Press the 'Options' button in the Viewsheet toolbar. This opens the 'Viewsheet Options' dialog box.

12. Select the Script tab. Press the 'onLoad' radio button to select the onLoad handler.

13. Enter the following script into the Editor:

if(event != null) {

  var tableObject = event.source;

  var row = event.row;

  var column = event.column;

 

  if(column == 1 || column == 2) {

    var editedRow = tableObject.getFormRow(row);

    var price = editedRow[1]; // second column = Price

    var quant = editedRow[2]; // third column = Quantity

 

    if(price != null && quant != null) {

      tableObject.setObject(row, 3, price*quant); // fourth column = Total

    }

    else {

      tableObject.setObject(row, 3,'');

    }

  }

}

Observe that event.row and event.column are used together with getFormRow to acquire the particular value that the user has entered, and setObject is used to write the calculated data into the table.

14. Press 'OK' to close the Script Editor.

15. Preview the Viewsheet.

Edit various values in the 'Price' and 'Quantity Purchased' columns, and observe how the 'Total' column is automatically updated. Note, however, that changes a user makes to the table (including calculated values) do not persist across sessions unless they are committed to the database. See Committing User-Modified Data to Database (Database Write-Back) for more details.

 

See Also

Table Properties: Advanced Tab, in Dashboard Design, for information on how to make a table editable.

<< 5.5 Accessing User-Modified Data from TextInput © 1996-2013 InetSoft Technology Corporation (v11.5) 5.7 Committing User-Modified Data to Database (Database Write-Back) >>