The usage of the conditional system is important when you have too many logical operations. It is really easy to use this feature due to a user-friendly interface.
After choosing HTML elements created in a calculator, only those elements will be listed in your condition area. Since this feature is dynamic, you cannot put conditions relative to an element that does not exist.
You have to click just once on an element that you need and it will be shown in the working area.
The chosen element has 8 connection points for chaining with other elements. The top right point is for deleting this element.
To create a connection, you need to drag a line from the selected element to the unselected one. The arrow indicates that the right element depends on the left element.
It is possible to create multiple connections and conditions between different elements.
To create the condition(s), it is enough to click on the circle button in the chain between elements.
You can create single or many conditions for one connection:
After pressing the Add condition button, there will be appeared in three fields:
The fourth field will appear if you select the Set or Set and disable option in the Action field.
In Condition, there are four options: is equal to, is inferior to (less than), is superior to (greater than), is different than.
In the Action field, you can find hide, show, hide (leave in total), unset, set value, set value, and disable operators:
The Element that can take string values cannot be put into a condition like elements that include quantity or number. For example, we have fruit types (orange, apple, strawberry) in the Dropdown menu. For the Dropdown menu, we can never set a condition "if the fruit type is less than 50, hide the radio button".
When you set the condition, you can save the changes that will be applied to the calculator.
Let's take an example of making the conditional system more clear.
Below you can see the initial view of the Loan form sample calculator without any conditions.
For example, I want to write a condition for the Annual Interest Rate depending on the Loan Amount. So, I have to link from Loan Amount to the Annual Interest Rate.
For the condition, I will say that if the loan amount is greater than 15 000, set the annual interest rate to 10. if the loan amount is less than 5 000, hide the annual interest rate element. Below you can see how it is done.
Now it is time to see the result. The first picture is for the first condition. When the loan amount is 16 000, the annual interest rate should be set to 10.
The second picture is for the second condition. When the loan amount is 5 000, the annual interest rate should be hidden.