Detail

Detail component can be used to display the data about a certain record in a table. The component inherits the structure of the table, so there's no need to configure the fields manually. At the same time, you can use the detail component as a form by making the detail's fields editable.

Methods

Method	Description
submit()	submits the form (inside a detail component)
setValue(value: Object)	sets value of the detail, key: value object
reset()	resets the detail
openEditing()	open editing mode for detail
cancelEditing()	dismisses edited data and close editing mode

Triggers

Triggers allow you to launch certain actions upon different events.

On Init	Calls for an action on component's initialization
On Submit	Calls for an action on component's submit
On Click	Calls for an action on component's click

Using detail component

Let's add a detail and display the data from of a selected table record inside the component.

1. Drag a detail component onto the working area. By default, it will be populated with the dummy data.

2. Expand the Data field of the component, remove the dummy data and specify the reference to the table's selected record as {{ui.yourTable.selectedRow.data}}.

3. Click Regenerate structure. You will notice that the contents of the component obtain the structure from the table, and when you select a certain record, the data will be displayed.