The Editable Table widget displays the records of an Entity or a Structure in a tabular layout and allows the user to create new records, update, or delete existing records.
How to use the Editable Table widget
The following example demonstrates how you can display the registered users on your platform in an editable table.
In Service Studio, in the Toolbox, search for
The Editable Table widget is displayed.
From the Toolbox, drag the Editable Table widget into the Main Content area of your application's screen.
Select the Data tab, and from the Entities tree, navigate to the User entity and drag it into the Editable Table placeholder.
To return to your screen, select the Interface tab, and select the Editable Table widget.
On the Properties tab, from the Source Record List dropdown, select the automatically created aggregate. In this example, we select New Aggregate 'GetUsers'.
After following these steps, and publishing the module, you can test the widget in your app.
All of the registered users are displayed in an editable table. The Editable Table widget has the following built-in behaviors that provide an efficient way of adding and editing multiple records at once:
- Cycle through the inputs using the TAB key.
- Save the record in the current row using the ENTER key or by using TAB in the last column of the row.
- Add a new row and use the ENTER key to save that record and create a new one.
- Cancel the edit or creation of the record using the ESC key.
|Name||Identifies an element in the scope where it is defined, such as a screen, action, or module.||Yes|
|Source Record List||Specifies a list with records to populate the widget.||Yes|
|Width||Width of the widget in columns. Other accepted units are pixels(px), points(pt), or percentage(%). Overrides the style sheet definition.|
|Margin Left||Left margin of the widget in columns. Other accepted units are pixels(px), points(pt), or percentage(%). Overrides the style sheet definition.|
|Margin Top||Top margin of the widget in pixels. Other accepted units are points(pt) or percentage(%). Overrides the style sheet definition.|
|Line Count||Maximum number of rows to display in the widget.||Yes||50|
|Show Header||Set to Yes to display the header row of the table.||Yes|
|Style Classes||Specifies one or more style classes to apply to the widget. Separate multiple values with spaces.||EditableTable|
|Enabled||Boolean literal or expression that defines if the widget is editable.||Yes||True|
|Delete Confirmation Message||Text literal or expression that is displayed to users to confirm the delete record action.|
|Add Record Message||Text to display in the link to add a new record.|
|Property||Name of an attribute to add to the HTML translation for this element.||You can pick a property from the drop-down list or type a free text. The name of the property will not be validated by the platform.
Duplicated properties are not allowed. Spaces, " or ' are also not allowed.
|Value||Value of the attribute.||You can type the value directly or enter expressions using the Expression Editor.
If the Value is empty, the corresponding HTML tag is created as property="property". For example, the nowrap property does not require a value, therefore nowrap="nowrap" is added.
|On Row Save||Screen action that is executed to persist new records or record updates.|
|On Row Delete||Screen action that is executed when a record is removed.|
|List||Collection of records returned by the performed query.||Yes||List|
|LineCount||Maximum number of rows displayed in the widget as defined in the Line Count property.||Yes||Integer|