# Prefilling e-Form

## Using Form Parameter

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

* Pass values to OZFormParam parameters in e-Form.
* Use viewer options **connection.pcount** and **connection.args**

#### customer-formparam.ozr

1. Open `customer.ozr` and save it as `customer-formparam.ozr`.
2. Add an OZFormParam ***name***.
3. Bind the parameter ***name*** with the TextBox ***name**.*

#### customer-formparam.html

1. Open `customer.html` and save it as `customer-formparam.html`.
2. Pass values for the parameter **name** and **smoker** as below:

{% code title="customer-formparam.html" %}

```javascript
<script type="text/javascript" >
var name = "John Kim";
var smoker = "Yes";
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer-formparam.ozr");
    // pass values for form parameters
    oz.sendToActionScript("connection.pcount", "2"); // the number of paramters
    oz.sendToActionScript("connection.args1", "name=" + name); // for the parameter "name"
    oz.sendToActionScript("connection.args2", "smoker=" + smoker); // for the parameter "smoker"
}
start_ozjs("OZViewer", "/html5viewer/");
</script>
```

{% endcode %}

## Using INPUTJSON viewer option

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

* Send a JSON data string to your e-Form with the viewer option **connection.inputjson**.
* All item values in JSON will be put into the corresponding components in the e-Form automatically.✨

#### Prepare data string in JSON to fill in customer.ozr

1. Open `customer.ozr`.
2. Set **AllowSending (**&#x6F;f input components that you don't want to use) to **False**.&#x20;
3. Preview
4. Enter field values as you prefer.
5. Right-click the Hamberger icon on the top-right of the Viewer.
6. Select **Copy input data (json)** from the menu list.
7. Save the copied JSON string as **`jsondata.txt`**

**customer-inputjson.html**

1. Open `customer.html` and save it as `customer-inputjson.html`.
2. Add a variable **data** and assign its value from the clipboard.
3. The JSON string must be wrapped with single quotes.
4. Assign the variable **data** to the **connection.inputjson** option.
5. Get the value of **smoker** field from the JSON string.

{% code title="customer-inputjson.html" %}

```javascript
<script type="text/javascript" >
var data = '{"name":"John Kim","n1":"A","n2":"1","n3":"2","n4":"3","n5":"4","n6":"5","n7":"6","n8":"7","n9":"Z","gender":"Male","birth_dd":"05","birth_mm":"09","birth_yyyy":"2000","phone":"+65 1234-5678","email":"john.kim@forcs.com","country":"Others","country_other":"Korea","address":"Seoul","smoker":"Yes","height":"170","weight":"65","index":"22.49"}';
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer.ozr");
    oz.sendToActionScript("connection.inputjson", data); // pass json data
    oz.sendToActionScript("connection.pcount", "1"); 
    oz.sendToActionScript("connection.args1", "smoker=" + JSON.parse(data).smoker);
    return true;
}
start_ozjs("OZViewer", "/html5viewer/");
```

{% endcode %}

#### customer.ozr

1. No need to add a parameter to get the JSON string from HTML.
2. Show if ***country\_other*** got a value.

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

```javascript
// OnEndBind
if (This.GetValue()) {
    This.SetVisible(true);
}
```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
Item names in JSON string must be the same as the Name or FormID of corresponding components in the e-Form.
{% endhint %}

## Using JSON Dataset

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

#### customer-jsondataset.ozr

1. Open `customer.ozr` and save it as `customer-jsondataset.ozr`.
2. Add a JSON Dataset **customer**. (refer to the video clip above)
3. Assign dataset fields to input components.
4. Add a form parameter **jsondata**.
5. Set the **Runtime Dataset** of the dataset **customer** to the <mark style="color:red;">**Parameter(data)**</mark>.

&#x20; [**How-to video**](https://www.youtube.com/watch?v=6YHjkkvwD1k)

**customer-jsondataset.html**

1. Open `customer.html` and save it as `customer-jsondataset.html`.
2. Send a JSON string to the parameter **jsondata**

{% code title="" %}

```javascript
<script type="text/javascript" >
var data = '{"name":"John Kim","n1":"A","n2":"1","n3":"2","n4":"3","n5":"4","n6":"5","n7":"6","n8":"7","n9":"Z","gender":"Male","birth_dd":"05","birth_mm":"09","birth_yyyy":"2000","phone":"+65 1234-5678","email":"john.kim@forcs.com","country":"Others","country_other":"Korea","address":"Seoul","smoker":"Yes","height":"170","weight":"65","index":"22.49"}';
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer-jsondataset.ozr");
    oz.sendToActionScript("connection.pcount", "1");
    oz.sendToActionScript("connection.args1", "jsondata=" + data);
    return true;
}
start_ozjs("OZViewer", "/ozviewer/");
</script>
```

{% endcode %}

#### customer-jsondataset.ozr

1. Tick **male** or **female** of the Gender using **customer.gender**.
2. Tick **Yes** or **No** of the Smoker using **customer.smoker**.
3. Show the **bmi\_band** using **customer.gender** instead of **OZFormParam.smoker**.

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

```javascript
// OnBind
if (This.GetDataSetValue("customer.gender") == "Male") {
    This.SetChecked(true);
}
```

{% endtab %}

{% tab title="female" %}

```typescript
// OnBind
if (This.GetDataSetValue("customer.gender") == "Female") {
    This.SetChecked(true);
}
```

{% endtab %}
{% endtabs %}

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

```javascript
// OnBind
if (This.GetDataSetValue("customer.smoker") == "Yes") {
    This.SetChecked(true);
}
```

{% endtab %}

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

```javascript
// OnBind
if (This.GetDataSetValue("customer.smoker") == "No") {
    This.SetChecked(true);
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="bmi\_band" %}

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

{% endtab %}
{% endtabs %}

### JSON Dataset from URL

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

1. Prepare the URL of the [jsondata.txt](http://oz.ozeform.io/oz/edu/eformdev/jsondata.txt).
2. customer-jsondataset-url.ozr
   * Set the **Runtime Dataset** of the dataset **customer** to the <mark style="color:red;">**Parameter(URL)**</mark>.

## **Using ODI Dataset**

Prefill data in OZR from the database using ODI.

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

* Create customer-odidataset.odi
* Import customer-odidataset.odi into customer-odidataset.ozr

```javascript
<script type="text/javascript" >
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer-odidataset.ozr");
    oz.sendToActionScript("odi.odinames","customer-odidataset");
    return true;
}
start_ozjs("OZViewer", "/ozviewer/");
```

* customer-odidataset.ozr
* customer-odidataset.odi

{% hint style="info" %}
For detailed information on ODI, refer to: [Query Design](/report-developer/query-design.md)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://edu.ozeform.io/e-form-developer/day-3/prefilling-eform.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.