Pleasanterのレコード変更履歴に変更箇所履歴の表示を追加した話。

大量にあるExcel台帳をデータ保護・変更履歴記録のためimplem/pleasanterに移行してもらうよう推進している。
便利なツールがあれば、もっと便利に使いたいという要望が出されるのはいつものことなので、Pleasanterの変更履歴に変更箇所履歴の機能を追加した。

使ったもの

Pleasanter　Ver1.3.45.0 Community Edition

ことの流れ

Pleasanterで大量の要素を登録するテーブルの変更履歴が積みあがってくると、利用者は前のバージョンからどの要素を変更したのかを探して変遷をたどるのが面倒になるらしく、

(1)レコードの変更履歴を表示したときに、変更した箇所がわかるよう表示したい
(2)レコードの編集をしているときに、誤入力を防ぐため編集した箇所がわかるよう表示したい
(3)レコードの編集をしているときに、編集せず更新してもバージョンが上がらないようにしたい

という要望が届いた。
なんとかなりそうなので、スクリプトで対応することにした。

Pleasanterの編集画面の.on(change）メソッド内で、利用者が変更した項目のカラムIDを取得し、変更した項目をスタイルで色を変え、編集画面上のバージョンアップチェックボックスをONにし、(2)(3)の要望に対応する。
ついでに取得したカラムIDを"説明Z"カラムに記録していく。
編集画面の呼び出し時に.on_editor_loadメソッド内で、"説明Z"カラムに記録されたカラムIDを指定しスタイルで色を変えるようにして(1)の要望に対応する。

ということにしてできたのが以下の内容だ。

// 変更箇所を「説明Z」に記録、エディタ画面では非表示にすることを推奨
$(document).on('change', '.control-textbox,.control-markdown,.control-dropdown,.control-checkbox,.control-attachments-upload' , function() {
    //変更箇所の取得と強調表示
    const changedElementId = this.id;
    console.log("変更がありました", changedElementId);
    
    var inputElement = document.getElementById(changedElementId);
    inputElement.style.backgroundColor = "#33CC33"; //変更箇所の色指定

    //変更箇所があった場合バージョンを上げる
    //エディタの自動バージョンアップを「無効」にしておくこと。
    const checkbox = document.getElementById('VerUp');
    if (checkbox != null){
        checkbox.checked = true;
    }
    
    //変更箇所を説明Zに記録
    var desZ = $('#Results_DescriptionZ').val();
    console.log("変更履歴", desZ);
    if (desZ === ''){
        var str = changedElementId;
    }else{
        var str = desZ + '\,' + changedElementId;
    }
    var changeHistory = str;
    $p.set($('#Results_DescriptionZ'), changeHistory);

    });


$p.events.on_editor_load = function () {
    //変更履歴(説明Z)を取得して強調表示
    var desZ = $('#Results_DescriptionZ').val();
    if (desZ != ''){
        var splitHistory = desZ.split(',');
        for (let i = 0; i < splitHistory.length; i++){
            console.log("変更履歴", splitHistory[i]);
            var historyElement = document.getElementById(splitHistory[i]);
            historyElement.style.backgroundColor = "#33CC99"; //変更履歴箇所の色指定
            }
        }
    $p.set($('#Results_DescriptionZ'), ""); //変更履歴をクリア

    }

Pleasanterにサンプルテーブルを作り、適当にエディタの設定をする。変更履歴を保持する"説明Z"を必ず追加しておく。

スクリプトを追加し、タイトルには適当な文字を、スクリプトに上の内容を、出力先の"新規作成"と"編集"にチェックを入れて追加し準備完了。

レコードを新規作成。項目に入力すると色が変わり、説明Zに変更されたカラムIDが記録されていく。

変更履歴を確認すると記録された変更箇所が強調表示され、変更履歴の可読性が向上する。

　
変更箇所の記録にカラムを一つ使ってしまうが、汎用性の高い機能だと思うので残しておく。