Video instruction

How To Use Conditional Logic

Quasar form Pro has powerful integrated conditional logic models. You can use it for the following tasks:

1. Hide/show fields
2. Change text/change html of “custom text” field
3. Set/change field value
4. Recalculate total
5. Add/delete class
6. Add variable/change variable value

How it works

Logic model works using simple scheme consisting of two elements — condition and action.

1) Condition. Consists of two or three parts depending on condition type.

1. Condition selector — id field with checked value.
2. Condition type — equal, not equal, greater than, less than, filled, empty, has class, does not have class.
3. Condition value (does not apply to some of the condition types).

Example:

The form above has the logic model depicted on the screenshot below:

If the slider value is greater than four, the hidden “Send” button is shown (the button was hidden using field options). Try moving slider and see it for yourself.

2) Action, the second part of any logic model, may consist of three and more values depending on action type. In the above form action displays the button.

More complex logic models

A single logic model may have a lot of conditions and actions which reference different fields.

Example:

The form above has two logic models (screenshot):

The first logic model has two conditions and two actions: if the slider value is greater than 9 and the dropdown material menu has “High-quality” field selected, the action part is executed — delivery selection is hidden and the text changes to “You get free delivery”.

What is the use of the second logic model?

It is very simple, not all actions have opposite effects. For example, the action of showing or hiding content has opposite effect if you have hidden the field, but since the condition is not true anymore, the field is shown again.

But some actions like “change html” do not have opposite effect. The text is changed once and for all; even if the condition is false now, the text won’t return to its initial state. This is why we need to create one more logic model in order to return initial text back. In the end, the form above has two logic models.

Actions which do not have opposite effect:
1) Change html
2) Set field value

Even more complex logic models with variables

You can use variables for implementation of complex tasks. A classic case of using variables is making a calculator where the discount depends on value of some field.

The form above has only one logic model (screenshot):

At first we declare variable a and initialize it with value 0. Next, we assign this variable with field value (quantity of pencils), then multiply it by three (originally it is multiplied by 5 in the calculator, but we need two rubles discount so we multiply it by 3). After this we use action to recalculate total, where we simply insert our variable.

Pay attention — the name of variable in action fields is written in curly braces.

Also, know that you can calculate values of different variables using action “Change variable value”. Here:

Action descriptions

1) Show field — displays field if it was hidden. Has opposite effect. If the condition is false, the field is hidden automatically again.

2) Hide field — hides field. Has opposite effect. If the condition is false, the field is shown automatically again.

3) Change html in custom text — changes text or html in the “custom text / html” field. Only works with these types of fields. Has no opposite effect. If the condition is false, initial field value is not restored.

The main feature of this field is the ability to use any HTML tags.

4) Set field value — sets field value. Has no opposite effect. If the condition is false, initial field value is not restored.

5) Recalculate total — recalculates the value of the “calculation” field. Works only with this type of field. This kind of logic model may be used to implement discounts. Short code [itog] is current total of the calculator. Other short codes are not supported. If the condition is false, then this field does not influence calculations. Here is the example of implementing 20% discount: [itog] — (([itog] * 20) / 100 ).

6) Add class — adds a class to the specified element. The main feature of this action is that it is not bounded by the form limits, and you can add a class to any element on a page. If the condition is false, the class does not disappear.

Action consists of two fields. In the first one you specify the selector — it is the class or ID of the element you want to add class to. In the second field you specify the class itself.

7) Delete class — works the same as adding a class, but instead of adding a class it deletes one.

Additional information

1) Working with a large number of fields

Amount of selectors (fields) in conditions and actions is not limited. There is no need to create a lot of logic models to work with a large number of fields.

On a screenshot above you can see one condition and one action, but there is a lot of work with a large number of selectors (fields). When we use several conditions, we put “and” or “or” between them, meaning that either both or only one condition should be true. You can also see a lot of fields in the action part, which will be shown.

2) Amount of logic models

The amount of logic models used in one form is only limited by your imagination. When there are a lot of logic models, use instruments shown on the screenshot below for convenient view:

3) Accessibility of fields

When you select different actions, you can notice that the list of available fields changes.

There is a simple explanation: when you select an action, fields are filtered automatically so only suitable for this action fields remain.