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

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作成ページのODIパラメーターを使用したMembershipの作成セクションで作成しておいたmembership.odiを挿入します。

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

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

生年月日データの取得

Year

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

Month

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

Date

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

性別データの取得

Male

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

Female

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

Membershipデータの取得

Type

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

From

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

To

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

Paymentデータの取得

Card Type

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

Card Holder

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

Expiration MM

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

Expiration YY

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

ODIパラメーターの伝送

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

11KB

membership-odiparam.zip

archive

membership-odiparam.zip