iFormBuilder Smart Controls
What's covered:
- What are condition values?
- How do I add condition values to an element?
- How do I add multiple conditions?
What are Condition Values?
Using Javascript, condition values can be used to show or hide an element based on data collected in other elements on your form. So, if the Javascript expression is evaluated as true, the element with the condition value will show on the form. Depending on what level of Javascript ninja you are, these JS expressions can be as simple or as complex as needed.
If you're somewhat new to the Javascript game, have a look at w3schools. It's a great place to learn the ways of JS.
Below we will you through a very quick, basic example of adding a condition value to your element to show an element based on the answer in another element.
How do I add condition values to an element?
STEP 1. From inside your form, add a Pick List element with a data column name of should_i_should_the_next_element_.
STEP 2. Scroll down to the Option List section and select Option Lists.
STEP 3. Find (or create) an Option List with Yes and No as the choices and Assign the Option List.
STEP 4. Add a Text element to your form.
STEP 5. Scroll down to the Smart Control section and in the Condition Value field, put the following: should_i_should_the_next_element_==0
Setting the element equal to zero means that if element (should_i_should_the_next_element_) is equal to the first index (Sort Order) of the option list, then the element with the condition (Text Element) will show.
STEP 6. Save your form.
How do I add multiple conditions?
To assign multiple conditionals to one element, use the following:
&& = and
|| = or
For example: should_i_should_the_next_element_==0 && my_element==1
Explanation: Element should_i_should_the_next_element_ has to equal the first index/sort order of the option list (0) AND element my_element_1 has to equal 1 (second index/sort order of the option list) in order for the element with this condition to show, otherwise, it will be hidden.
ZCDisplayValue and ZCDisplayKey
You do not always have to use the Sort Order (==0, ==1, etc.) of an option list. You can also use the Label or Key Value to use in the Condition Value field. You can read more about how to use those here.
Examples
Showing an Element based on a Text Element
Let's use an example where the element you want to show/hide is based on a Text Element.
first_text_element
second_text_element (want shown based on first_text_element value)
Condition Value for second_text_element: first_text_element=="John Doe"
The user would need to type in the exact words John Doe in the Text Element (first_text_element) in order for the element (second_text_element) to show.
*When using a condition based on a Text Element, you need to use double quotes around the value
Showing an Element based on a Multi-Select Element
A Multi-Select Element is different from the other option list elements because multiple values can be selected. You can read through this article here to get a better explanation of how to use a condition value based on a Multi-Select Element.
Hiding an Element at all times
You can also hide an element from end users at all times, but it will show in data views and reports. This is great for populating values in a field where you do not want users to see but want in your reports. In the condition value of the element, you would put the word false. You can also follow step-by-step instructions here.
Comments
2 comments
Is it possible to refer to option list option by name instead of index? I have an option list that frequently has new options added to it and would like my other option, the last option, to open a text area when selected.
Hey Joe, check out the following two functions that you can use to either reference the label value of the option, or the key value.
https://iformbuilder.zendesk.com/hc/en-us/articles/115001571963-How-do-I-use-ZCDisplayValue-and-ZCDisplayKey-
Hope that helps,
Tony
Please sign in to leave a comment.