Bindings in forms

Forms are a critical part of most Budibase apps as they allow your users to collect, edit and submit data.

While bindings are not necessary to build functional forms for the internal Budibase DB and SQL tables, they do provide additional flexibility for your form fields when you need dynamic labels, placeholders, or default values.

Furthermore, you may want to read the value of a form field when handling such cases as:

• On change event
• Conditional UI
• Filtering

When using a custom Form schema bindings will be required when reading and submitting values. For example, you may want to initially read some default values from a REST GET query and then, upon submit, pass your form details through to another REST POST query.

👍

Form data can be passed through to a REST POST query in a similar way as seen in this tutorial: Posting form data to a custom query.

Default values

A default value binding will be applied on the initial load of a screen. This is useful when pulling values from a Singleton source.

Example

Consider a REST query that retrieves an employee record for a bound ID. We can add a Repeater block to a Screen to pull that employee data.

Step 1 - Setup the repeater block

After selecting the GET query as the data source for the repeater block, click on the cog icon and provide a binding value.

In this example I am using the {{ URL.id }} binding which is made available through URL variables. You can however use any value here, including App state.

Step 2 - Configure the form

Add a Form component with a Custom schema. Add the form fields that you would like to pull data into. Make sure to enter a unique name in the Field setting.

For the Default value setting, click on the lightning bolt icon, and add the binding to pull out the specific field, for example Address:

{{ Employee Repeater block.GET Employee Row.Address }}

Once all fields have been added with their appropriate default values, you should see something like so:

Note that you may need to refresh the page - remember that default values only apply on load of the screen.

On Change event

If you want to perform Actions when a form field value has changed, you can use the On Change event.

Within the Settings Panel of each form field you can find the Define action button beside the On change label.

Tutorial: Calculate age from DOB field

1. Create a new app with a new internal Budibase DB table called Patients. Add a Text field for the Name of the patient, and another Date/Time field for the DOB. Add some rows.

2. Add a List view Autogenerated screen for the Patients table and Eject the Table block and nested Details Form block.
3. In the Field group within the Details side panel form, add another field, this time a Number field, and make it Disabled. Type 'Age' into the Field name setting.

4. Next select the DOB field, and click on Define actions under the On change setting. Add an Update Field Value action for the Details Form, and choose the 'Age' field as the target.
   For the value, click on the lightning bolt icon and select the JavaScript tab. Here we will calculate the Age from the DOB.

5. Provide the following JavaScript binding:

/**
* Source: https://stackoverflow.com/questions/10008050/get-age-from-birthdate
*/
function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}

return getAge($("Field Value"));

Make sure to save! Also note the binding that is being used - we want to use the newly selected date value:

👍

{{ Field Value }}

Gets the current field value.

❗️

{{ Details Form.Fields.DOB }}

Will get the previous value; before the on change was triggered.