Creating conditional logic through the Quasar Form Pro plugin

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. Reset checkbox values
  5. Recalculate total
  6. Add/remove class
  7. Make the field required/make the field not required
  8. Disable sending the field value to mail/enable sending the field value to mail
  9. Add variable/change variable value
  10. Hide tab/Show tab/Switch to tab

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:

0%

Move the slider

How many cards do you need?

Minimum order amount is 5 items.

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:

0%

Select "High-quality" in the Material field and the value of the slider must be greater than 10

How many cards do you need?

Free delivery for 10+ items made of high-quality material.

Material
Do you need delivery?

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.

0%

If amount of pens is more than 10, then the cost of each pencil decreases by two dollars.

Quantity of pens (10 r. per item)
Quantity of pencils (5 r. per item)

Pen price: 0 $.

Pencil price: 0 $.

You got a discount on pencils!

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.

0%

First example:

Change images when selecting values ​​in a checkbox.

Place for a print
0%

Second example:

Field values ​​are transferred to the table

Name
Phone
Field:Value:
NameNot filled
PhoneNot filled

Not all data is filled

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

0%

First example:

With the help of the logic functionality, the value in the second checkbox will be selected automatically when you select the value in the first checkbox.

Please select
Automatic filling

Second example:

The large text box will be populated with the value from the checkbox.

Please select
Automatic filling

5) Reset checkbox values – clears all selected values ​​from the checkbox. As long as the condition is met, it will be impossible to set a value for this checkbox.

6) 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 ).

0%

First example:

Initially, only the first 2 fields are involved in the calculations, each field adds one unit. But when the sum becomes more than 10, the third field will be connected to the calculation, using the logic functional.

Field 1
-
+
Field active
Field 2
-
+
Field active
Field 3
-
+

Field is not active

Total: 0 $.

Second example:

Upon reaching the amount of $ 20. there will be a 50% discount.

Quantity
Total: 0 $.

Discount received

7) 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.

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

9-10) Make the field required / make the field not required – make the field required or optional. Required fields cannot be skipped. This feature helps you create complex quizzes.

11-12) Disable sending the field value to mail / enable sending the field value to mail – allows you to exclude the field and its value from the letter that you receive by email. This option is suitable for quizzes with multiple question branches.

13) Change the value of a variable – allows you to set the value of a variable from other variables. The value can be the calculation of several variables. Example:

14) Change variable value to field value – set the value of the variable to the value of the field.

15) Hide tab – hides tab. You cannot switch to a hidden tab. Required fields in a hidden tab are ignored.

16) Show tab – shows tab. Such a tab has the status of a regular tab.

16) Switch to tab – switches the form to the tab specified in this action. To switch to a hidden tab, you first need to show it. Also, if there are blank required fields, switching will not occur. Use the logic of disabling mandatory filling of fields if necessary.

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 that only fields suitable for this action remain.