e-Form例題

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

以下の画面のようにバンドとコンポーネントを追加してください。
以下のコンポーネントリストを参照して属性を設定してください。
赤い項目は必須入力項目です。
プレビューした後、membership.ozrとして保存してください。

コンポーネントリスト

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

FormID：属性タブ > 動的 > FormID
名前：属性タブ > デザイン > 名前

スクリプト作成

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

誕生日の年と日付の範囲を設定します。
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

前へ入力コンポーネント次へDBからのe-Form事前入力

最終更新 3 年前