Summary

Introduced with V5.5, the DataGrid control provides a flexible and interactive way for users to enter, review and update values for a Page List (or Value List) property on a work object form or flow action form.

This article describes the construction of a flow action form that uses a DataGrid control.

The DataGrid control provides an alternative user interface presentation to the Row Repeat control.

Whether you use a Row Repeat control or a DataGrid, the resulting clipboard contents are the same, but the user interaction is different. In a specific business setting, one or the other may feel more natural or appropriate.

For new development in V6.1 or newer systems, the new Grid, Tree Grid, and Tree controls are recommended. They are simpler to include in an application and provide an enhanced user experience. For an example of using one of the new controls, see How to add a Grid layout to a section.

Suggested Approach

Definition

Implemented as a standard HTML Property rule, the DataGrid control allows interactive editing of rows of a table, corresponding to pages of a Page List or Value List property.

For example, the Work Settings tab of the Operator ID form, illustrates some of the many capabilities provided by the control.

This portion of the Operator ID form is defined by the section rule Data-Admin-Operator-ID.WorkSettings, which you can open and examine.

In this section, the DataGrid displays and accepts values for the pyUnavailablePeriod property, a Page List. Each row of the grid, identified by a numeric index 1, 2, 3..., corresponds to a embedded page of class Embed-Data-Admin-UnavailablePeriod.

Example

The Emerald Company new member application includes a local flow action Update Appointments. This allows a customer service representative to view, or revise, appointments associated with a work object.

The standard property Work-.pyAppointmentsList is a Page List, containing two standard Single Value properties pyMeetingStartDateTime and pyMeetingEndDateTime. The Emerald application includes two additional properties, MeetingNotes and MeetingLocation.

Each work object may have none, one, or many meetings, and order is significant.

Using the Row Repeat control, a flow action to display or update the meetings appears as unnumbered rows:

As an alternative to the Row Repeat control, you can present the Page List property as a DataGrid. On the clipboard, the results are the same as with the Row Repeat control, but the user experience is different, Through settings, server-based validation and computation can occur a row at a time, before the flow action form is submitted.

Procedure

Follow these steps to configure the DataGrid control as an alternative.

Step 1. Create a flow action. Set the Applies To class the appropriate work type or class group.

Step 2. On the Form tab of the Flow Action form, add a freeform Layout control. Delete all but a single cell of the freeform layout.

Step 3. Delete the default SmartLayout control. (The cells of a SmartLayout are too small for a DataGrid.)

Step 4. Select, drag, and drop and Input Box control into the cell.

Step 5. Open the Cell Properties panel.

• Enter the Page List property — pyAppointmentDetails in this case — into the Property field.
• Set the Display As field to DataGrid, a standard HTML Property rule.
• Click the magnifying glass icon at the right of the Display As field to open the parameters window.

Step 6. Complete the parameters and click OK.

• Property Type — Select Page List.
• Property Name — Identify the property. SmartPrompt is available.
• Applies To — Identify the Applies To key part of the property.
• Width, Height — Optional. Can supply values later after testing.
• Ordered DataGrid — Select to allow the user to re-order rows at runtime using drag-and-drop or by clicking a column header. (Updates, but not inserts or deletes, are not allowed at runtime in this mode.)
• Columns — Complete this set of parameters (itself presented as a DataGrid), identifying each embedded property and how it is edited. Order is significant. Four HTML Property rules are supported: DateTime, Date-Calendar, Default, and OpenRuleAdvanced.
• Immediate Update — Select to cause each row to be sent from the browser to the server and posted to the clipboard as focus leaves the row. This feature uses AJAX.

Step 7. Click OK to save the parameters you entered. Then click OK to save and close the Property panel. Save the flow action rule.

Results

Step 8. Test. Use the flow action to update a work object.

Step 9: Use Tools > Clipboard to start the clipboard tool and confirm that the Page List property is updated correctly.

Notes

Consult the help system for details on all DataGrid parameters.