# 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**を挿入します。

![](https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-LzkVWSCHp96KQkp8ITf%2F-LzkVqnG-36_WYcINCfl%2Flearn-eform-design-membership-odi.png?alt=media\&token=c48c848a-7867-4fb5-9d2b-114a264c1bd2)

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

**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="<https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-M4HaGzZ90dyPa_6Z8fU%2F-M4HubiLkJOZmlGEUKql%2Fmembership-odiparam.zip?alt=media&token=e57b731a-7fae-407e-971a-95bc5600c372>" %}
membership-odiparam.zip
{% endfile %}