プリザンターの一覧画面の行にボタンを配置してクリック時に何かする

本記事は OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2022 4日目の記事です。

はじめに

プリザンター の一覧画面、多機能で便利なのですが、行にボタンを配置してクリック時になにかするといったことができないので、そういうときのカスタマイズ方法について記載します。

ボタンを配置する列の作成

ボタンを配置する列を一覧画面に追加します。「テーブルの管理」→「一覧」と操作し、任意の「分類項目」または「説明項目」を有効化します。本記事では「分類I」を使用しました。

ボタンの配置

ボタンの配置です。ボタンは「サーバスクリプト」を使用して実装することができます。「テーブルの管理」→「サーバスクリプト」→「新規作成」と操作して、任意のタイトル、スクリプトに下記のコード、条件に「行表示の前」を設定します。下記の例では「分類I」の項目のRawTextプロパティを使用してボタンのHTMLを記述しています。クリックするボタンのIDを取得しやすいようにするために、data-id属性にmodel.IssueIdを埋め込んでいます。記録テーブルの場合には、model.ResultIdに書き換えてください。classにbutton-iconを指定するとボタンにプリザンター風のデザインが適用されます。data-iconにはアイコンに使いたい画像の名前をここから選択して入力するといい感じのボタンになります。あとからボタンにイベントを付与しやすいようにmy-row-buttonなどのclassを付与しておきます。

columns.ClassI.RawText = `<button 
    data-id="${model.IssueId}"
    class="button-icon my-row-button"
    data-icon="ui-icon-circle-triangle-e">
        click
</button>`;

ボタンが追加されました。

ボタンクリック時のイベント追加

追加したボタンをクリックした際に何等か動作をさせる際には「スクリプト」を追加します。「テーブルの管理」→「スクリプト」→「新規作成」と操作して、任意のタイトル、スクリプトに下記のコード、出力先は「一覧」を設定します。下記の例はクリックした行のレコードIDをコンソールに出力しています。行をクリックすると、プリザンターは編集画面に遷移する動作が動いてしまうため、これを抑止するためにstopImmediatePropagationを呼び出します。

// my-row-buttonがクリックされたときのイベント
$(document).on('click', '.my-row-button', function (event) {
    // レコードのIDをコンソールに出力
    console.log($(this).data('id'));
    // 編集画面が開かないようにイベントの伝搬を停止
    event.stopImmediatePropagation();
});

ボタンをクリックするとレコードのIDがコンソールに出力されました。これを応用してAPI連携を行うなど一覧画面上の機能を拡張することができます。