How do I add a single form to add and update data?

If you need to save some space on the working area, instead of creating two separate forms for adding and updating data, you can achieve that with a single form. Here’s how to do that:

  1. Drag a Form component to your working area. To populate the data of a table’s selected row, specify {{ui.employeesTable.selectedRow.data}} in the form’s Data field;

  2. Add a new multi-step action - Condition . In the code field, specify the code:

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

  1. For a True condition, add an Update Row action

  1. For a False condition, add a Create Row action.

  1. On the Triggers tab, assign the action that loads your data On Success trigger to update the data in the table.

  2. Finally, assign the add/update action to the On Submit trigger of the form:

Hi,

I can get the form to update an existing row but how do I clear the form so I can add new data?

(just for the benefit of anyone else looking the full article is here
https://docs.uibakery.io/how-tos/work-with-components/create-a-single-form-to-add-and-update-data)

Hi @mcuk,
Thank you for your question, it actually makes a lot of sense. One of our engineers will post the full solution shortly and I’ll make sure to update the docs accordingly.
Cheers!

Hi, @mcuk

After successful action execution (e.g. row creation), the form will be reset to its initial state (will become empty).