10.9 Conditional Field
Description: This attribute is used to display an element only if given condition gets satisfied.
Components to accept the input: switch, select box, and input text.
When user enable the switch, it will display a select box and an input text as shown in the image below.
- Controlling property: This select box lists name of the all the elements which user have added. If user want to display element based on the value of a different element, then user can use all these elements available in the select box to write a condition.
- Conditional Expression: This field accepts the condition that needs to
be satisfied.
Example: User have a form to transfer money from account to another account. That form has select box to select a payee, account input to select an account from which user want to transfer the money, input field which accepts the amount and radio buttons which accepts the date i.e. when to transfer the money as shown in the image.
This radio button (Transfer when) has two options.- Now: If user wants to transfer the money today only, he will select this option.
- Later: If user wants to transfer the money on a different date, he will select this option.
Now when user selects “Later” option, there should be a date picker to accept the date as shown in the image below.
In this case user have to display the date picker “Transfer date”, if user selects “Later” option. This is condition.
Usage:
Assuming user has already added the radio buttons, and amount field.
Now when user will add “Transfer date” date picker, user will enable the conditional field switch. It will display a select box (Controlling property) and input text (Conditional Expression).
- Controlling property: This select box will list name of all the
elements. Therefore, it will display name of radio buttons (“Transfer when”)and
amount(“Amount”) field as shown in the image below.
If date picker based on the value of radio button is to be displayed, user will select the “Transfer When”.
- Conditional Expression: User will have to add the condition. There is a
help text written just below this input field.
“Please use x1, x2 as placeholder for selected controlling field to write expression”.
It implies when the condition is written, the name of an element that user have selected from Controlling Property, instead refer them as x1,x2 and on is not mentioned.
Therefore, in this example, user will write “Transfer When” as x1.
condition will be x1 === “Later”.
Write this condition in the input field as shown in the image below.
Note:
Sometimes, condition is a combination of multiple elements. In that case, user can select multiple elements from Controlling property. For example, user wants to display the date picker, only if user selects later and amount entered is greater than 100INR.Then user can select both “Transfer when” and “Amount”. And condition will be x1===”Later” && x2 > 100 as shown in the image below. - Condition cannot always be depend on element’s value that user have
added. For example, user has only one condition, display the date picker in case of
large screen only. This condition is not based on any element that user have added.
In such cases user can directly write condition in Conditional expression field. As
there is no controlling property, there will be no x1, x2 placeholder.
Condition will be “$baseModel.large()” ($baseModel.large() returns true if it is large screen) as shown in the image below.
- With controlling properties, user can add me different condition al. For
example, user has a condition, which is a combination of all the three conditions,
which are discussed above.
condition will be x1===”Later” && x2 > 100 && $baseModel.large() as shown in the image below.
Parent topic: Available Attributes