Calculate field value on save

Try it out!

Scenario

Forms will often have number fields for inputting measurements, which could be in different units such as ounces and kilograms, centimetres and inches, or even different currencies.

This guide will demonstrate how to allow an End User to select a unit of measurement, that will automatically convert the value, but making sure that any row saved will use a standardised unit of meters.

---

Steps

1. In the Data section, create a new table using Budibase DB, name it events

2. 

   Add two columns to your events table - a text column called "event" and a number column called "distance"

   

3. In the Design section, create a new blank screen (if you haven't already), and add a Form component (not to be confused with a Form Block). Set type to "create" and the schema to your events table.

   

4. Add a Field Group component, and click "Update form fields" - this will fetch the columns from your table and create an input field for each. Set the "Type" option to 3 Columns.

   

5. Add an Options Picker as a child of your form, and set the field and label to "units". Set the Options Source to custom, and click "define options.

   

   Add 3 options:

   Units	Value
   Meters	1
   Yards	0.914
   Feet	0.30

6. Be sure to set the default value to 1, and uncheck "Alphabetical"

   

7. Add an "On change" action to the options picker using the "Update Field Value" action
   i. Select the Form
   ii. Set Type to 'Set value'
   iii. Select the Distance form field
   iv. Click the lightning bolt and select the JavaScript tab. Add the following:

   JavaScript

   const previousUnit = $("New Form.Fields.units");
   const newUnit = $("Field Value");
   const previousDistance = $("New Form.Fields.distance")
   
   return (previousDistance * (previousUnit / newUnit)).toFixed(4);
   

📘

Previous and new values on change

It's worth bringing attention to the use of the options picker bindings.

$("New Form.Fields.UnitPicker") will get the value of the field before the change occurs.

$("Field Value") is the new value that will update the field when the on change finishes.

8. Add a "required" Validation setting to the options picker - the default error message is simply "Error", so be sure to add something useful like "Please specify units" to help the user understand the issue.

9. As a child-component of your form, and a sibling of your field group, add a new button. Update the button text to "Save", and add an Icon "save-3-fill".

10. Add an On Click action "Save Row" to save the information from your form into your table - (If you don't specify any columns, all fields will be saved by default). In our case we want to select the 'Distance column' and provide the following binding: {{ multiply New Form.Fields.Distance Form.Fields.units }} in order to save all distances in meters.

11. Add another On Click action to validate your form

12. It's also good practice to clear a form after submitting. Add another action "Clear Form" and chose your form to be reset.

13. Add a table at the base-level of the component tree, as a sibling of your form component, and set it to fetch data from the events table. Initially it will be empty, but you can now publish your app and add new events using Meters, Feet or Inches.

14. 
    

---

App export

Downloads may take a few seconds.