【ローコードのSKE】標準部品アドオン開発の紹介

SKEを利用してリポジトリ定義で業務画面を設定で実現します。設定だけで実現できない要件が存在する場合、「アドオン開発」というプログラミングの世界へようこそ。

アドオンを選ぶ

要件に関わる場所とタイミングによりアドオンを選びます。SKEには以下のアドオンがあります。

場所	アドオン	タイミング
各種入力項目
	タイトルのアドオン	初期化された時
	値のアドオン	初期化された時
	ソースのアドオン	初期化された時
	タイトル操作のアドオン	クリックされた時
	入力枠操作のアドオン	変更された時
検索結果
	フォーマットのアドオン	検索結果表示時
追加ボタン
	ボタン処理のアドオン	クリックされた時
CRUD前後
	検索前処理のアドオン	Select SQL実行前
	検索後処理のアドオン	Select SQL実行後
	削除前処理のアドオン	Delete SQL実行前
	削除後処理のアドオン	Delete SQL実行後
	保存前処理のアドオン	Insert/Update SQL実行前
	保存後処理のアドオン	Insert/Update SQL実行後
テーブル＆クエリ項目
	モード別項目設定値のアドオン	Insert/Update SQLのパラメータ作成時

インタフェースを確認

アドオンの開発は、リポジトリ定義画面で関連項目をクリックして開くスクリプト登録ダイアログにて行います。
それぞれのアドオンは場所とタイミングによりインタフェースが微妙に違っています。アドオンのパラメータと戻り値を確認するため、上記一覧のリンク先を閲覧できます。または、その定義場所から開くスクリプト登録ダイアログに記載するサンプルによりも確認できます。

パラメータはよくオブジェクト型または配列型になりますが、どの属性があるかどの値があるか確認したい場合、debug関数を利用して、tomcatコンソール画面に出力できます。上記画像のアドオンなら以下のようにデバッグ可能です。※debugの引数の文字列はコンソール画面で探す場合の目標です。

touchConditionData.debug("***touchConditionData***");

プログラミング

SKEはEFW(ESCCO Framework)を利用して開発されています。SKEのアドオンもEFWのイベントjsと同じくサーバサイトjavaScriptでEFW APIのモジュールとクラスを利用できます。ここでイベントjsと違う注意点を説明します。

サーバ処理

DB処理

EFWのDB処理には外だしSQLが推奨されます。SKEの場合リポジトリ定義で開発するので、外だしSQLを利用すると操作の難易度が上がります。SKE専用の「freeSql」方式を推奨します。
「freeSql」方式には、Sqlへのパラメータは「:」で表現して、実行時プリペアードステートメントに変換されて、セキュリティ面のメリットがあります。

検索例

var obj検索用={
    sql:`
        select * from tb1 where field_nm like '%' || :field_nm || '%'
    `,
    field_nm:"検索したい名称"
}
var ary=db.select("skeComm","freeSql",obj検索用).getArray();

更新例

var obj更新用={
    sql:`
        update tb1 set field_nm  = :field_nm
        where field_id=:field_id
    `,
    field_id:"検索したい名称"
    field_nm:"検索したい名称"
}
db.change("skeComm","freeSql",obj更新用);

メール処理

TODO

クライアント処理

アドオン開発にはCSSを調整したりJSPファイルを修正したりなどの操作を推奨しません。どうしても必要な場合、部品開発の自作画面、自作ダイアログをご参考ください。

Resultクラスで画面処理

アドオン開発のクライアント処理は、基本的に「result」のパラメータまたは戻り値を利用して、ブラウザ表示を操作することです。この点はEFWイベントjsと類似です。

jQueryセレクタで項目特定

EFWはjQueryのセレクタ式で画面項目を特定します。SKEのリポジトリ定義で作成された項目を特定したい場合同じくセレクタ式が必要です。また、EFW開発と同様に、項目ID重複問題を考慮して、「#id」の単純なやり方を避けてください。ID属性にリポジトリ定義IDを含む親タグの下位タグのように記載すれば安全です。

//ラベル
#{defId} #lbl_{itemId}
#{defId}_inputDialog #lbl_{itemId}
#{defId}_selectDialog #lbl_{itemId}
//入力枠
#{defId} #{itemId}
#{defId}_inputDialog #{itemId}
#{defId}_selectDialog #{itemId}

Result.eval関数の活用

標準部品の各種操作に対して、クライアントjavaScriptのメソッドが設けられています。必要に応じてそれらのメソッドを呼び出したい場合、Result.eval関数を利用できます。
SKE説明の部品モデル部分をご確認ください。

例

• 自動採番のさまざま
• 更新日時の排他処理
• 階層連動ドロップダウン
• 選択ダイアログの利用
• 検索結果の加工

参考：イベントにアドオンの実行順番

初期化イベント

一覧画面	選択ダイアログ
listPage.jsp	selectDialog.jsp
Efw("${DefId}_listPage_init")	Efw("${defId}_selectDialog_init")
検索条件項目⇒タイトルのアドオン
検索条件項目⇒値のアドオン
検索条件項目（コンボ・ラジオ）⇒ソースのアドオン
検索イベントを呼び出す

入力画面	入力ダイアログ
inputPage.jsp	inputDialog.jsp
Efw("${DefId}_inputPage_init")	Efw("${defId}_inputDialog_init")
検索前処理のアドオン　※新規モードではない場合
検索後処理のアドオン　※新規モードではない場合
入力項目⇒タイトルのアドオン
入力項目・⇒値のアドオン※モード別
入力項目（コンボ・ラジオ）⇒ソースのアドオン

検索イベント

一覧画面	選択ダイアログ
Efw("${DefId}_listPage_search")	Efw("${defId}_selectDialog_search")
検索前処理のアドオン
検索後処理のアドオン
検索結果項目⇒フォーマットのアドオン

クリアイベント

一覧画面	選択ダイアログ
Efw("${DefId}_listPage_clear")	Efw("${defId}_selectDialog_clear")
検索イベントを呼び出す

ダウンロードイベント

一覧画面	選択ダイアログ
Efw("${DefId}_listPage_download")	Efw("${defId}_selectDialog_download")
検索前処理のアドオン
検索後処理のアドオン

アップロードイベント

一覧画面	選択ダイアログ
Efw("${DefId}_listPage_upload")	Efw("${defId}_selectDialog_upload")

※アップロードイベントは、CSVファイルをDBに保存するから、画面項目の保存と随分違うので、保存前処理と保存後処理のアドオンは実行しません。

削除イベント

一覧画面	選択ダイアログ
Efw("${DefId}_listPage_delete")	Efw("${defId}_selectDialog_delete")
削除前処理のアドオン
削除後処理のアドオン

保存イベント

入力画面	入力ダイアログ
Efw("${DefId}_inputPage_save")	Efw("${defId}_inputDialog_save")
保存前処理のアドオン
モード別項目設定値のアドオン
保存後処理のアドオン

タイトル操作・入力枠操作・ボタン処理のイベント

一覧画面	入力画面	入力ダイアログ	選択ダイアログ
Efw("${defId}_listPage_touch")	Efw("${defId}_inputPage_touch")	Efw("${defId}_inputDialog_touch")	Efw("${defId}_selectDialog_touch")
タイトル操作のアドオン 入力枠操作のアドオン ボタン処理のアドオン