iForm

JavaScript Overview

javascript.jpg

h-javascript.jpg

This article provides an overview of: Page Level JavaScript, Element JavaScript, Concatenation of Elements and Adding a hard Return.  Make sure to look at the Related Articles at the bottom of this page as we have defined a set of functions that can be used for anything from summing variables to displaying the username on a form.

You are not limited to using these functions, but these are the ones we have found to work very well and provide powerful solutions. If you come up with any clever javascript functions that have worked for you submit a ticket to our Help Desk and we will put it up on the site.

 

Here are some Helpful tools:


 h-PageLevel.jpg

When using JavaScript, there are two places that JavaScript can be entered: Page Level and Element. The Page Level JavaScript can be used to define thousands of functions that perform various tasks. Page Level JavaScript loads user-defined global variables and functions that can be called by a parent form and/or any of the related children. (Click here for more information on Page Level JavaScript)

*Note: Adding Page Level JavaScript to a Subform does not work.  All Page Level JavaScript needs to be located on the Parent form.

 

Steps to input Page Level JavaScript:

The Page Level JavaScript is located on the "Form Properties" page in FormBuilder.  To get to the "Form Properties" page, click "Edit" on the top of your Parent form. 

pageLevel 

In the Form Properties page, the Page Level JavaScript is located on the bottom. You may need to scroll down to have more space.

PageLevel1.jpg

 


 h-elementjava.jpg

When using JavaScript, there are two places that JavaScript can be entered: Page Level and Element. 

 

Steps to input Element JavaScript:

(a) Select the specific element to add JavaScript to by clicking on the element.

(b) Click on the "Smart Control" tab.(Click here for more information on Smart Control)

(c) Input your function in the given text area. (Dynamic Value, Condition Value, Dynamic Label and Client Validation.)

 

Element.jpg

   


h-concatenationJava.jpg

Lets say you have two different form elements that you want to combine into one element. Follow these steps to create an element that combines the data from the 2 elements into 1 element. This function can be used when you want to combine elements in your data view. 

 

Steps to Concatenation of Two Elements:

1. Create 2 elements where user will input data.  (For this example, I created text elements.  The first element's Data Column Name (DCN) is called:first_name and the second element's DCN is: last_name )

2. Create a third element to display the user input of the other 2 elements.

A) This element can have the input property of Text or Read-Only.  (I chose to have this as Read-Only so that users do not have the ability to input text in this field.)

B) In the Dynamic Value of this element, place the following: {element1_dcn +"  "+ element2_dcn}.  For this example the following code was used: {first_name + "  " + last_name}

**Ensure the “ “ is included between the two data column names so that there is a space in between the first and last name. If you want more space, place spaces between the quotation marks.

conpic1form.jpg 

If you would like to combine more elements follow the same steps as above except your statement will look like this:

{element1_dcn +"  "+ element2_dcn + “ “ + data_column_name…….}

I chose to use a comma in my coding.  This will split up the name and age in the final element.  

For this example the following code was used: {first_name + "  " + last_name+" ," + age}

conpic2form.jpg

 

This is how the completed form looks on the device.

concatpic2device.png


  h-addingHardReturn.jpg

NOTE: This JavaScript can only be used on a TEXT-AREA element.

There may be times when you would like to populate a Text-Area Element with multiple lines of text.  To separate the text on different lines, you have to add a hard return in your text. To do this simply place "\n" in your Text-Area element and wherever this string is placed it will add the hard return.

 

Steps to Adding a Hard Return:

  1. Create 2 elements where user will input data.  (For this example, I created text elements.  The first element's Data Column Name (DCN) is called:first_name and the second element's DCN is: last_name )
  2. Create a third element.  The property of this element has to be a TEXT-AREA (not Text) element and it will display the user input of the other 2 elements. (For this example, this element has the label "Full Name").
  3. Under "Smart Control"In the Dynamic Value of this element ("Full Name), place the following: element1_dcn +"/n "+ element2_dcn.  For this example the following code was used: first_name + "/n " + last_name

This places first_name on the first line then executes a hard return and then places last_name on the second line.

hardpause1.jpg

If you would like to have a Text-Area populated with multiple elements, you follow the same procedure as above and place "/n" between the different element DCN names.

For this example, the TEXT-AREA "Full Name"  has the following code int the Smart Control's Dynamic Value: first_name+ "\n" + middle_name+ "\n" + additional_middle_name+ "\n" + last_name

hardpause2.jpg

The "Full Name" element now displays all the user inputs on separate lines in the Text-area.

longHardReturn.png


Related_Articles_v1.png

 

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments

Please sign in to leave a comment.