目次
はじめに
コラボフローのJavaScriptカスタマイズを利用して、承認済みユーザーと承認時刻を特定の項目に表示するサンプルをご紹介します。
コラボフローで承認済みユーザーと承認時刻を特定の項目に表示する パターン1もあるので参考にして下さい。
パターン1とパターン2の違い
パターン1
申請書を開いたタイミングで、（コラボフロー REST APIで取得した）前の承認者の情報を申請書の項目にセットする
メリット
コラボフローREST APIの情報を使用するため、システムとフォーム内の日時が一致します。
デメリット
申請書閲覧・判定画面を開いたタイミングで（コラボフロー REST APIで取得した）前の承認者の情報を申請書の項目にセットするため、例えば、全承認者の情報を申請書にセットして保存する必要がある場合には、最終承認者の後に情報保存用の判定アイテムが必要になる。
パターン2
申請書閲覧・判定画面で承認ボタンを押したタイミングで、ボタンを押した時刻とログインユーザー名を申請書の項目にセットする
メリット
申請書閲覧・判定画面で承認ボタンを押したタイミングで値がセットされ、承認と同時にデータが保存されるため、直感的な動きになります。
デメリット
申請書閲覧・判定画面で承認ボタンを押してから、次の判定確認画面から実際に承認されるまでの時間差により、コラボフローのシステムが持つ判定時刻とわずかな差が生じます。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
利用するイベント
利用する関数
コラボフローJavaScript APIにはイベントハンドラー関数以外にも関数が用意されています。
ログインユーザー情報取得
collaboflow.getLoginUser()サンプルフォーム
サンプルで利用するフォームには、以下のパーツを配置しています。
※テキスト（一行）パーツは、承認者の人数分配置します。
| パーツID | パーツタイプ | 補足 |
|---|---|---|
| fidText1 | テキスト（一行）パーツ | 承認者1 |
| fidText2 | テキスト（一行）パーツ | 承認者2 |
| fidText3 | テキスト（一行）パーツ | 承認者3 |
| fidDate1 | テキスト（一行）パーツ | 承認者1 |
| fidDate2 | テキスト（一行）パーツ | 承認者2 |
| fidDate3 | テキスト（一行）パーツ | 承認者3 |
カスタマイズコード
※承認者の重複がない承認フローを前提に作成しています。
(function () {
"use strict";
/**
* 現在の日時を「yyyy/mm/dd hh:mm」形式で取得する
* @returns {string} フォーマットされた日時文字列
*/
const getCurrentDateTime = () => {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
return `${year}/${month}/${day} ${hours}:${minutes}`;
};
//ドキュメント詳細申請書閲覧・判定画面で
//承認ボタンがクリックされた際のイベントリスナーを設定
collaboflow.events.on("request.detail.accept", function (data) {
const currentDateTime = getCurrentDateTime();
const loginUser = collaboflow.getLoginUser();
// パーツ値にセット
const partsData = data.parts;
/**
* パーツデータの更新ロジック
* - 既にloginUser.nameが存在する場合は何もしない
* - 存在しない場合、最初の空のフィールドに値をセット（ただし前のフィールドがloginUser.nameでない場合のみ）
*/
// fidTextとfidDateのペアを格納する配列
const fieldPairs = [];
// fidTextとfidDateのペアを配列に追加
for (let i = 1; i <= 10; i++) {
fieldPairs.push({
text: `fidText${i}`,
date: `fidDate${i}`,
});
}
// 既存のloginUser.nameの存在チェック
let hasExistingName = false;
for (const { text } of fieldPairs) {
if (partsData[text] && partsData[text].value === loginUser.name) {
hasExistingName = true;
break;
}
}
// 既存の値が見つからない場合のみ、処理を実行
if (!hasExistingName) {
for (let i = 0; i < fieldPairs.length; i++) {
const { text, date } = fieldPairs[i];
const previousText = i > 0 ? fieldPairs[i - 1].text : null;
/**
* 前のフィールドの値チェック
* - 最初のフィールド（previousText = null）の場合は true
* - もしくは前のフィールドの値が loginUser.name でない場合に true
*/
const isPreviousValueDifferent =
!previousText || partsData[previousText].value !== loginUser.name;
// 現在のフィールドが空で、前のフィールドの条件も満たす場合に値をセット
if (
partsData[text] &&
!partsData[text].value &&
isPreviousValueDifferent
) {
partsData[text].value = loginUser.name;
partsData[date].value = currentDateTime;
break;
}
}
}
});
})();動作の確認手順
- サンプルのカスタマイズコードをjsファイルに保存します。
- アプリ設定 > フォーム設定から新規に通常フォームを作成します。
- サンプルフォームに、先で記載されている必要な項目を配置します。
- サンプルフォームを再度表示し、カスタマイズのタブを表示します。
- 保存したファイルをアップロードします。
- アプリ設定 > 経路設定から新規に経路を作成します。
- 新規文書から作成した経路名をクリックします。
- 申請画面が表示されます。
動作イメージ
