Download Training Slide Deck

November 19, 2014
Building “Smart” Forms
Host: Ryan Coleman
[email protected]
Presenter: Berit Johannessen
[email protected]
UPCOMING IFORMBUILDER EVENTS
December 10, 2014
iFormBuilder for Engineering
December 17, 2014
Data: Understanding and Integrating iFormBuilder data
with 3rd Party Integration tools
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 BUILDING
Successfully 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.
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 CONTROLS
What 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 FORM
Includes
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 ELEMENTS
Setting 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 ELEMENTS
Date: 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"}
DEFAULT ELEMENTS
Default Masking Options
Elements with Masking
SSN: ###-##-####
Zip Code: #####-9999
Phone Number: (###) ###-####
Customizing a Mask
# - Only allow for Numerical Input.
A - Allows for entry of Character and Numerical Input.
? - Only allow for entry of Character Input.
9 - Optional Numerical Value.
a - Optional alpha character.
Example of Other Use Case
SSN for Birthdate (MM-DD-YYYY) ##-##-####
MATH CALCULATIONS/ ELEMENT
CONCATENATION
Concatenation & Math Functions are completed by “calling” to a previous
element DCNs
Basic Math Functions
Concatenation
Addition: {num1 + num2 + num3}
Text or Read-Only Elements
Concatenated into a 3rd Read-Only
Element
element1_dcn +" "+ element2_dcn}. Ex) {first_name + " " + last_name}
Subtraction: {num1 - num2 - num3}
Multiplication: {num1 * num2 * num3}
Division: {num1 / num2 / num3}
Combining Number & Numerical Value: {num1 / 25 / num3}
**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 INPUT
ZCDisplayValue
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 VALIDATION
Client 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 LISTS
Display 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 FUNCTIONS
Username, 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
•
Pass data from Parent Form Element to Subform
•
Smart Table Search
•
Integrate with Hardware
•
Esri Widget
•
Manatee Works
•
Assign POST
•
3rd Party Widget
•
URL Scheme
•
Select Keyboard Type
•
Form Menu Updates
CLOSING
Next Session
Wednesday, September 24 at 4PM EST
Data: Understanding and Integrating iFormBuilder data with 3rd
Party Integration tools
View Recordings
Recorded Training Sessions
Support Options
Implementation Support
Training Courses
KickStart Training Program
Contact Us!
Ryan Coleman
Berit Johannessen

Download Report