iFormBuilder JavaScript Tips & Tricks

TABLE OF CONTENTS

• What is the .indexOf() method?
• How do I use condition values in my multi-select element?

Also, check out:

• How do I pass the label of an option into another field? (ZCDisplayValue)
• What are condition values?
• How do I conditionally show or hide an element?
• ZCDisplayKey and ZCDisplayValue

What is the .indexOf() method?

The indexOf() method returns the position of the first occurrence of a specified value in a string. A JavaScript string is any number of characters/numbers/symbols written inside of quotes.

PLEASE NOTE:  If the search value is not found then the method returns -1.

How do I conditionally populate a multi-select element?

Example

Search a string for "welcome":

var str = "Hello world, welcome to the universe.";
var n = str.indexOf("welcome");

The result of n will be 13.

PLEASE NOTE: The starting position of a string is always zero, which in the example above equals H (for "Hello…"). All letters, numbers and special characters count as a position in the string, including spaces.

Position = Character in the string

0 = H

1 = e

2 = l

3 = l

4 = o

5 = space

Etc.

"welcome" equals 13 because the starting position, "w", is position 13 in the string "Hello world, welcome to the universe." Again, zero is the first position in a string.

This is similar to the Option List that you may create, with Sort Order column being the position number, Label and Key Value being the character in the string.

Most of the time you will use .indexOf() for a multi-select element.  

How do I use condition values in my multi-select element?

For this example, you have a multi-select element and one of the choices is "Other". When "Other" is chosen, you want a text element to show so that the end-user can type in what other is. 

STEP 1. Add a Multi-Select element to your form. Here, the data column name we chose is multi_select_options

STEP 2. Add your Option List to your Multi-Select element.

STEP 3. Create a new option list. Then add the Label names and Key Values as shown below. Make sure to have an "other" option.

STEP 4. Add a Text element below.

PLEASE NOTE: This is where the element will show up when the user chooses "Other".

STEP 5. With the Text element selected, scroll down to the Smart Control section, and type in the following in the Conditional Value box: ZCDisplayKey_multi_select_options.indexOf("other") >=0

STEP 6. Save your form and sync your device to test it out!

Explanation:

Using ZCDisplayKey, your function will be looking for the location of the string you want from the Key Value column. 

ZCDisplayKey_datacolumnname will find the string from the data column you want to use. This example, it would be ZCDisplayKey_multi_select_options

ZCDisplayKey_datacolumnname.indexOf("other") will find the string "other" within data column multi_select_options under Key Value Column (spelling and capitalization matters!)

ZCDisplayKey_datacolumnname.indexOf("other") >= 0 will search for "other" in the data column multi_select_options and will return true if the character string of "other" is greater than or equal to zero. Remember earlier, each string starts with zero. As long as the character in the string for "other" is greater than or equal to zero, the function will prove to be true and the element will show.

The string that the function is looking through is "option_1,option_2,option_3,other". The function is looking for "other", therefore, the starting character position of "other" is 28. Since 28 is greater than or equal to zero, the function remains true. When the function proves to be true, the Text widget will show.

You want to put this function in the Conditional Value of the element you want to either show or hide. Learn more about Conditional Value here