# e-Form例題

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

1. 以下の画面のようにバンドとコンポーネントを追加してください。
2. 以下のコンポーネントリストを参照して属性を設定してください。&#x20;
3. 赤い項目は必須入力項目です。&#x20;
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年後の日付に設定します。&#x20;
* **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か月後に設定してから、入力を無効にします。&#x20;
* **memberType**から**Trial**ではないタイプを選択する場合、**fromDate**を**today**に設定し、**toDate**を1年後に設定してから、入力を有効にします。&#x20;
* **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**に表示されます。&#x20;
* **firstName**の**OnValueChanged**イベントに以下のスクリプトを作成してください。書き込みます。

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

* 署名を作成したら、**signDateTime**ラベルに署名済みの日時を表示します。&#x20;
* **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;
```

## ビューアオプション <a href="#viewer-options" id="viewer-options"></a>

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