> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# スマートフォーム

> DingTalk のスマートフォームでテンプレート照会機能を構築する方法を解説します。YiDA での照会フォーム作成、コネクタ設定、返却データの処理手順まで、実装に必要な流れを網羅的に紹介します。

<Warning>
  お知らせ:

  * 取得できるのはユーザー本人が作成したテンプレートのみです。
  * 照会対象の社員はスマートフォームに存在している必要があります。
</Warning>

## 1. ユースケース

スマートフォームは DingTalk が提供する基本アプリで、アンケートや登録追跡などのシーンに適しており、データ集計とダウンロードに対応しています。本例では、YiDA でフォームを送信した際にコネクタをトリガーし、特定の社員が作成したスマートフォームのテンプレート情報を照会する方法を示します。

## 2. 手順

### 2.1 フローノード 1:「スマートフォームテンプレート照会」フォームの作成

照会用のコネクタをトリガーするために使用します。

**手順:**

1. 「スマートフォームテンプレート照会」という名前のフォームを作成します。
2. メンバーコンポーネントを追加し、「テンプレート作成者」と名付け、必須項目に設定します。(図 2.1-1 を参照。)

図 2.1-1 メンバーコンポーネントの追加と設定

3. ドロップダウン選択コンポーネントを追加します。カスタムオプションを 2 つ追加し、表示値「一般フォーム」にはオプション値「0」を、表示値「教育フォーム」にはオプション値「1」を設定します。必須項目に設定します。(図 2.1-2 を参照。)

図 2.1-2 ドロップダウン選択コンポーネントの追加と設定

4. 右上の「保存」をクリックします。

### 2.2 フローノード 2:「照会結果記録テーブル」フォームの作成

コネクタから返却された結果を受け取り、処理後に表示するために使用します。

**手順:**

1. 「照会結果記録テーブル」という名前のフォームを作成します。
2. 複数行テキストコンポーネントを追加し、「返却結果」と名付け、ステータスを「非表示」に設定します。(図 2.2-1 を参照。)

図 2.2-1 複数行テキストコンポーネントの追加と設定

3. サブフォームを追加し、「照会結果記録」と名付け、サブフォーム内に一行テキストコンポーネントを 10 個追加します。それぞれ「フォームコード」「フォーム名」「フォームお知らせ」「フォームタイプ」「フォーム周期」「フォーム期限」「作成時間」「フォームカテゴリ」「フォーム終了状態」「フォーム作成者」と名付けます。各テキストコンポーネントのステータスを「閲覧のみ」に設定します。(図 2.2-2 を参照。)

図 2.2-2 サブフォームコンポーネントの追加と設定

4. 右上の「保存」をクリックします。

### 2.3 フローノード 3: コネクタの作成と設定

<Note>
  コネクタ機能の概要については、[統合と自動化 - コネクタ](/ja/yida/integration/gqmveiswrxkgxu9s) を参照してください。
</Note>

**手順:**

1. 管理コンソールで「スマートフォームテンプレート照会」フォームを選択し、「統合と自動化」をクリックして、「統合と自動化を作成」をクリックします。(図 2.3-1 を参照。)

図 2.3-1 コネクタ設定のエントリ

2. コネクタの名前を「社員が作成したスマートフォームテンプレートを取得」とし、「フォームイベントトリガー」を選択して、「確認」をクリックします。

(図 2.3-2 を参照。)

図 2.3-2 コネクタの作成

3. フォームイベントトリガーを設定します。トリガーイベントを「作成成功」に、データフィルタを「すべてのデータ」に設定し、「保存」をクリックします。

(図 2.3-3 を参照。)

図 2.3-3 フォームトリガーイベントの設定

4. コネクタアプリを選択します。「スマートフォーム」アプリを選択し、「次へ」をクリックします。(図 2.3-4 を参照。)

図 2.3-4 コネクタアプリの選択

5. コネクタのアクションを選択します。「ユーザーのフォームテンプレートを取得」を選択し、「次へ」をクリックします。(図 2.3-5 を参照。)

図 2.3-5 コネクタアクションの選択

6. コネクタのアクションを設定し、「保存」をクリックします。(図 2.3-6 を参照。)

図 2.3-6 コネクタアクションの設定

7. コネクタノードの下に「データ作成」ノードを追加します。(図 2.3-7 を参照。)

図 2.3-7 データ作成ノードの追加

8. データ作成ノードを設定し、「保存」をクリックします。(図 2.3-8 を参照。)

図 2.3-8 データ作成ノードの設定

9. 右上の「保存」をクリックし、続けて「公開」をクリックします。

### 2.4 フローノード 4:「照会結果記録テーブル」の設定

これまでの手順でコネクタの呼び出しを設定し、コネクタから返却されたデータを受け取れるようにしました。次に、返却されたデータを処理し、「照会結果記録」サブフォーム内の各コンポーネントに処理後の値を表示します。

**手順:**

フォーム編集ページで、以下のコードをページ左側の JS アクションパネル内の `didMount` 関数にコピーします。

(図 2.4-1 を参照。)

図 2.4-1 JS アクションパネルのエントリと didMount 関数

<Note>
  以下のコードは JS アクションパネルに直接貼り付け可能です。ただし、コンポーネントの一意識別子を必ず置き換えてください。
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// コネクタから複数行テキストコンポーネントに渡されたデータを取得
// textareaField_kwcv17cj はページ上の「返却結果」複数行テキストコンポーネントの一意コードです。
let obj = this.$('textareaField_kwcv17cj').getValue();
// obj の値は文字列です。JSON.parse() で obj をオブジェクトに変換します。
  let res = JSON.parse(obj);
// 処理済みデータを格納するための空配列「arr」を作成します。
  let arr = []
// res 変数を反復処理します
  const data = res.map(item=>{
    let object = {};
// 12〜21 行目の "object." と "=" の間のコードを、サブフォーム内の各コンポーネントの一意識別子に置き換えてください。
    object.textField_kwcvykby = item.name;
    object.textField_kwcvykbz = item.memo;
    object.textField_kwcvykbx = item.form_code;
    object.textField_kwcvykc0 = item.setting.form_type === 0 ? "単発フォーム" : "繰り返しフォーム";
    object.textField_kwcvykc3 = item.setting.form_type === 0 ? "非繰り返しフォーム" : item.setting.loop_days;
    object.textField_kwcvykc5 = item.setting.end_time ? item.setting.end_time : "期限未設定";
    object.textField_kwcvykcb = item.setting.create_time;
    object.textField_kwcvykcc = item.setting.biz_type === 0 ? "一般フォーム" : "教育フォーム";
    object.textField_kwcvykcd = item.setting.stop === false ? "未終了" : "終了";
    object.textField_kwcvykce = item.creator;
// 処理済みオブジェクトを arr 配列に追加します。各オブジェクトはサブフォームの 1 レコードを表します。
    arr.push(object);
  })
// arr 配列のデータをサブフォームコンポーネントに割り当てます
// tableField_kwd6plxz をお使いのフォームのサブフォームの一意識別子に置き換えてください。
  this.$("tableField_kwd6plxz").setValue(arr);
```

### 2.5 フローノード 5: フォームデータの送信

「スマートフォームテンプレート照会」フォームに入力して送信し、コネクタをトリガーします。その後、「照会結果記録テーブル」フォームのデータ管理ページに移動して、コネクタから返却されたデータを確認します。(図 2.5-1 を参照。)

図 2.5-1 フォームデータの送信

## 3. 結果

図 3.1 照会結果