Hands-on Practice

Practice scripting for dynamic e-Form by yourself according to the guide.

Target Form

Example

Requirements

Item	Description
NRIC	Auto tab (auto-focus to the next)
Birthdate	Month: put items with scripts
Country	Select "Singapore" or "Singapore PR" -> hide country_other Select "Others" -> show country_other
Smoker	Check "Yes" -> show the BMI band Check "No" -> hide the BMI band Set the OZFormParam smoker="Yes" -> show the BMI band Set the OZFormParam smoker="No" -> hide the BMI band
BMI band	Calculate Index with Height and Weight
Plan	Show the Price 0 for Trial,100 for Standard, and 200 for Premium
From	When changing the From date, increase the To date by one year
To	Set the default date to one year after the current date
Radio button groups	When group1_y and group2_y radio buttons ticked, tick the agree_all checkbox automatically
"agree_all" checkbox	When ticked the agree_all checkbox, tick group1_y and group2_y radio buttons automatically
Full name & Signature	Open both SignPads in a single pad (give them the same group name)
Signature	When created the signature, show the signed date-time under Signature
Remove File button	Remove the file added by AttachmentButton
Blinking required fields	Set Required to true. Apply viewer options for blinking
Input validation	Add a button to check if there are any missing fields

Implementation

1. Viewer options

ReportTemplate

// OnStartUp event of the ReportTemplate
This.SetReportOption("viewer.viewmode", "fittoframe"); // fit form into frame
This.SetReportOption("viewer.pagedisplay", "continuous"); // allow scroll down
This.SetReportOption("viewer.showthumbnail", "true"); // show thumbnail pages on the left pane
This.SetReportOption("information.debug", "true"); // show viewer console information on the web

2. Auto tab

• Create a global function autoTab in the Functions event of the ReportTemplate.

ReportTemplate

// Functions event
function autoTab(obj, p){  // move focus to the next
    if(obj.GetText().length == 1){ // got an input char
            obj.GetInputComponent(p).SetFocus(); // move focus to p
    }
}

• Call the function in the OnValueChanged of each single-digit textbox (n1 to n8).

n1

// OnValueChanged of the textbox "n1"
autoTab(This, "n2"); // move to "n2"

3. Put items to birth_mm

• Remove items from the Items property.

birth_mm

// OnStartBind of the ComboBox
var items = "";
for (var i=1; i<13; i++) {
    items += i+"\n";
}
This.SetItems(items);
This.SetSelectedIndex(5);

4. Show/Hide country_other for input

• Set Visible of country_other to "false".

country

// OnValueChanged of the ComboBox
var obj = This.GetInputComponent("country_other"); // the textbox name
if (This.GetInputValue("country") == "Others") { // if selected "Others"
    obj.SetVisible(true);
    obj.SetFocus();
} else {
    obj.SetVisible(false);
}

5. Add a form parameter

• Add a parameter smoker to the OZFormParam.

• Set its value to "Yes".

6. Tick smoker_y & smoker_n by smoker parameter value

smoker_y

// OnEndBind
var smoker = This.GetDataSetValue("OZFormParam.smoker");
if(smoker == "Yes") {
    This.SetChecked(true);
}

smoker_n

• Set the smoker to "No".

7. Show/Hide band_bmi by the smoker parameter value

band_bmi

// OnBind of the BMI band
if(This.GetDataSetValue("OZFormParam.smoker") == "Yes" ){
    This.SetEnable(true);
}else{
    This.SetEnable(false);
}

• Set the smoker to "Yes" and try to preview.

8. Set smoker value from "Yes/No" of Smoker

ReportTemplate

// Functions event
function reFresh(param, value) {
    var p = "connection.pcount=1;connection.args1=" + param + "=" + value;
    ReportTemplate.ReBind("Report", p, ";");
}

• Tick Yes -> Set smoker to Yes

• Tick No -> Set smoker to No

smoker_y

// OnValueChanged of "Yes"
if(This.IsChecked() == true){
  // set the value of "smoker" parameter to "Yes" and refresh
    reFresh("smoker", "Yes");  
}

smoker_n

9. Calculate BMI (Body Mass Index)

height / weight

// OnvalueChanged of textbox height and weight 
var h = GetInputValue("height");
var w = GetInputValue("weight");
var v = 10000*w/(h*h);
v = v.toFixed(2);
if (v == "Infinity" || v == "NaN") v = "";
SetInputValue("index",v);
if(v < 18.5 || v > 25){
    GetInputComponent("index").SetTextColor("red");
}else{
    GetInputComponent("index").SetTextColor("blue");
}

10. Update Price when Plan changed

plan

// OnvalueChanged of the combobox
var price = 0;
var plan = This.GetInputValue("plan");
if ( plan == "Standard" ) { price = 100; }
else if ( plan == "Premium" ) { price = 200; }

This.SetInputValue("price", price); // put value to the textbox "price"

11. Set plan_to to one year later than plan_from

plan_from

// OnvalueChanged
var d= new Date(This.GetText());
d.setFullYear(d.getFullYear() + 1);
var s = _FormatDate(d.valueOf(), "yyyy-MM-dd");
This.SetInputValue("plan_to", s);

plan_to

• Point "_FormatDate" in the Script Editor and hit <F1> key.

12. Tick agree_all when both group1_y & group2_y ticked

• Set properties of agree_all:

  • CheckedValue = "y"

  • UnCheckedvalue = "n"

group1

// OnValueChanged of the buttongroup "group1"
if(This.GetInputValue("group1") != "Agree"){
    This.SetInputValue("agree_all", "n");
} 
if( GetInputValue("group1") == "Agree" && 
    GetInputValue("group2") == "Agree" ) {
    This.SetInputValue("agree_all", "y");
}

group2

13. Tick group1_y & group2_y by ticking agree_all

agree_all

// OnValueChanged of the CheckBox
if(This.IsChecked() == true){
    SetInputValue("group1", "Agree");
    SetInputValue("group2", "Agree");
} else {
    SetInputValue("group1", "Disagree");
    SetInputValue("group2", "Disagree");
}

14. Date signed

• Set the FormID of date_time label to date_time.

signature

// OnValueChanged
This.SetInputValue("date_time", This.GetDataSetValue("OZSystem.Date/Time"));

15. SignPadGroup

• SignPad has no Group Name in the Properties window.

full_name

// OnBind
This.SetGroupName("sign_group");

signature

ReportTemplate

// OnStartUp event of the ReportTemplate
This.SetReportOption("eform.signpad_type", "dialog"); // "direct" by default

16. Button to remove the attached file

ReportTemplate

// OnStartUp of the ReportTemplate
This.SetReportOption("viewer.showthumbnail", "true");

remove1

// OnClick of the button
var obj = This.GetInputComponent("attach1"); // AttachementButton name
if (obj.IsAttached() == true) {
    obj.SetValue("");
}

17. Input validation

• Add a button submit and put scripts.

submit

// OnCheckValidity
if(This.GetInputValue("name") == ""){
    _MessageBox("Enter your name", "Submit", function(){
        GetInputComponent("name").EnsureVisible();
        GetInputComponent("name").SetFocus();
    });
    return false;
}
if (This.GetInputValue("gender") == "") {
    _MessageBox("Check your gender", "Submit", function(){
        GetInputComponent("gender").EnsureVisible();
        GetInputComponent("gender").SetFocus();
    });
    return false;
}
if (This.GetInputValue("agree_all") == "n") {
    _MessageBox("Agree to personal information ploicy.", "Submit", function(){
        GetInputComponent("agree_all").EnsureVisible();
        GetInputComponent("agree_all").SetFocus();
    });
    return false;
}
if (This.GetInputValue("signature") == "") {
    _MessageBox("Enter your signature", "Submit", function(){
        GetInputComponent("signature").EnsureVisible();
        GetInputComponent("signature").SetFocus();
    });
    return false;
}
_MessageBox("Validation Success", "Submit");
return true;

18. Styling of required fields

• Set Required of all required fields to "true":

• name, gender(RadioButtonGroup), agree_all, full_name, signature

ReportTemplate

// OnStartUp
This.SetReportOption("eform.highlight_duration","2000"); // blinking for 2 sec
// color and thickness of boxes
This.SetReportOption("viewer.stylejson", 
"{\"Name\":\"InputValue\",\"Conditional\":[{\"Condition\":\"Required\",\"HighlightStrokeColor\":\"red\",\"HighlightStrokeThickness\":\"1.5\"}]}");

👉 Save your form as company_id/user_id/customer.ozr.

Challenge

Try to challenge yourself with an advanced example.

• Switch between two bands at the same position.

Example