# Hands-on Practice

## Target Form

[Example](http://oz.ozeform.io/oz/edu/eformdev/customer-day2.html)

### Requirements

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

## Implementation

### **1. Viewer options**

{% tabs %}
{% tab title="ReportTemplate" %}

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

{% endtab %}
{% endtabs %}

### **2. Auto tab**

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

{% tabs %}
{% tab title="ReportTemplate" %}

```javascript
// 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
    }
}
```

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="n1" %}

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

{% endtab %}
{% endtabs %}

### 3. Put items to *<mark style="color:red;">birth\_mm</mark>*

* Remove items from the **Items** property.

{% tabs %}
{% tab title="birth\_mm" %}

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

{% endtab %}
{% endtabs %}

### **4. Show/Hide&#x20;***<mark style="color:red;">**country\_other**</mark>* **for input**

* Set **Visible** of ***country\_other*** to "false".

{% tabs %}
{% tab title="country" %}

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

{% endtab %}
{% endtabs %}

### 5. Add a form parameter

* Add a parameter *<mark style="color:blue;">**smoker**</mark>* to the OZFormParam.
* Set its value to "Yes".

### 6. Tick *<mark style="color:red;">smoker\_y</mark>* & *<mark style="color:red;">smoker\_n</mark>* by *<mark style="color:blue;">**smoker**</mark>**&#x20;\*\*\*\*parameter value***

{% tabs %}
{% tab title="smoker\_y" %}

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

{% endtab %}

{% tab title="smoker\_n" %}

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

{% endtab %}
{% endtabs %}

* Set the *<mark style="color:blue;">**smoker**</mark>* to "No".

### 7. Show/Hide *<mark style="color:red;">band\_bmi</mark>* by the *<mark style="color:blue;">**smoker**</mark>* parameter value

{% tabs %}
{% tab title="band\_bmi" %}

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

{% endtab %}
{% endtabs %}

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

### 8. Set *<mark style="color:blue;">**smoker**</mark>* value from "Yes/No" of Smoker

{% tabs %}
{% tab title="ReportTemplate" %}

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

{% endtab %}
{% endtabs %}

* Tick Yes -> Set <mark style="color:blue;">smoker</mark> to <mark style="color:green;">Yes</mark>
* Tick No -> Set <mark style="color:blue;">smoker</mark> to <mark style="color:red;">No</mark>

{% tabs %}
{% tab title="smoker\_y" %}

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

{% endtab %}

{% tab title="smoker\_n" %}

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

{% endtab %}
{% endtabs %}

![](https://2677009089-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjDM4l4HfP5CuJGFF23%2Fsync%2F13e3ec4c1e83b86f9f42b80d42472b255f6aafa0.png?generation=1631254886383543\&alt=media)

### 9. Calculate BMI (Body Mass Index)

{% tabs %}
{% tab title="height / weight" %}

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

{% endtab %}
{% endtabs %}

### 10. Update Price when Plan changed

{% tabs %}
{% tab title="plan" %}

```javascript
// 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"
```

{% endtab %}
{% endtabs %}

### 11. Set *<mark style="color:red;">plan\_to</mark>* to one year later than *<mark style="color:red;">plan\_from</mark>*

{% tabs %}
{% tab title="plan\_from" %}

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

{% endtab %}

{% tab title="plan\_to" %}

```javascript
// OnEndBind (default)
var d = new Date(This.GetInputValue("plan_from"));
d.setFullYear(d.getFullYear() + 1);
var s = _FormatDate(d.valueOf(), "yyyy-MM-dd");
This.SetInputValue("plan_to", s);
```

{% endtab %}
{% endtabs %}

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

### 12. Tick *<mark style="color:red;">**agree\_all**</mark>* when both *<mark style="color:red;">**group1\_y**</mark>* **&&#x20;***<mark style="color:red;">**group2\_y**</mark>* ticked

* Set properties of ***agree\_all***:
  * **CheckedValue** = "y"
  * **UnCheckedvalue** = "n"

{% tabs %}
{% tab title="group1" %}

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

{% endtab %}

{% tab title="group2" %}

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

{% endtab %}
{% endtabs %}

### 13. Tick *<mark style="color:red;">group1\_y</mark>* & *<mark style="color:red;">group2\_y</mark>* by ticking *<mark style="color:red;">agree\_all</mark>*

{% tabs %}
{% tab title="agree\_all" %}

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

{% endtab %}
{% endtabs %}

### 14. Date signed

* Set the **FormID** of ***date\_time*** label to ***date\_time***.

{% tabs %}
{% tab title="signature" %}

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

{% endtab %}
{% endtabs %}

### 15. SignPadGroup

* SignPad has no **Group Name** in the Properties window.

{% tabs %}
{% tab title="full\_name" %}

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

{% endtab %}

{% tab title="signature" %}

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

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="ReportTemplate" %}

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

{% endtab %}
{% endtabs %}

### 16. Button to remove the attached file

{% tabs %}
{% tab title="ReportTemplate" %}

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

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="remove1" %}

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

{% endtab %}
{% endtabs %}

### 17. Input validation

* Add a button ***submit*** and put scripts.

{% tabs %}
{% tab title="submit" %}

```javascript
// 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;
```

{% endtab %}
{% endtabs %}

### 18. Styling of required fields

* Set **Required** of all required fields to "true":
* ***name***, ***gender***(RadioButtonGroup), ***agree\_all, full\_name, signature***

{% code title="ReportTemplate" %}

```javascript
// 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\"}]}");
```

{% endcode %}

👉 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](http://oz.ozeform.io/oz/edu/samples/customer-advanced.html)