Display Conditions

Custom conditions that control element display properties (visible/hidden). You can set conditions at the module level, field level, and field options level. Display conditions are essentially filters (they use the same system). 

Note: When using display conditions, you cannot currently use field syntax that includes the ID of a field. You must use syntax that uses the name of the field. Example: [Field: email_address] works, [Field: 12953] does not work.

Edit/New: Tool for creating display conditions (uses the filter dialog).

When selecting your data set fields for a module in Ivinex, there may come a time when you want to hide a certain sub-tab, field, or field option until a predetermined action takes place. To show or hide sup-tabs, fields, or field options based on user actions, you will need to use the Display Conditions tool.

Getting Started With Display Conditions

Example: We have a radio group field type with options for "yes" and "no". When a user selects, "no", we want to show a text field that the user will fill out.

The Display Conditions tool is located in the Module Details window.

Before using the Display Conditions tool, we first create the form fields in the module. For this tutorial, the following form fields have been created and the field we want to apply display conditions to (when the user clicks the “No” option), has been highlighted in red.

To create the new display condition, first click on the “Edit/New” link located in the Module Details window, this will open a new filter (display conditions use the filter dialog).

To create the logic for the new display condition, we first select the field we are basing it on (“Do you like the color green?”), then select the comparison operator (“Equal”), and then the condition (“No”). After we have setup the logic, give the filter a name, and click the save button. The name given to this filter is "Don't Like Green".

Note: This is just an example, field names, comparison operators, and conditions will change depending on the fields used in different modules.

The next step is applying a display condition to a field. First select the field we want to apply the display condition to (“What color do you like?”), and then in the Field Display Options window, select the display condition from the Display When drop-down and click save.

We can test the display condition in real time in the Ivinex admin area by performing the action that will trigger the display condition. In this case, when the “Yes” option is selected, our field will not display, and when the “No” option is selected, our field will display.

Advanced Usage

Example: We want to display different options in a select box (drop-down) based on the selection in another select box (drop-down). Let's say we have some shirts, and the colors available for each size shirt varies. Depending on which shirt size is selected, we will only show the colors available for that size shirt.

For this example we will be working with the following data:

• Shirt Size
  • Small
  • Medium
  • Large
• Colors
  • White
  • Black
  • Red
  • Blue
  • Green
  • Orange

1. First create two select (drop-down) field types and add the options for each field in Shirt Size and Color. Shown side by side for this example.

 

Note: In the example image above, the display column on all of the select options is set to "Always". This is the default value and is the only value available until any display conditions have been setup/created.

2. The next step in this process is setting up the display conditions that will control what options are available in the “Color” drop-down, based on the selection in the “Shirt Size” drop-down.

Our first display condition will display all colors AFTER a shirt size has been selected. The logic for the first display condition will be:

• Name: Shirt: All
  • (if) Shirt Size (is) EQUAL (to) Small
    • OR
  • (if) Shirt Size (is) EQUAL (to) Medium
    • OR
  • (if) Shirt Size (is) EQUAL (to) Large

The next display condition will display certain colors IF “Medium” or “Large” is selected. The logic for this display condition will be:

• Name: Shirt: Medium or Large
  • (if) Shirt Size (is) EQUAL (to) Large
    • OR
  • (if) Shirt Size (is) EQUAL (to) Medium

The final display condition will display certain colors IF “Small” is selected. The logic for this display condition will be:

• Name: Shirt: Small
  • (if) Shirt Size (is) EQUAL (to) Small

3. The final step in this process is going back to the Color field and setting which shirt colors to use on display condition.

4. Now when a certain “Shirt Size” is selected, the color options available will be determined by our display conditions.