> ## 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.

# 勤怠打刻

> YiDA とコネクタを組み合わせて社員の勤怠打刻記録を照会する方法を解説します。照会結果フォームの作成、打刻照会フォームの作成、統合と自動化の設定手順を紹介し、業務効率化を実現します。

YiDA とコネクタを組み合わせることで、フォームを送信して社員の勤怠打刻情報（打刻の有無、打刻時刻、打刻場所など）を照会できます。本記事では、フォームを通じて社員の勤怠打刻情報を照会する方法を解説します。

## 事前準備

作業を開始する前に、まずアプリを作成してください。詳細な手順については、[アプリの作成](/ja/yida/app-admin/oncnoy)を参照してください。

## プロセス概要

本記事では、通常フォームを 2 つ作成します。1 つは照会結果を記録するため、もう 1 つはコネクタをトリガーするためのフォームです。手順は以下の通りです。

* フローノード 1：照会結果フォームを作成
* フローノード 2：打刻照会フォームを作成
* フローノード 3：統合と自動化を設定
* フローノード 4：照会結果フォームでデータを受信
* フローノード 5：テストと検証

### 想定される結果

本記事で最終的に実現される結果は以下の通りです。

## フローノード 1：照会結果フォームを作成

1. YiDA ワークベンチにログインし、対象のアプリを選択して、アプリ編集ページに移動します。

2. **+** > **通常フォームを作成** をクリックし、**空白ページを作成** を選択して、フォーム名を **照会結果** に変更します。

3. **一行テキスト** コンポーネント、**サブフォーム** コンポーネント、**メンバーコンポーネント** を中央のキャンバス領域にドラッグします。

4. **メンバーコンポーネント** の名前を **打刻ユーザー** に変更します。

5. **一行テキスト** コンポーネントの名前を **コネクタデータバッファ** に変更し、表示設定を非表示に設定します。

6. **サブフォーム** コンポーネントの名前を **打刻記録** に変更します。

7. 3 つの **一行テキスト** コンポーネントを **サブフォーム** コンポーネント内にドラッグします。

8. 3 つの **一行テキスト** コンポーネントの名前をそれぞれ **打刻時刻**、**打刻場所**、**打刻表示名** に変更します。

9. 右上の **保存** をクリックして設定を完了します。

## フローノード 2：**打刻照会フォーム**を作成

1. アプリ編集ページで、**+** > **ワークフローフォームを作成** をクリックし、**空白ページを作成** を選択して、フォーム名を **打刻照会** に変更します。

2. 2 つの **日付** コンポーネントと 1 つのメンバーコンポーネントを中央のキャンバス領域にドラッグします。

3. 2 つの **日付** コンポーネントの名前をそれぞれ **開始時刻** と **終了時刻** に変更し、検証ルールを **必須** に設定し、フォーマットを **YYYY-MM-DD HH:mm:ss** に設定します。

4. **メンバーコンポーネント** の名前を **打刻ユーザー** に変更し、検証ルールを **必須** に設定します。

5. 右上の **保存** をクリックして基本的なフォーム設定を完了します。

## フローノード 3：統合と自動化を設定

1. アプリ編集ページに戻り、上部の **統合と自動化** をクリックします。
2. **統合と自動化を作成** をクリックし、**空白から作成** を選択します。
3. ダイアログボックスで、統合と自動化の名前を設定し、トリガー種類として **フォームイベントトリガー** を選択し、フォームとしてフローノード 2 で作成した打刻照会フォームを選択します。

<Steps>
  <Step title="フォームイベントトリガーをクリックし、トリガーイベントとして作成成功を選択して、保存をクリックします" />

  <Step title="フォームトリガーイベントの下の + アイコンをクリックし、コネクタを選択します">
    <Note>
      トリガーイベントの下にカーソルを移動すると、`+` アイコンが表示されます。
    </Note>
  </Step>

  <Step title="以下の手順に従ってコネクタノードを設定します" />
</Steps>

**開始時刻** はフォームで送信された **開始時刻** に、**終了時刻** はフォームで送信された **終了時刻** に、**照会ユーザーリスト** はフォームで送信された **打刻ユーザー** に対応します。

7. **コネクタ** ノードの下の **+** アイコンをクリックし、**スクリプト** ノードを追加します。
8. 以下の手順に従ってスクリプトノードを設定します。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
var checkinRecordJson = checkinRecord?JSON.parse(checkinRecord):[];
var tableData = checkinRecordJson.map(function(item) {
return {
    // textField_lw5sacjg を照会結果フォームの打刻時刻のコンポーネント ID に変更してください
    textField_lw5sacjg: item.checkin_time,
    // textField_lw5sacji を照会結果フォームの打刻場所のコンポーネント ID に変更してください
    textField_lw5sacji: item.detail_place,
    // textField_lw5sacjk を照会結果フォームの打刻表示名のコンポーネント ID に変更してください
    textField_lw5sacjk: item.remark
  };
});
outputs.add("签到","tableData",JSON.stringify(tableData))
```

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
[
    {
        "checkin_time": 1715582068000,
        "detail_place": "浙江省杭州市余杭区高教路959号",
        "remark": "クイック打刻",
        "place": "三味未来パーク",
        "userid": "123456789",
        "image_list": []
    }
]
```

<Steps>
  <Step title="スクリプトノードの下の + アイコンをクリックし、データ作成ノードを追加してから、以下の手順に従って設定します" />

  <Step title="右上の公開ボタンをクリックして設定を完了します" />
</Steps>

## フローノード 4：照会結果フォームでデータを受信

1. 照会結果フォームの編集ページに移動します。
2. **JS アクションパネル** を開き、以下のコードを追加し、コメントに従ってコード内容を変更します。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function didMount() {
  // textField_lw4ffhbf をコネクタデータバッファコンポーネントのコンポーネント ID に変更してください。
  const str = this.$("textField_lw4ffhbf").getValue();

  const value = JSON.parse(str);
  // tableField_lw5sacjc をサブフォームのコンポーネント ID に変更してください。
  this.$('tableField_lw5sacjc').setValue(value);

}
```

3. 右上の **保存** をクリックして設定を完了します。

## フローノード 5：テストと検証

1. アプリ編集ページに移動し、**照会結果** フォームをクリックして、右側の **データ管理ページを生成** をクリックします。
2. データ管理ページの **ページ名** と **グループ分け** を設定します。
3. 右上の **アクセス** をクリックしてアプリを開きます。
4. **打刻照会** をクリックし、照会する打刻ユーザー情報と時間範囲を入力して、**送信** をクリックします。
5. 結果フォームのデータ管理ページに移動して結果を確認します。

以下の図に示すように、ユーザーの打刻記録が正常に照会されました。

## 関連ドキュメント

* 統合と自動化
* フォームを作成
* フォームコンポーネント
* ユーザーの打刻記録を取得
* スクリプトノード