---
description: デザイナーにてJSONデータセットを追加し、データを帳票にバインディングします。
---

# JSONデータサービスの使用

## JSONデータサービスの使用

### e-FormからJSON文字列を取得

1.  `membership-odiparam.ozr` を`membership-jsonset.ozr` にコピーし、`membership-jsonset.ozr`

    ファイルを開きます。
2. フォームをプレビューし、入力フィールドを入力します。
3. ビューアの右上にある**Etc** アイコン(<img src="https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-LybumkbjutpIZK3Nkwa%2F-Lyc-d7T4pJDxi1XKZFi%2Fiocn-others.png?alt=media&#x26;token=4b12d893-c038-42ee-8b9c-f2c2f5d0d077" alt="" data-size="line">)をクリックして”**入力データコピー (json)”**&#x3092;選択します。
4. メモ帳を開き、クリップボードの文字列を貼り付けて、テキストファイル（`jsonset.txt`）として保存します。

### JSONデータサービスの作成

![](https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-LyavxNBy4A2G_Wc_XNA%2F-Lyaw41CoA4P2hSpqT5T%2Flearn-eform-jsonset-1.gif?alt=media\&token=ad6e7eaf-a284-47a8-8773-91a5a0ae0614)

1. データ情報タブで**DataService**を右クリックし&#x3066;**”JSONデータセットの追加”**&#x3092;選択します。&#x20;
2. ”JSONデータセットの追加”ダイアログで**パス**をクリックし、デザインタイムのデータセットとランタイムデータセットに`jsonset.txt`ファイルを追加します。&#x20;
3. 必要ある場合、デフォルトのデータセット名の**JSON\_Set1**を変更します（例：**jsonset**に変更）。&#x20;
4. 画面の下段でJSONデータの文字セットが設定できます。&#x20;
5. データセット名を右クリックして**セットの構成**を選択します。
6. ルートノードの$記号を右クリックし、**基準JSONPATH指定**を選択します。
7. データセットに含めたいすべてのフィールド項目を選択し、**フィールドの追加**を選択します。
8. 画面の下部に追加されたフィールドが表示されます。**OK**をクリックします。
9. データ情報タブのDataService下の`jsonset`データセットにフィールドが追加されたことが確認できます。
10. `member`データセットの代わりにDataServiceの`jsonset` が使用できるようになりました。ODIの`membership`を削除し、`member`データセットフィールドのマッピングをすべて`jsonset`のDataServiceのマッピングに置き換えます。&#x20;
11. プレビューをします。`jsonset.txt`の値をフォームの入力コンポーネントに入力できます。

### JSONデータセットにデータを渡すためのパラメータの作成

1. アプリケーションからJSONデータを取得してフォームファイルに渡すには、先ず、OZFormParamの下に`jsondata`パラメータを追加する必要があります。&#x20;
2. その後、`jsondata`から`jsonset`にデータを渡す必要があります。&#x20;
3. `jsonset`を右クリックして**編集**を選択します。&#x20;
4. **ランタイムデータセットの適用方法**からパラメー&#x30BF;**(データ)**&#x3092;選択した後、**パラメータ...**&#x3092;クリックします。&#x20;
5. パラメータ設定ダイアログで**jsondata**パラメーターを選択します。&#x20;
6. **OK**を2回クリックします。
7. ファイルを保存します。

![](https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-LxxlBKx4JVvZGB6Uli0%2F-LxxlU_rw1niA6S7ZNqo%2Flearn-eform-app2ozr-json-6.png?alt=media\&token=8fd78e0b-a9c6-467b-a7ec-8e17415f0bb9)

## JSONデータをe-Formに送信

以下のようにアプリケーションからJSONデータをフォームファイルに渡すことができます。

{% hint style="warning" %}
JSON文字列についてはエスケープ処理が必要です。
{% endhint %}

```javascript
<script type="text/javascript" >
var serverUrl = "https://" + location.host;
var jsondata = "{\"memberNo\":\"1011\",\"photo\":\"\",\"firstName\":\"John\",\"lastName\":\"Kim\",\"yyyy\":\"1979\",\"mm\":\"09\",\"dd\":\"05\",\"gender\":\"M\",\"contactNo\":\"010-6369-7777\",\"email\":\"john.kim@forcs.com\",\"memberType\":\"Trial\",\"fromDate\":\"2019-12-24\",\"toDate\":\"2020-12-24\",\"cardType\":\"VISA\",\"cardHolder\":\"\",\"cardNo\":\"1111-2222-3333-4444\",\"cardExpMM\":\"11\",\"cardExpYY\":\"24\",\"agreeCheck\":\"N\",\"applicant\":\"John\",\"sign\":\"\",\"signDateTime\":\"signDateTime\"}";
function SetOZParamters_OZViewer(){
	var oz = document.getElementById("OZViewer");
	oz.sendToActionScript("information.debug", "true"); // viewer console
	oz.sendToActionScript("connection.servlet",serverUrl + "/oz/server");
	oz.sendToActionScript("connection.reportname","/eform/membership-jsonset.ozr");
	oz.sendToActionScript("connection.pcount", "1");
	oz.sendToActionScript("connection.args1", "jsondata=" + jsondata);
	oz.sendToActionScript("etcmenu.copyinputdata_json", "true"); // enable [Copy input data (json)] option in etc menu
	return true;
}
start_ozjs("OZViewer", serverUrl + "/oz/HTML5viewer/");
</script>
```

[Run example](https://demo.ozeform.io/oz/eform/membership-jsonset.html)

{% file src="https://1097513732-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwWWN-Gla4aA9ONdCK6%2F-M4I6yDcF0HZ55krZOBI%2F-M4I7PyQUQXQjJH0JER3%2Fmembership-jsonset.zip?alt=media&token=e8ec7834-7dc9-4731-9fd2-3db9d10768df" %}
membership-jsonset.zip
{% endfile %}
