Calculate field value on save
Displaying a preferred unit to end users, but always save a standardised unit
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
Add component
: Form, and set the Schema to your table with the 'Distance' number columnAdd component
: Field Group- In the Settings Panel, click
Update form fields
-
Add component
: Options Picker -
In the Settings Panel, manually enter a Field name of 'UnitPicker'
-
Provide a Label: 'Unit'
-
Set the Default Value to 1
-
Uncheck Alphabetical
-
Set Options source to 'Custom'
-
Click
Define Options
:Label Value Feet 0.305 Yards 0.914 Meters 1
-
Click the button beside On change
-
Add Action
: Update Field Value- Select the Form
- Set Type to 'Set value'
- Select the Distance form field
- Click the lightning bolt and select the JavaScript tab. Add the following:
const previousUnit = $("Form.Fields.UnitPicker"); const newUnit = $("Field Value"); const previousDistance = $("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.
$("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.
- Click the button beside Validation
Add Rule
: Required and type in an error message to display- Be sure to
Save
Add component
: Button- In the Settings Panel, click the button beside On click
Add Action
: Validate Form and select the formAdd Action
: Save Row- Select the form as the Datasource, and the destination Table
Add Column
: Select the 'Distance column' and provide the following binding:{{ multiply Form.Fields.Distance Form.Fields.UnitPicker }}
Save
App export
Downloads may take a few seconds.
Updated 4 months ago