Using a single Form to add and update data

When you have two Forms in your working area, one for adding data and the other for updating it, finding space for more components may be challenging. For this purpose, to save some space, you may use a single Form for both data operations. Here's how you can do that.

Here, we talk about the Form component.

To use a single Form:

1. Drag a Form component to your working area.

2. Next, to populate the data of a table's selected row, specify the {{selectedRow.data}} variable in the form's Data field.

3. Create a new action of the Condition type and specify the following code in the code field:

return [null, undefined].includes({{ui.form.value.id}});

3. Next, add an if condition:

• specify for it a Create Row action

• specify the Form value object as {{ui.form.value}} in the Configure Row section.

4. Add an else condition:

• specify for it an Update Row action

• configure the identifier in the Filters section as id = {{ui.form.value.id}}

• specify the Form value object as {{ui.form.value}} in the Configure Row section.

5. Next, navigate to the Finish step of the action and assign your load data action to the On Success trigger to update the data in the table.

6. Finally, assign the create/update action you've created before to the On Submit trigger of the Form.