Working with the conditional logic

Starting from version 2.3.0, eForm comes with a conditional system using which you can show/hide elements based on logic. The system is applicable for all of the built in elements (since version 2.4.0, for lesser version any element that can not have any child elements inside it, like collapsible design element) and uses a reverse mapping technique so that more than one logic can be chained (with OR or AND operator).

#1: Understanding the Elements

To define the conditional logic, you’d need to first understand the (TYPE){KEY} identifier. It is really easy to remember and most of the information are already shown on the form builder itself.

#1.1: Understanding Element Type:

With eForm, we have 4 element types: Design & Security (D), Multiple Choice Question (M), Feedback & File Upload (F), Other Form Elements (O). Each of them is denominated by the single character written inside the parenthesis.

#1.2: Understanding Element Key:

The keys are visible directly from the form builder layout. When you add any element, the key is automatically generated and written into the draggable layout for quick identification.

For the image above, the highlighted element has Type: Multiple Choice Question (M) and key 1.

#2: Applying conditional logic on an element

Click on the settings icon [icon type=”glyphicon” class=”ipt-icon-cog2″] of any element and scroll down until you see Conditional Logic section. Click on Use conditional logic on this element and this will enable the conditional logic feature on this element. If you save the settings at this point then you will see the form element going gray on the form builder area. This behavior simply means the initial status of this element is hidden.

#2.1: Other conditional configuration:

There are only two configuration option for conditional logic right now:

1. Initial Status: If shown then the element will be shown initially, otherwise it will be hidden.
2. Change Status: You can show or hide the element if your logic satisfies.

#2.2: Conditional Logic:

Below the configuration options you will find a table to insert the logic. Click on the Add New Logic button to get started.

The logic are mapped in reverse order. Speaking simply, it is something like this:

• Show/Hide the element initially (when the form is loaded).
• Hide/Show the element by checking against other elements. If all of the logic against other element gets satisfied, then change the visibility of the current element.

This approach enables you to:

• Have multi-criteria logic. The visibility of one element can depend on status of many other elements.
• Have one to one, one to many, many to many and many to one mapping of logic. You can easily create three fields, say First Name, Email and Upload Resume, and show them only if user has entered his age which is greater than 21 and lives near New York city.

The different column of the table has following meanings:

1. (X) – The type of the element. Can be either MCQ (M), Feedback & Upload (F) or Others (O).
2. {KEY} – The key of the mentioned element type.
3. has – Please select value to compare against value or length to compare against length. Value and length may have different meaning for different element types. Please read: Conditional logic interpretation for different elements.
4. which – Comparison operator for comparing against the next column.
   1. equals to Mathematical = operator. If the user input equals to the next column.
   2. not equals to Mathematical != operator. If the user input does not equal to the next column.
   3. greater than Mathematical > operator. If the user input is greater than the next column.
   4. less than Mathematical < operator. If the user input is less than the next column.
   5. contains If the user input contains the next column value. For example, the word WPQuark contains themes.
   6. does not contain If the user input does not contain the next column value. For example, the word WPQuark does not contain xyz.
   7. starts with If the user input starts with the string at the next column. For example, the word WPQuark starts with WP.
   8. ends with If the user input ends with the string at the next column. For example, the word WPQuark ends with Quark.
5. this value – The value to operate against (refered as next column for the operator column). Comparison is always case insensitive. In case of Single/Multiple Options, if you wish to put a condition against an option please enter the same value as the label of the option.
6. rel – The relation operator with the next logic. Can be either AND or OR. Multiple relations are always grouped against OR (more on it below).

#2.3: Grouping multiple conditional logic:

You can add more than one logic to apply a chain. By default the rel operator is always AND, which means, all of the logic must satisfy. You can change any operator to OR if you want any of the logic to satisfy. To make it even easier, we’ve grouped multiple logic against the OR operator. So when you enter X AND Y AND Z OR Y AND Z AND J OR Z AND J AND K, it is interpreted as (X AND Y AND Z) OR (Y AND Z AND J) OR (Z AND J AND K). The parenthesis or grouping simply means that if any of the logic is true, then the condition is considered as satisfied.

The complex logic shown in the above image will be interpreted as (A AND B) OR (C AND D AND E) OR (F AND G). If any of the conditions inside the parenthesis is satisfied, the logic will be considered satisfied.

#2.4: What happens with hidden elements:

Hidden elements are shown with gray color in the form builder. When ever an element is conditionally hidden:

• It is not shown in the form (frontend).
• It is not shown in the email (both admin and user).
• It is not shown in the quick preview or print summary.
• It is not shown when editing the form (unless of course while editing, it becomes conditionally shown again).
• The validation of the element is ignored, i.e, even if the element is set to required and is conditionally hidden, the user won’t be prompt to enter it’s value.

#3: Rules of thumb:

Make sure to follow these rules when applying conditional logic to any element:

• Do not put any HTML code in any corresponding conditional field. (ie, do not put, for say, an image HTML for an option which would correspond to a certain logic).
• Do not put any LaTeX code in any corresponding conditional field.
• Only numbers and string work.
• Strings are always trimmed (i.e, we get rid of any whitespace at the beginning or at the end) and converted to lowercase before comparison. So make sure, your rules follow the same algorithm.

If you have any other query, please ask in the support forum.