Advanced Behaviors

Computed Expressions allow information to be automatically loaded into a field as long as a specific condition is met. Unlike validation expressions, these functions do not return a true or false value accompanied by an error message. Instead, they enable certain fields in the form to be auto-filled based on the data entered in another field. These functions are not executed constantly but are triggered when the form is opened and whenever a change is detected in the field on which the expression depends.

Adding an expression in the Behavior section

It is important to note that if the readonly property is set to false, the auto-filled field will allow user modifications. However, any new information entered by the user will be lost when a change occurs in the reference field, and the result is updated on the screen. Conversely, if readonly is set to true, the user will not be able to modify the values in this field, and they will only change when the expression is re-executed.

Let’s look at an example of this type of expression using the "Phone" field from the form you created earlier. Add a new Number element with the label "Contact Number" and the name "nroContacto."

Creating a new field

Go to the Computed Expressions section within the Behavior tab of that field and click the fx icon on the far right to open the editor.

Edit Expression option

In this case, you simply need to enter the name of the field with the "Phone" label (in this case, "tel") and click Confirm so that the value entered there is reflected in the "Contact Number" field.

Confirming the new expression

You can test its functionality by entering data into the "Phone" field in Preview mode.

The "Contact Number" field will reflect the data entered in the "Phone" field

It is possible to set more precise configurations by applying validation expressions to these functions. For example, we can use the isEmpty() expression and the ternary operators we discussed earlier to set different values for "Contact Number" depending on whether the "Phone" field is empty or filled:

isEmpty(tel)?"No contact number":tel

isEmpty() expression within a Computed Expression

In this way, if the "Phone" field is empty, the first expression will return true, and the field value will be set to the text entered before the colon ("No contact number"). If "Phone" contains data, the expression will return false, and the field value will be set to the one in the last expression, i.e., the same value entered in "Phone."

Comparison of validation functionality

Another highly useful function of Computed Expressions is performing calculations between numbers entered in the form fields. For example, with a "Quantity" field and a "Price" field, we can create a "Total" field whose content is configured by a simple expression:

Price*Quantity

This way, the total will be calculated without requiring the user to enter this data manually.

Using these criteria, you can create more complex expressions to automate your forms. For instance, a "Product Type" field could be automatically configured with an expression that retrieves the value of the "Product Code," or a "Country" field could auto-fill based on the value of a "Province" field. This approach saves response time and prevents incorrect or incompatible values.

Next, we will explore the different types of elements you can add to your forms and their specific characteristics. Keep in mind that in many cases, you can enhance their functionality by applying the expressions we have discussed in this section.