Embed Size (px)
Citation preview
Building “Smart” Forms
Host: Ryan Coleman [email protected]
Presenter: Berit Johannessen [email protected]
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: {“[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"}
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
