Linking a Table to a Form/Detail
Last updated
Was this helpful?
Last updated
Was this helpful?
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 , , and components.
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!
Start by adding a Table to your working area.
Next, you need to and then it to the Table.
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 previous dataset.
Remove this default action from the Data field of the Detail component.
Instead, specify the value of the selected Table row - use the selectedRow.data variable.
As simple as that! Now you can check the result - product details will change as you select different records in the Table.
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!
Start by adding a Form component to the working area.
In its Data field, 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're starting anew, check out the and repeat steps 1-2 first.
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 .
