【kintone&FormBridge】履歴テーブルの実装方法を紹介

はじめに

業務でkintoneとFormBridgeで履歴テーブルを実装する必要があったため、その実装方法について紹介します。

システムの概要

申請者が申請し、その後承認者が承認をしていくワークフローシステムです。ユーザがアクションを行い必要であればコメントを入力し、更新日時とユーザとコメントを履歴として残すよう実装しました。

実装方法の紹介

kintone

フィールドの設定

フォームの設定画面にてテーブルを追加し、必要な項目を追加していきます。

• 更新日時について
  • 初期値に「レコード登録時の日時を初期値にする」にチェックを入れておくことで、レコードの更新日時と一致したデータを登録することができます。

カスタマイズ方法

// レコード保存前イベント
let registerEvent = [
    // 一覧画面
    'app.record.index.edit.submit',
    // 編集画面
    'app.record.edit.submit'
];

kintone.events.on(registerEvent, function (event) {
    // 履歴テーブルにデータを追加する
    event.record["履歴テーブル"].value.push({
        'value': {
            '履歴_ユーザ': {
                'value': '更新するユーザ',
                'type': 'SINGLE_LINE_TEXT'
            },
            '履歴_コメント': {
                'value': event.record['コメント'].value,
                'type': 'SINGLE_LINE_TEXT'
            },
            '履歴_更新日時': {
                'value': new Date(Date.now()).toISOString(),
                'type': 'DATETIME'
            }
        }
    });
    return event;
});

• 保存ボタン押下時イベント発生の際に履歴テーブルに自動でデータの追加を行います。保存イベントが発生した際に毎回データの追加が行われないようにする場合には条件を追加する必要があります。
• コメントについて
  • 履歴テーブルとは別でコメントを入力する項目からデータを取得し、設定します。
• 更新日時について
  • 保存ボタン押下時イベントはデータの登録を行っていないタイミングでありデータの更新日時の取得ができなかったため、サーバ時刻を取得しています。

FormBridge

フィールドの設定

フィールドの設定画面から、kintoneアプリの対象の項目にデータを保存するよう設定します。

カスタマイズ方法

入力画面遷移時

// 新規登録時には履歴データは必要ないため非表示にする
fb.getElementByCode('履歴テーブル').parentElement.style.display = 'none';
// 履歴データは完了画面遷移時に値を設定するため、新規の際には初回のデータを削除しておく
record["履歴テーブル"].value.shift();

新規登録の場合には履歴データは存在しないため、履歴テーブルは画面には表示しないように設定をする必要があります。また、データは完了画面遷移時に設定を行うため、非表示にした履歴テーブルの1行目のデータが不要なため削除します。

完了画面遷移前

fb.events.confirm.submit = [function (state) {
    const user = sessionStorage.getItem('user');
    record["履歴テーブル"].value.push({
        'value': {
            '履歴_ユーザ': {
                'value': user,
                'type': 'SINGLE_LINE_TEXT'
            },
            '履歴_コメント': {
                'value': record['コメント'].value,
                'type': 'SINGLE_LINE_TEXT'
            }
        }
    });
        return state;
    }];

• 完了画面に遷移する際に履歴テーブルに値を設定します。もし確認画面で設定してしまうと、ユーザが入力画面に戻って値を修正される可能性があり再度値を設定し直すという手間が発生してしまうからです。
• ユーザについて
  • 現在入力しているユーザのデータを設定するには事前に入力画面にてsessionStorageにて値を入力しておき、sessionStorage.getItem('key')により値を取得します。完了画面遷移前イベントのタイミングでkViewerのAPIを呼び出しkintoneのレコードからデータを取得する場合、非同期処理の関係により値が上手く設定できないため、事前にsessionStorageに値を設定しておきます。
• 更新日時について
  • kintoneのフィールドの設定で初期値に「レコード登録時の日時を初期値にする」にチェックを入れておいたため、ここでは値を設定する必要はありません。kintoneのカスタマイズでは追加する必要がありましたが。。

さいごに

履歴テーブルを実装することになり、どういった方法で実現するか悩みましたが上記の方法にて実現できました。kintoneやFormBridgeで履歴テーブルの実装を考えている方の参考になると幸いです！