building “smart” forms€¦ · 28/10/2014 · best practices for form building • use a...
TRANSCRIPT
![Page 1: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/1.jpg)
Building “Smart” Forms
Host: Ryan Coleman [email protected]
Presenter: Berit Johannessen [email protected]
![Page 2: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/2.jpg)
UPCOMING IFORMBUILDER EVENTS
• October 28, 2014 Power User Summit
• Pre-Event Live Training Sessions
![Page 3: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/3.jpg)
![Page 4: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/4.jpg)
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
![Page 5: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/5.jpg)
BEST PRACTICES FOR FORM BUILDINGSuccessfully building forms in Form Builder.
![Page 6: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/6.jpg)
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.
![Page 7: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/7.jpg)
BEST PRACTICES FOR FORM BUILDING
Build for device type.
Build for smallest device.
Differences Features between iOS & Android Devices
![Page 8: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/8.jpg)
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.
![Page 9: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/9.jpg)
OVERVIEW OF SMART CONTROLSWhat are Smart Controls? Why use them? What can
they be used for? What are some tips?
![Page 10: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/10.jpg)
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
![Page 11: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/11.jpg)
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. �
![Page 12: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/12.jpg)
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.
![Page 13: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/13.jpg)
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.
![Page 14: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/14.jpg)
DEMO OF FORM USING SMART CONTROLS
Demo of a form with Smart Controls
![Page 15: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/15.jpg)
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.
![Page 16: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/16.jpg)
ADDING SMART CONTROLS (JAVASCRIPT)Default elements, Calculations, Concatenation, User Input (Dynamic Label & ZCDisplayValue) & Client Validation
![Page 17: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/17.jpg)
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
![Page 18: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/18.jpg)
DEFAULT ELEMENTSDate: Dynamic Value: new Date() Date-Time: Dynamic Value: new Date() Email: Dynamic Value: {“[email protected]"} 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"}
![Page 19: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/19.jpg)
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.
!
![Page 20: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/20.jpg)
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.
![Page 21: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/21.jpg)
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“
![Page 22: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/22.jpg)
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.
![Page 23: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/23.jpg)
ADDING SMART CONTROLS TO OPTION LISTSDisplay Elements based off of user selection and
Segmented Option Lists
![Page 24: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/24.jpg)
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
![Page 25: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/25.jpg)
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.
![Page 26: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/26.jpg)
IFORMBUILDER BUILT-IN FUNCTIONSUsername, Subform record aggregation and Record
tracking.
![Page 27: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/27.jpg)
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.
![Page 28: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/28.jpg)
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')
![Page 29: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/29.jpg)
ADD MORE TO YOUR FORM
• Display Parent Form Element in Subform
!
• Smart Table Search !
• Integrate with Hardware !
• Assign POST
![Page 30: Building “Smart” Forms€¦ · 28/10/2014 · BEST PRACTICES FOR FORM BUILDING • Use a naming convention for all forms. (_parent and _child)! • Have device handy while building](https://reader036.vdocuments.us/reader036/viewer/2022070923/5fbb83565534c9544f696c34/html5/thumbnails/30.jpg)
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