勤怠打刻

​

事前準備

​

プロセス概要

• フローノード 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 で作成した打刻照会フォームを選択します。

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

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))

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

​

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

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

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. 結果フォームのデータ管理ページに移動して結果を確認します。

​

関連ドキュメント

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