Using conditional logic in Cosmos React
Define the logic that governs the behavior of fields in your application more intuitively with the condition builder. By creating conditions, you can link the visibility and availability of certain parts of your UI to your business needs, and build a cleaner, less cluttered application.
For example, in a loan application, you can disable fields that collect information about a spouse if the customer is single.
- In App Studio, navigate to a condition builder that
defines the application logic that you want to edit.
For example: In an Edit field dialog box, set the Disabled list to Custom condition, and then click the Settings icon. - In the Condition builder dialog box, in the
Select field list, choose the field on which you want
to base your comparison.
For example: Select Marital status. - In the middle field, select the expression that you want to use in your
comparison.
For example: Select is equal to. - Click the Settings icon to select the type of value to
which you want to compare the field:
- To compare the selected field with free-form text, select Enter text.
- To compare the selected field with a field in the application, select Another field.
For example: Select Enter text. - In the last field, define the value against which you want to compare the
target field.
For example: Enter Single. The application can now evaluate the Marital status field. If the expression is true (Marital status equals Single), the field is disabled. - Optional: To add another row to the condition, define its components and relation to
other rows:
- Click the Add a row icon, and then repeat steps 2 through 5.
- Click the and operator and define the logical
relation between the conditions.If you select and, the condition evaluates to true when all of the rows evaluate to true. If you select or, the condition evaluates to true if at least one of the rows evaluates to true.
- Optional: To define complex relations between rows, click Advanced
mode, and then, in the Advanced condition
field, define the logic that you want to use.
For example: Enter (1 OR 2) AND 3. For a condition that has three rows, this expression evaluates to true if either the first or the second row evaluate to true, and at the same time, the third row is also true. - In the Condition builder dialog box, click Submit.
Previous topic Configuring cascading drop-down lists Next topic Branding your application