# DBからのデータバインディング

## ODIファイルを利用したe-Formデータバインディング

1. HTMLスクリプトにて `memberNo`のODIパラメーターを`membership-odiparam.ozr`に送ります。
2. `membership-odiparam.ozr`  から `memberNo` を`membership.odi`に送ります。
3. `membership.odi`はOZサーバーを経由し、データベースのデータを要請します。
4. `membership.odi`は`membership-odiparam.ozr`取得出来たデータを送ります。
5. `membership-odiparam.ozr`  はデータを各コンポーネントにバインドします。

## membership-odiparam.ozrの準備

`membership.ozr` を`membership-odiparam.ozr` にコピーし、`membership-odiparam.ozr`ファイルを開きます。

### ODIの挿入

[ODI作成](https://app.gitbook.com/@forcs/s/oz-developers-jp/query-design/creating-dataset)ページの**ODIパラメーターを使用したMembershipの作成**セクションで作成しておいた**membership.odi**を挿入します。

![](/files/-LzkVqnG-36_WYcINCfl)

### テキストボックスデータの取得

**member**データセットフィールドのmemberNo、firstName、lastName、contactNo、email、CardNo、photo、sign、signDateTimeを割り当てます。

### 生年月日データの取得

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

```javascript
// ObBind of yyyy
var items = new Array();
var i = 0;
for ( i=1950; i<2020; items[i-1950]=i++) ;
This.SetItems(items.join("\n"));

var val = This.GetDataSetValue("member.birthday");
if (val) {
	var yyyy = val.substr(0,4);
	for ( i=0; items[i] != yyyy; i++) ;
	This.SetSelectedIndex(i);
} else {
	This.SetSelectedIndex((2020-1950)/2);
}
```

{% endtab %}

{% tab title="Month" %}

```javascript
// OnBind of mm
var items = new Array();
var i = 0;
for ( i=0; i<12; items[i]=("0"+i++).slice(-2)) ;
This.SetItems(items.join("\n"));

var val = This.GetDataSetValue("member.birthday");
if (val) {
	var mm = val.substr(4,2);
	for ( i=0; items[i] != mm; i++) ;
	This.SetSelectedIndex(i);
} else {
	This.SetSelectedIndex(0);
}
```

{% endtab %}

{% tab title="Date" %}

```javascript
// OnBind of dd
var items = new Array();
var i = 0;
for ( i=0; i<31; items[i]=("0"+i++).slice(-2)) ;
This.SetItems(items.join("\n"));

var val = This.GetDataSetValue("member.birthday");
if (val) {
	var dd = val.substr(6,2);
	for ( i=0; items[i] != dd; i++) ;
	This.SetSelectedIndex(i);
} else {
	This.SetSelectedIndex(0);
}
```

{% endtab %}
{% endtabs %}

### 性別データの取得

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

```javascript
// OnBind of male
if (This.GetDataSetValue("member.gender") == "M") {
	This.SetChecked(true);
}
```

{% endtab %}

{% tab title="Female" %}

```javascript
// OnBind of female
if (This.GetDataSetValue("member.gender") == "F") {
	This.SetChecked(true);
}
```

{% endtab %}
{% endtabs %}

### Membershipデータの取得

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

```javascript
// OnBind of memberType
var items = [ "Trial", "Regular", "Premium" ];
This.SetItems(items.join("\n"));

var val = This.GetDataSetValue("member.memberType");
if (val) {
	for ( i=0; items[i][0] != val; i++) ;
	This.SetSelectedIndex(i);
} else {
	This.SetSelectedIndex(0);
}
```

{% endtab %}

{% tab title="From" %}

```javascript
// OnBind of fromDate
var val = This.GetDataSetValue("member.fromDate");
var fr = val.substr(0,4) + '-' + val.substr(4,2) + '-' + val.substr(0,4);
This.SetValue(fr);
```

{% endtab %}

{% tab title="To" %}

```javascript
// OnBind of toDate
var val = This.GetDataSetValue("member.toDate");
var fr = val.substr(0,4) + '-' + val.substr(4,2) + '-' + val.substr(0,4);
This.SetValue(fr);
```

{% endtab %}
{% endtabs %}

### Paymentデータの取得

{% tabs %}
{% tab title="Card Type" %}

```javascript
// OnBind of cardType
var items = [ "VISA", "MASTER", "JCB", "HSBC", "UOB" ];
This.SetItems(items.join("\n"));

var val = This.GetDataSetValue("member.cardType");
if (val) {
	for ( i=0; items[i] != val; i++) ;
	This.SetSelectedIndex(i);
} else {
	This.SetSelectedIndex(0);
}
```

{% endtab %}

{% tab title="Card Holder" %}

```javascript
// OnBind of cardHolder
var val = This.GetDataSetValue("member.cardHolder");
if(!val) {
	val = This.GetDataSetValue("member.firstName") + " " + This.GetDataSetValue("member.lastName") ;
	This.SetValue(val);
}
```

{% endtab %}

{% tab title="Expiration MM" %}

```javascript
// OnBind of cardExpMM
var items = new Array();
var i = 0;
for ( i=0; i<12; items[i]=("0"+i++).slice(-2)) ;
This.SetItems(items.join("\n"));

var val = This.GetDataSetValue("member.cardExp");
if (val) {
	var mm = val.substr(0,2);
	for ( i=0; items[i] != mm; i++) ;
	This.SetSelectedIndex(i);
} else {
	This.SetSelectedIndex(0);
}
```

{% endtab %}

{% tab title="Expiration YY" %}

```javascript
// OnBind of cardExpYY
var items = new Array();
var i = 0;
for ( i=20; i<30; items[i-20]=("0"+i++).slice(-2)) ;
This.SetItems(items.join("\n"));

var val = This.GetDataSetValue("member.cardExp");
if (val) {
	var yy = val.substr(2,2);
	for ( i=0; items[i] != yy; i++) ;
	This.SetSelectedIndex(i);
} else {
	This.SetSelectedIndex(0);
}
```

{% endtab %}
{% endtabs %}

## ODIパラメーターの伝送

```javascript
membership-odi.html

<script type="text/javascript" >
var serverUrl = "https://" + location.host;
function SetOZParamters_OZViewer(){
	var oz = document.getElementById("OZViewer");
	oz.sendToActionScript("information.debug", "true"); // viewer console
	oz.sendToActionScript("connection.servlet",serverUrl + "/oz/server");
	oz.sendToActionScript("connection.reportname","/eform/membership-odiparam.ozr");
	oz.sendToActionScript("odi.odinames", "membership");
	oz.sendToActionScript("odi.membership.pcount", "1"); // number of odi parameters
	oz.sendToActionScript("odi.membership.args1", "memberNo=" + 1002); // odi parameter
	return true;
}
start_ozjs("OZViewer", serverUrl + "/oz/HTML5viewer/");
</script>
```

[Run example](https://demo.ozeform.io/oz/eform/membership-odiparam.html)

{% file src="/files/-M4HubiLkJOZmlGEUKql" %}
membership-odiparam.zip
{% endfile %}


---

# 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://jp.ozeform.io/bjonbakkuappu/oz-viewer-study/untitled.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.