# 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.

{% hint style="success" %}
Here, we talk about the [Form](https://docs.uibakery.io/reference/working-with-components/form) component.
{% endhint %}

## 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:

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

3\. Next, add an <mark style="color:green;">**if**</mark> condition:&#x20;

* specify for it a **Create Row** action
* specify the Form value object as `{{ui.form.value}}` in the *Configure Row* section.

4\. Add an <mark style="color:red;">**else**</mark> condition:

* specify for it an **Update Row** action
* configure the identifier in the *Filters* section as `id = {{ui.form.value.id}}`&#x20;
* 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.

{% embed url="<https://demo.arcade.software/6ZPLY4uqkkh2KTSxdH3b?embed=&embed_desktop=inline&embed_mobile=tab&show_copy_link=true>" %}