Linking a Table to a Form/Detail

While building your app, you can use multiple components in UI Bakery, and the best thing is that you can link them to share data and state between them. In this article, we'll explore two of the most common scenarios of linking components.

Here, we talk about Table, Form, and Detail components.

Linking a Table to a Detail component

Let’s say you have a Table and you would like to have a separate form to view the details of a specific record from the table. That means you need to connect the Table with the Detail component.

In our example, we will use a Products table and we will add a Detail component to display product details. Let's dive in!

To link Table and Detail:

1. Start by adding a Table to your working area.

2. Next, you need to load your data and then bind it to the Table.

3. Now, you can add a Detail component. By default, it is connected to the previous Action, that’s why you’ll see the same fields as in the Table.

4. Remove this default action from the Data field of the Detail component.

5. Instead, specify the value of the selected Table row - use the selectedRow.data variable.

Start typing ui.productsTable.sele... - the autocomplete will suggest all the available options.

As simple as that! Now you can check the result - product details will change as you select different records in the Table.

Linking a Table to a Form component

Let's say you have a Products table and you would like to have a separate form, where you could both see and update record details. In this case, you could use a Form component instead of a Detail one. Let’s dive into how you can do that!

To link Table and Form:

1. Start by adding a Form component to the working area.

If you're starting anew, check out the previous instruction and repeat steps 1-2 first.

By default, the Form is connected to the selected Action and will already contain it in its Data property.

1. Remove this default action from the Data field of the component.

2. Instead, specify the value of the selected Table row - use the selectedRow.data variable.

Done! The Table and Form are now linked and have the same structure. If you click on a Table row, the row values will appear in the Form.

If you want to customize it even further to be able to update record details from the form and send it back to the data source, then be sure to check out this page.