オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

コピペで使える!編集中のレコードの変更をすぐに把握できるスクリプトをご紹介

こんにちは。
リーデックス小川です。

自分が修正しているレコードを他の人が更新すると、「◯◯さんが先に更新したため更新できません。再読み込みしてください。」と画面下に赤い背景色のでメッセージが表示され、再読み込みを促されます。

しょうがないとはいえ、これ、少し煩わしいですよね。

今回は、更新ボタンをクリックすることなく、修正しているレコードに変更があった場合に、更新されたことがわかる機能をスクリプトで作成しましたのでご紹介します。

 

レコードを修正中にレコードの更新された場合

プリザンターで修正中レコードが他の人によって更新された場合、画面下に下記のようなエラーメッセージが表示されます。

 

このようなメッセージが表示される前に、修正しているレコードの更新日時をAPIで取得し、更新されているかを確認するスクリプトを実装してみます。

 

仕様の確認

さて、今回のプログラムについて、どんな動作をするかを確認します。

いま、2人が同一レコードを修正していたとします。1人目が「小川」さん。

 

2人目が「テストユーザ」さんです。

 

「小川」さんも「テストユーザ」さんも、修正しているのですが、「小川」さんが先にデータを修正して更新したとします。

しばらくすると「テストユーザ」さんの更新日時の文字色が赤色に変わります。

 

今回は、このような仕様でサンプルプログラムを作成しました。

なお、「テストユーザ」さんには「スイッチしたユーザで実行中です。」と表示されていますが、こちらは特権ユーザの機能でユーザを切り替えています。詳しくは下記のブログ記事をご覧ください。

サンプルスクリプトのご紹介

サンプルスクリプト

それでは、サンプルスクリプトをご紹介します。下記のプログラムを「テーブルの管理」→「スクリプト」にコピーしてください。

$p.events.on_editor_load = function(){
    let id = null;
    function startInterval(){
      if (id !== null) return false;

        id = setInterval(function(){
        $p.apiGet({
            'id': $p.id(),
            'done': function (data) {
                const body = "#" + $("#ReferenceType").val() + "_Body";
                const time = "#" + $("#ReferenceType").val() + "_UpdatedTime";
                const update_time = $(time).attr("datetime");

                if (data.Response.Data[0].UpdatedTime != update_time){
                    $(time).css("color","red");
                }
            },
            'fail': function (data) {
                console.log(data);
            }
        });
    }, 5000);
  }
  startInterval();
}

 

スクリプトの簡単な説明

ですが、$p.events.on_editor_loadの中で記述されているスクリプトが編集画面を開いたときに実行されます。

編集画面のソースを確認するとわかるのですが、$p.events.on_editor_loadは、

<script>$p.execEvents('on_editor_load','');</script>

のような形で呼び出されています。

startInterval()関数で、5秒ごとに編集しているレコードを取得し、更新日時を比較しています。サーバからデータを取得しているメソッドが$p.apiGetです。詳細は「【わかりやすく解説】自動採番(インクリメント)のスクリプトを紹介!」にも説明されていますのでご覧ください。

比較した結果、更新日時が違う場合は、編集画面の更新日時の文字列を赤くするように設定しています。

使用上の注意

このスクリプトはAPIを使用しているため、ユーザーがAPIを使用できない設定場合はエラーが発生し、正常に動作しません。

APIの設定については下記ブログ記事にまとめてありますので、ぜひご覧ください。

まとめ

今回は、修正しているレコードに変更があった場合に、更新ボタンをクリックすることなく更新されたことを気づける機能についてご紹介しました。

応用すると、取得した情報を各フォームに表示する、ということもできますので、是非チャレンジしてみてください。

弊社では、スクリプトやスタイルを利用したカスタマイズについてご支援させていただいております。スクリプトについて相談したい、業務を改善のために実現したい機能がある、や、本記事や過去の記事のスクリプトを応用したい、などありましたら、お気軽にお問合せください。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。