# e-Form例題 ## レイアウト及びコンポーネント 1. 以下の画面のようにバンドとコンポーネントを追加してください。 2. 以下のコンポーネントリストを参照して属性を設定してください。 3. 赤い項目は必須入力項目です。 4. プレビューした後、`membership.ozr`として保存してください。 ![](https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-LxxiOymRQza76YZ-qsV%2F-LxxiY25YOeWre2l6Q7S%2Flearn-eform-design-membership.png?alt=media\&token=3aef3bc1-39ae-4e5f-b077-f8d615ee2992) ### :ballot\_box\_with\_check: コンポーネントリスト | タイトル | 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 | {% hint style="warning" %} すべての入力コンポーネントに対してユニークなFormIDまたは名前を付けてください。 FormIDまたは名前については、JavaScriptロジックで各コンポーネントを識別するために使用されます。そして、入力値のキーまたはフィールド名としても使用されます。 1. FormID：**属性タブ > 動的 > FormID** 2. 名前：**属性タブ > デザイン > 名前** {% endhint %} ## スクリプト作成 ### コンボボックスのアイテム * 誕生日の年と日付の範囲を設定します。 * FormIDの**yyyy**および**dd**の対して**OnBind**イベントに以下のスクリプトを書き込みます。 ```javascript // 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**イベントの両方に以下のスクリプトを書き込みます。 ```javascript 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**イベントに以下のスクリプトを書き込みます。 ```javascript 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**イベントに以下のスクリプトを作成してください。書き込みます。 ```javascript var first = This.GetInputValue("firstName"); This.SetInputValue("applicant", first); ``` * 署名を作成したら、**signDateTime**ラベルに署名済みの日時を表示します。 * **sign**の**OnValueChanged**イベントに以下のスクリプトを書き込みます。 ```javascript // OnValueChanged event of "sign" This.SetInputValue("signDateTime", (This.GetDataSetValue("OZSystem.Date/Time")).substr(0,25)); ``` ### 未入力チェック * 赤い色のアイテム項目の入力検証を実行します。 * **submit**ボタンの**OnCheckValidity**イベントに以下のスクリプトを書き込みます。 ```javascript 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**イベントに以下スクリプトを書き込みます。 ```javascript // highlight textbox on focus This.SetReportOption("eform.textbox_use_highlight", "true"); // use dialog type of signPad This.SetReportOption("eform.signpad_type", "dialog"); ``` 同じように、以下のスクリプトをHTMLに追加することで入力コンポーネント属性を制御できます。 ```javascript // highlight textbox on focus oz.sendToActionScript("eform.textbox_use_highlight", "true"); // use dialog type of signPad oz.sendToActionScript("eform.signpad_type", "dialog"); ``` ​[Run example](http://oz.ozeform.io/oz/eform/membership.html)​