IM-FormaDesigner 明細テーブルの行挿入、削除、ドラッグアンドドロップ時に処理を行う

IM-FormaDesigner 明細テーブル行操作

formaのクライアントサイドAPI、アクション設定カスタムスクリプトのどこを探しても
明細テーブルの行操作を行ったときのイベントハンドラがいなかったので、やってみました。

下記スクリプトを画面アイテム：スクリプトに張り付ければ使えます。

formaTableEvent.js

// テーブル識別IDを指定 （formaでのテーブル識別ID）
var tableId = 'tb1'; 
var tableSelector = "[table_id='" + tableId + "']";

formaの明細テーブルはdomのidがランダムで振られますがtable_id属性が
formaから指定したものになっているので、それでdomを取得するようにします。

formaTableEvent.js

// 行ドラッグアンドドロップ時、イベントバインド 
$(tableSelector).on("sortupdate", function( event, ui ) {
    imuiAlert("sortupdate");
});

ドラッグアンドドロップ実現にはjQueryUI sortableが使われているので、この辺の情報をかき集めて対応します。
https://api.jqueryui.com/sortable/#event-update

formaTableEvent.js

// 明細テーブル内のtableタグidを取得
var domTableId = $(tableSelector + " table").attr("id");
// 既存の行削除イベント取得
var orgDeleteRowFunc = forma.table[domTableId].deleteRow;
// 既存の削除イベントと合わせて任意の処理実行
forma.table[domTableId].deleteRow = function(target) {
    orgDeleteRowFunc(target);
    imuiAlert("deleteRow"); // このへんにやりたいことを書く
};

行番号右クリックでメニューが出てますが、そこの行削除イベントはdeleteRowが呼ばれるようになっているので、そいつを上書きします。

formaTableEvent.js

// 既存の行追加イベント取得 このイベントは「行挿入」、「コピーした行の挿入」内部で呼ばれている
var orgAddRowFunc = forma.table[domTableId].addRow;
// 既存の行追加イベントと合わせて任意の処理実行
forma.table[domTableId].addRow = function(position, copyInput) {
    orgAddRowFunc(position, copyInput);
    imuiAlert("insert or copyAndPaste"); // このへんにやりたいことを書く
};

このaddRowは「行挿入」「コピーした行の挿入」から呼ばれています。