Form steps

In Budibase it is straightforward to create navigable multi-step forms.

For example, you may want to create a form where you can enter employee personal details in the first step, and employee address details in a second.
Upon submission of the form, linked entries will be saved into two tables.

Data

Create two tables with a many-many relationship:

  • Employee
  • Address

Design

Add the default screens for the Employee table, and add a form with two form steps into the /new/row screen.
The form schema should be set to Employee.

Next add fields into Step 1 that match the column names in the Employee table.
Also add in a Next button which will be used in the form navigation.

Define actions for the Next button. Add the 'Change Form Step' action and set the step value to 'Next Step'.

Now add fields into Step 2. This time the field names should match the columns in the Address table.
In addition, there are now two buttons:

  • Back, which can be configured as above but should naturally navigate to the 'Previous step'.
  • Save, which will submit our form, saving a new linked entry into both the employee and address tables.

Finally, our Save button actions will validate the form, and navigate back to /employee as usual.

Add a Save Row action and move it to position 2. It will save to the Address table in the standard way.

For the Save Row action into the Employee table, use Action Referencing to connect the newly created Address row.


Did this page help you?