Building “Smart” Forms - Zerion Software · TRAINING TOPICS Overview of Smart Controls! Adding...

Building “Smart” Forms

Host: Ryan Coleman rcoleman@zerionsoftware.com

Presenter: Berit Johannessen bjohannessen@zerionsoftware.com

UPCOMING IFORMBUILDER EVENTS

• October 28, 2014 Power User Summit

• Pre-Event Live Training Sessions

TRAINING TOPICS

Overview of Smart Controls

Adding Simple Functions to a Form

Displaying User’s Input/Selection

Adding Functionality to Option Lists

iFormBuilder Built-in Functions

BEST PRACTICES FOR FORM BUILDINGSuccessfully building forms in Form Builder.

BEST PRACTICES FOR FORM BUILDING

• Use a naming convention for all forms. (_parent and _child)

• Have device handy while building forms.

• Clean Local Database in iForm app if something doesn’t look right on form.

• Test on all device types before going live.

• Open multiple browser windows for convenience.

• Add *Required Fields once form is complete.

• Remember, only the parent form needs to be assigned.

• Follow iFormBuilder Golden Rules.

BEST PRACTICES FOR FORM BUILDING

Build for device type.

Build for smallest device.

Differences Features between iOS & Android Devices

1. Test before going live.  2. Unique Data Column Names that are database

friendly.* 3. DO NOT change Input Type, Data Size, or

Encryption for an element on a live form. IT WILL DELETE DATA.

4. If no longer using an element, do not delete make “Disabled”

* IF DCN is not friendly, form will not save. Refresh window, add element again, uncheck “based on Label” and change DCN.

OVERVIEW OF SMART CONTROLSWhat are Smart Controls? Why use them? What can

they be used for? What are some tips?

OVERVIEW OF SMART CONTROLS

What are Smart Controls? • Smart Controls add functionality to a form. • Use Basic JavaScript to add actions to different elements. !

Why use Smart Controls? • Cut down on human interaction with form. • Define what a user see’s based off of their selections. • Cut down on human error. !

Helpful JavaScript Tools: http://www.w3schools.com/js/ http://www.regular-expressions.info/javascriptexample.html

OVERVIEW OF SMART CONTROLS

Use$JavaScript$statements$(strict,$or$condi4onal)$to$set$the$value$of$the$element.�

When$the$statement$evaluates$as$true$the$element$will$display$on$the$device,$otherwise$it$will$remain$hidden. �

Use$JavaScript$statements$to$specify$the$label$of$an$element.�

Use$custom$valida4on$logic$to$restrict$a$record$from$uploading$unless$certain$values$are$entered. �

This$message$will$display$to$the$end$user$in$a$popAup$window$if$the$client$valida4on$fails. �

OVERVIEW OF SMART CONTROLS

What Smart Controls Can Do • Show or hide elements based on users input. • Default elements. • Mathematical calculations. • Add hard returns to text area to create a list based

off of users input. • Validate user input. • Concatenate multiple elements into 1 element. • Subform Aggregation.

OVERVIEW OF SMART CONTROLS

Tips • Must use the elements Data Column Name (DCN) in Smart

Controls. • Table name and Page Level JavaScript is located in “Edit Form

Properties” page. • Use Page Level JavaScript for more in-depth JavaScript functions. • Use the following to add multiple conditionals to elements: && = AND || =OR == is the way to check if something is equal to something else. False in the Condition Value hides the element from view on the device.

DEMO OF FORM USING SMART CONTROLS

Demo of a form with Smart Controls

DEMO FORMIncludes 1. Concatenate first name, last name and age into a “Read-Only”

element. 2. Add hard return to Text Area. 3. Client Validation for future date. 4. Display Text field based off of Pick-List selection. 5. Smart Option Lists: Change what is shown in a Pick-List based off of

previous selection. 6. Use ZCDisplayValue to show pick-list selection. 7. iFormBuilder Built-in Function Username. 8. Mathematical calculations in subform (Numbers defaulting to zero). 9. Subform Aggregation Addition & Average based on subform

element. 10. Dynamic Label.

ADDING SMART CONTROLS (JAVASCRIPT)Default elements, Calculations, Concatenation, User Input (Dynamic Label & ZCDisplayValue) & Client Validation

DEFAULT ELEMENTSSetting an element equal to 0.   (This Dynamic Value is used to give an element a default value so it can be referenced in the Dynamic Value of another element.) data_column_name=0 Or use: {0} Defaulting Widget to not show until text has been placed: text_element.length > 0

DEFAULT ELEMENTSDate: Dynamic Value: new Date() Date-Time: Dynamic Value: new Date() Email: Dynamic Value: {“iformkiosk@iformbuilder.com"} Number: Dynamic Value: {5} Phone Number: Dynamic Value: {“717-220-4205"} Pick List: Dynamic Value: {0} Range: Dynamic Value: {8} Read-Only: Dynamic Value: {"Good Morning iFormBuilder”} Select: Dynamic Value: {0} SSN: Dynamic Value: {“123-45-6789"} Text: Dynamic Value: {“Hello"} Text Area: Dynamic Value: {"Hello welcome to iFormBuilder”} Time: Dynamic Value: new Date() Zip: Dynamic Value: {"18732"}

MATH CALCULATIONS/ ELEMENT CONCATENATION

Concatenation & Math Functions are completed by “calling” to a previous element DCNs

Basic Math Functions Addition:  {num1 + num2 + num3} Subtraction:  {num1 - num2 - num3}   Multiplication:  {num1 * num2 * num3}   Division:  {num1 / num2 / num3} Combining Number & Numerical Value:  {num1 / 25 / num3}

Concatenation Text or Read-Only Elements Concatenated into a 3rd Read-Only Element element1_dcn +"  "+ element2_dcn}.  

Ex) {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.

!

DISPLAY USER INPUT

Dynamic Label Display’s users answer from a previous element in another element. !

Example: User’s previous answer displayed in follow-up question.

DISPLAY USER INPUTZCDisplayValue Purpose: To display the choices chosen from an option list. !Place in Dynamic Value of a Text or Read-Only element after option list: ZCDisplayValue_optionlist_element_dcn !!Examples: • Allow users to edit option(s) selected. • View text selection of option list instead of Key Value. • Adding a string of text to option list selection:

DisplayValue_your_element_name + " This is what I want to show“

USER INPUT VALIDATIONClient Validation User must meet requirements for validation. !

Examples: • User needs to enter a value between 75-100. • Select a specific option from an option list.

ADDING SMART CONTROLS TO OPTION LISTSDisplay Elements based off of user selection and

Segmented Option Lists

DISPLAY ELEMENT BASED ON USER SELECTION

Purpose: To show an additional element ONLY when a specific option is selected from an Option List. !

Place in Conditional Value of a Text or Read-Only element after option list: pick_list_element_dcn == # of option *Keep in mind that the first option is always equal to 0

DISPLAY OPTIONS BASED ON USER SELECTION

Purpose: To ONLY show specific options based off of user selection in previous Option List. !

Place previous option list DCN in Option List Manager “Advanced” Conditional Value of 2nd Option List. MATCH order of options.

IFORMBUILDER BUILT-IN FUNCTIONSUsername, Subform record aggregation and Record

tracking.

BUILT-IN FUNCTIONS (DYNAMIC VALUE)

iformbuilder.username- Displays the username of the person signed into the device.  !

iformbuilder.math.sum- Adds the values from the records taken in a Subform and displays the sum of those values in the Parent Form. !

iformbuilder.math.avg- Finds the average from the records taken in a Subform and displays the average on the Parent Form.  !

getNextSeqence()- Allows the user to keep track how many records they have provided.

SUBFORM AGGREGATION: SUM & AVERAGE

In the Subform element on the parent form, place the following syntax in the Dynamic Value under the "Smart Control" section:   !iformbuilder.math.sum(table_name.subform_element_dcn, ‘element_on_subform') Or iformbuilder.math.avg(table_name.subform_element_dcn, ‘element_on_subform') !Replace the above text with your DCN’s: • table_name: Parent Form Table name • subform_element_dcn: The Subform element's DCN on the Parent Form.  • element_on_subform: The element's DCN on the Subform.  !Example: iformbuilder.math.sum(bj_smart_controls_demo_march2014_parent.subform_to_aggregate_totals, 'addition1')

ADD MORE TO YOUR FORM

• Display Parent Form Element in Subform

!

• Smart Table Search !

• Integrate with Hardware !

• Assign POST

CLOSINGNext Session Wednesday, September 24 at 4PM EST Data: Understanding and Integrating iFormBuilder data with 3rd Party Integration tools !View Recordings Recorded Training SessionsSupport Options Implementation Support Training Courses KickStart Training Program !Contact Us! Ryan Coleman Berit Johannessen