帳票の開発例

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

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

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

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

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

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

タイトル	FormID/名前	コンポーネント	備考
Page Header band		イメージラベル／テキストボックス
Title band		テキストボックス／ボタン	タイトル
写真	photo	カメラ
会員番号	memberNo	テキストボックス
姓	lastName	テキストボックス
名	firstName	テキストボックス
生年月日	yyyy/mm/dd	コンボボックス	OnBindスクリプト
RadioButtonGroup	gender	ラジオボタングループ
男性	male	ラジオボタン	グループ名group name = gender, CheckedValue=M
女性	female	ラジオボタン	グループ名 = gender, CheckedValue=F
StringTextFilter	phone-number	文字テキストフィルタ	###-####-####
予約番号	contactNo	テキストボックス	テキストフィルタ名 = phone-number
Eメール	email	テキストボックス
タイプ	memberType	コンボボックス	Items=Trial/Regular/Premium
開始	fromDate	DateTimePicker
終了	toDate	DateTimePicker	OnBindスクリプト：from + 1 year
StringTextFilter	card-number	文字テキストフィルタ	####-####-####-####
カードタイプ	cardType	コンボボックス
カード会社	cardHolder	テキストボックス
カード番号	cardNo	テキストボックス	文字テキストフィルタ=card-number
期限	cardExpMM/YY	コンボボックス
同意		ラベル	描画タイプ=HTML
同意内容	agreement	ラベル	HTML type
同意承認	agreeCheck	チェックボックス
署名	sign	署名
参加者		テキストボックス	転送可能=False
署名日付	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タイプラベルを使用したテキストのフォーマット設定

• 同意セクションで、同意ラベルにマウスポインターを置き、属性タブ> 外観に移動して、描画タイプを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));

ビューアオプション

入力コンポーネント属性を制御する場合、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");

​帳票を確認する​

33KB

membership.ozr

開く