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

// 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.

// 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).

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

3. Put items to birth_mm

  • Remove items from the Items property.

// 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".

// 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

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

  • Set the smoker to "No".

7. Show/Hide band_bmi by the smoker parameter value

// 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

// 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

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

9. Calculate BMI (Body Mass Index)

// 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

// 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

// 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);

  • 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"

// 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");
}

13. Tick group1_y & group2_y by ticking 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.

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

15. SignPadGroup

  • SignPad has no Group Name in the Properties window.

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

16. Button to remove the attached file

// OnStartUp of the ReportTemplate
This.SetReportOption("viewer.showthumbnail", "true");
// 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.

// 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

Previouse-Form Scripting GuideNextAdvanced Features

Last updated

Was this helpful?