👏
コラボフローで承認済みユーザーと承認時刻を特定の項目に表示する パターン1
はじめに
コラボフローのJavaScriptカスタマイズを利用して、承認済みユーザーと承認時刻を特定の項目に表示するサンプルをご紹介します。
コラボフローで承認済みユーザーと承認時刻を特定の項目に表示する パターン2もありますので、参考にして下さい。
パターン1とパターン2の違い
パターン1
申請書を開いたタイミングで、（コラボフロー REST APIで取得した）前の承認者の情報を申請書の項目にセットする
メリット
コラボフローREST APIの情報を使用するため、システムとフォーム内の日時が一致します。
デメリット
申請書閲覧・判定画面を開いたタイミングで（コラボフロー REST APIで取得した）前の承認者の情報を申請書の項目にセットするため、例えば、全承認者の情報を申請書にセットして保存する必要がある場合には、最終承認者の後に情報保存用の判定アイテムが必要になる。
パターン2
申請書閲覧・判定画面で承認ボタンを押したタイミングで、ボタンを押した時刻とログインユーザー名を申請書の項目にセットする
メリット
申請書閲覧・判定画面で承認ボタンを押したタイミングで値がセットされ、承認と同時にデータが保存されるため、直感的な動きになります。
デメリット
申請書閲覧・判定画面で承認ボタンを押してから、次の判定確認画面から実際に承認されるまでの時間差により、コラボフローのシステムが持つ判定時刻とわずかな差が生じます。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
利用するイベント
利用するコラボフロー REST API
サンプルフォーム
サンプルで利用するフォームには、以下のパーツを配置しています。
※テキスト（一行）パーツは、承認者の人数分配置します。
| パーツID | パーツタイプ | 補足 |
|---|---|---|
| fidText1 | テキスト（一行）パーツ | 承認者1 |
| fidText2 | テキスト（一行）パーツ | 承認者2 |
| fidText3 | テキスト（一行）パーツ | 承認者3 |
| fidDate1 | テキスト（一行）パーツ | 承認者1 |
| fidDate2 | テキスト（一行）パーツ | 承認者2 |
| fidDate3 | テキスト（一行）パーツ | 承認者3 |
カスタマイズコード
(function () {
"use strict";
// 申請書閲覧・判定画面イベント - 表示イベントを設定
collaboflow.events.on("request.detail.show", function (data) {
// 判定情報を取得するAPIのパスとパラメータを設定
const path = `/v1/documents/${data.document_id}/determs`;
const parameters = { app_cd: data.app_cd };
// 判定情報を取得するAPIリクエストを送信
return collaboflow.api.get(path, parameters).then(function (response) {
let acceptCount = 1;
// 承認された判定情報のみを処理
response.body.records
.filter((record) => record.determ_status === "accept")
.forEach(function (record) {
const determUserName = record.determ_username;
const determDate = formatDate(record.determ_date);
// パーツ名を設定
const namePartId = `fidText${acceptCount}`;
const datePartId = `fidDate${acceptCount}`;
// 判定者の名前と判定日をテキストパーツに設定
data.parts[namePartId].value = determUserName;
data.parts[datePartId].value = determDate;
acceptCount++;
});
});
});
// 日付を「yyyy/mm/dd hh:mm:ss」形式にフォーマットする関数
function formatDate(dateString) {
const date = new Date(dateString);
return date
.toLocaleString("ja-JP", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
})
.replace(/\//g, "/")
.replace(",", "");
}
})();
動作の確認手順
- サンプルのカスタマイズコードをjsファイルに保存します。
- アプリ設定 > フォーム設定から新規に通常フォームを作成します。
- サンプルフォームに、先で記載されている必要な項目を配置します。
- サンプルフォームを再度表示し、カスタマイズのタブを表示します。
- 保存したファイルをアップロードします。
- アプリ設定 > 経路設定から新規に経路を作成します。
- 新規文書から作成した経路名をクリックします。
- 申請画面が表示されます。
動作イメージ
Discussion