e-Form例題

レイアウト及びコンポーネント

1. 以下の画面のようにバンドとコンポーネントを追加してください。

2. 以下のコンポーネントリストを参照して属性を設定してください。

3. 赤い項目は必須入力項目です。

4. プレビューした後、membership.ozrとして保存してください。

☑️ コンポーネントリスト

タイトル	FormID/名前	コンポーネント	備考
Page Header band		イメージラベル／テキストボックス	ロゴ／会社名
Title band		テキストボックス／ボタン	タイトル／保存ボタン
Member No	memberNo	テキストボックス
First Name	firstName	テキストボックス
Last Name	lastName	テキストボックス
Birthday	yyyy/mm/dd	コンボボックス	OnBindスクリプト
RadioButtonGroup	gender	ラジオボタングループ
Male	male	ラジオボタン	グループ名group name = gender, CheckedValue=M
Female	female	ラジオボタン	グループ名 = gender, CheckedValue=F
StringTextFilter	phone-no	文字テキストフィルタ	###-####-####
Contact No	contactNo	テキストボックス	テキストフィルタ名 = phone-number
email	email	テキストボックス
Type	memberType	コンボボックス	Items=Trial/Regular/Premium
From	fromDate	DateTimePicker
To	toDate	DateTimePicker	OnBindスクリプト：from + 1 year
StringTextFilter	card-no	文字テキストフィルタ	####-####-####-####
Card Type	cardType	コンボボックス
Card Holder	cardHolder	テキストボックス
Card Number	cardNo	テキストボックス	文字テキストフィルタ=card-number
Expiration	cardExpMM/YY	コンボボックス
Terms		ラベル	描画タイプ=HTML
Agreement	agreement	ラベル	HTML type
Agreement	agreeCheck	チェックボックス
Signature	sign	署名
Applicant		テキストボックス	転送可能=False
Sign date	signDateTime	ラベル
Page Footer band		ラベル	webサイト・住所
Submit	submit	ボタン	OnCheckValidity

すべての入力コンポーネントに対してユニークなFormIDまたは名前を付けてください。 FormIDまたは名前については、JavaScriptロジックで各コンポーネントを識別するために使用されます。そして、入力値のキーまたはフィールド名としても使用されます。

1. FormID：属性タブ > 動的 > FormID

2. 名前：属性タブ > デザイン > 名前

スクリプト作成

コンボボックスのアイテム

• 誕生日の年と日付の範囲を設定します。

• FormIDのyyyyおよびddの対してOnBindイベントに以下のスクリプトを書き込みます。

// for yyyy
var items = new Array();
for (var i=1950; i<2020; items[i-1950]=i++) ;
This.SetItems(items.join("\n"));
This.SetSelectedIndex((2020-1950)/2);

// for dd
var items = new Array();
for (var i=1; i<32; items[i]=("0"+i++).slice(-2)) ;
This.SetItems(items.join("\n"));
This.SetSelectedIndex(0);

DateTimePickerの日付設定

• toDateの日付をfromDateから1年後の日付に設定します。

• fromDateのOnValueChangedイベントとOnAddToPageイベントの両方に以下のスクリプトを書き込みます。

var fr = This.GetInputValue("fromDate");
var to = new Date(fr);
to.setFullYear(to.getFullYear() + 1);
This.SetInputValue("toDate", to.toISOString().split('T')[0]);

DateTimePickerの無効化設定

• memberTypeからTrialを選択する場合、fromDateをtodayに設定し、toDateを1か月後に設定してから、入力を無効にします。

• memberTypeからTrialではないタイプを選択する場合、fromDateをtodayに設定し、toDateを1年後に設定してから、入力を有効にします。

• memberTypeのOnValueChangedイベントに以下のスクリプトを書き込みます。

var today = new Date();
This.SetInputValue("fromDate", today.toISOString().split('T')[0]);
if (This.GetValue()=="Trial") {
	today.setMonth(today.getMonth() + 1);
} else {
	today.setFullYear(today.getFullYear() + 1);
}
This.SetInputValue("toDate", today.toISOString().split('T')[0]);

var obj_fr = This.GetInputComponent("fromDate");
var obj_to = This.GetInputComponent("toDate");
if (This.GetValue()=="Trial") {
	obj_fr.SetEnable(false);
	obj_to.SetEnable(false);
} else {
	obj_fr.SetEnable(true);
	obj_to.SetEnable(true);
}

HTMLタイプラベルを使用したテキストのフォーマット設定

• Agreementセクションで、agreementラベルにマウスポインターを置き、属性タブ> 外観に移動して、描画タイプをHTMLに設定してください。

その他のコンポーネントの値の設定

• 名前（firstName）を入力すると、applicantに表示されます。

• firstNameのOnValueChangedイベントに以下のスクリプトを作成してください。書き込みます。

var first = This.GetInputValue("firstName");
This.SetInputValue("applicant", first);

• 署名を作成したら、signDateTimeラベルに署名済みの日時を表示します。

• signのOnValueChangedイベントに以下のスクリプトを書き込みます。

// OnValueChanged event of "sign"
This.SetInputValue("signDateTime", (This.GetDataSetValue("OZSystem.Date/Time")).substr(0,25));

未入力チェック

• 赤い色のアイテム項目の入力検証を実行します。

• submitボタンのOnCheckValidityイベントに以下のスクリプトを書き込みます。

if(This.GetInputValue("firstName").replace(/ /gi, "") == ""){
	_MessageBox("First name is required.", "Validity");
	return false;
}
if(This.GetInputValue("contactNo").replace(/ /gi, "").replace(/-/gi, "") == ""){
	_MessageBox("Contact number is required.","Validity");
	return false;
}
if(This.GetInputValue("agreeCheck") == "N"){
	_MessageBox("You must agree to the terms and Conditions.","Validity");
	return false;
}
if(This.GetInputValue("sign") == ""){
	_MessageBox("Signature is required.","Validity");
	return false;
}
_MessageBox("Request submitted.", "Validity");
return true;

ビューアオプション

入力コンポーネント属性を制御する場合、ReportTemplateのOnStartUpイベントに以下スクリプトを書き込みます。

// highlight textbox on focus
This.SetReportOption("eform.textbox_use_highlight", "true");
// use dialog type of signPad
This.SetReportOption("eform.signpad_type", "dialog");

同じように、以下のスクリプトをHTMLに追加することで入力コンポーネント属性を制御できます。

// highlight textbox on focus
oz.sendToActionScript("eform.textbox_use_highlight", "true"); 
// use dialog type of signPad
oz.sendToActionScript("eform.signpad_type", "dialog");

​Run example​