# e-Form例題 ## レイアウト及びコンポーネント 1. 以下の画面のようにバンドとコンポーネントを追加してください。 2. 以下のコンポーネントリストを参照して属性を設定してください。 3. 赤い項目は必須入力項目です。 4. プレビューした後、`membership.ozr`として保存してください。 ![](/files/-LxxiY25YOeWre2l6Q7S) ### :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)​ --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://jp.ozeform.io/eform-design-examples/e-formno.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.