Send a form
Last updated
Last updated
© 2024 UI Bakery
Next step is to learn how you can modify the data in the form and push it back to the data source.
Select your Form and navigate to the Triggers section.
Select On Submit in the first dropdown menu, and next click Create action in the Select action menu.
The new action you create will be bound to the On Submit trigger of the form thus enabling sending data to the data source.
For the new action, select your data source and the appropriate step, for example, Update row.
Choose the table, if needed, and specify the field and values that you want to update.
You can also use the HTTP with POST request step to send data to the API.
If you're not using an HTTP request, you need to configure the following:
In the Filters section, configure the identifier that will be used for record matching. You can refer to it as:
formName
is the name of your Form component, fieldName
is the name of the field.
In the Configure Row section, add {{ui.formName.value.fieldName}}
to the value of the field you want to update.
To save time configuring each field separately, you can switch to JS mode in the Configure Row section and send the form value object as:
Now, click on the plus sign under the update action step and select Execute Action from the list. This will trigger another action after the first one (update action) is completed.
In the Action to execute dropdown, select the action that loads your data.
The update action updates data in the data source, so to make sure the table displays actual information you need to add another action step to reload its values.
Modify any values in the form and click Submit. If everything is configured correctly, it will change the form value, and the table will be updated with new values as well.