😁
コラボフローで承認済みユーザーと承認時刻を特定の項目に表示する パターン2
はじめに
コラボフローの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";
//ドキュメント詳細申請書閲覧・判定画面で
//承認ボタンがクリックされた際のイベントリスナーを設定
collaboflow.events.on("request.detail.accept", function (data) {
const now = new Date();
// 年月日
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
// 時刻
const hours = now.getHours();
const minutes = now.getMinutes();
// 「yyyy/mm/dd hh:mm:ss」形式
const currentDateTime =
year + "/" + month + "/" + day + " " + hours + ":" + minutes;
const loginUser = collaboflow.getLoginUser();
// パーツ値にセット
const partsData = data.parts;
// fidTextとfidDateのペアを格納する配列
const fieldPairs = [];
// fidTextとfidDateのペアを配列に追加
for (let i = 1; i <= 10; i++) {
fieldPairs.push({
text: `fidText${i}`,
date: `fidDate${i}`,
});
}
// 未入力のfidTextとfidDateを探して値を設定
for (const { text, date } of fieldPairs) {
if (!partsData[text].value) {
partsData[text].value = loginUser.name;
partsData[date].value = currentDateTime;
break;
}
}
});
})();
動作の確認手順
- サンプルのカスタマイズコードをjsファイルに保存します。
- アプリ設定 > フォーム設定から新規に通常フォームを作成します。
- サンプルフォームに、先で記載されている必要な項目を配置します。
- サンプルフォームを再度表示し、カスタマイズのタブを表示します。
- 保存したファイルをアップロードします。
- アプリ設定 > 経路設定から新規に経路を作成します。
- 新規文書から作成した経路名をクリックします。
- 申請画面が表示されます。
動作イメージ
Discussion