コピペで使える！テーブルの管理で表示される項目の表示名にDBのカラム名を追記する方法

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

今回は、「テーブルの管理」で表示される項目の表示名にDBのカラム名を追記する方法についてブログにまとめました。

スクリプトによりカスタマイズしている場合に、DBのカラム名を知りたいときがしばしばあります。また、項目の表示名が似ている、同一、などの場合、DBのカラム名で判断することもあります。

今回ご紹介するカスタマイズを行うことで、これらの課題が一気に解決しますので、ぜひ活用ください！

使用する前の準備

Chromeのプラグイン「User JavaScript and CSS」の使用を前提としています。

このプラグインを入れることで、プリザンターのテーブルの管理画面をカスタマイズすることが可能となります。

詳しくは、以前記事をまとめていますので、下記の記事をご覧ください。

pleasanter.hatenablog.jp

コピペするスクリプト

以下が、「User JavaScript and CSS」実際にコピペするスクリプトです。「User JavaScript and CSS」に貼り付けてご利用ください。

function setDBNameEvent(areaControls,columnsName,columnsSourceName,columnsThirdName){
	$(`#EditorTabs li[aria-controls="${areaControls}"]`).on('click', function() {
		$(`#${columnsName} li, #${columnsSourceName} li, #${columnsThirdName} li`).each(function() {
		    let $li = $(this);
		    let dataValue = $li.attr('data-value');
		    if (!$li.text().match(/\【[^)]+\】$/)) {
		    	$li.text(`${$li.text()}【${dataValue}】`);
		    }
		});
	});
}

setDBNameEvent("EditorSettingsEditor","EditorColumns","EditorSourceColumns");
setDBNameEvent("GridSettingsEditor","GridColumns","GridSourceColumns");
setDBNameEvent("FiltersSettingsEditor","FilterColumns","FilterSourceColumns");
setDBNameEvent("AggregationsSettingsEditor","AggregationDestination","AggregationSource");
setDBNameEvent("LinksSettingsEditor","LinkColumns","LinkSourceColumns");
setDBNameEvent("HistoriesSettingsEditor","HistoryColumns","HistorySourceColumns");
setDBNameEvent("FieldSetColumnAccessControl","CreateColumnAccessControl","ReadColumnAccessControl","UpdateColumnAccessControl");

簡単にスクリプトを説明しますと、管理画面の特定のタブをクリックしたときに、カラムの表示名にDB名を追記する、というスクリプトとなります。

「テーブルの管理」の上部にあるタブを右クリックし、メニュー「検証」をクリックすることで、どのタブをクリックすると発生するかを確認することができます。

下記７つのタブに設定していますので、動作を確認してみてください。

既知の不具合

以下、既知の不具合となります。

• エディタの無効化ボタンをクリックするとDBのカラム名が消える。
• 項目のアクセス制御を１回目にクリックしたときは表示されない。
• 詳細設定を表示した後にDBのカラム名が消える。

いずれの場合も、タブを再クリックすることで表示されることは確認しています。もし、DB名が消えてしまったら、タブをクリックしてみてください。

スクリプトの開発で多発する「保存→開く」を１回で行うボタン追加する

テーブルの管理をカスタマイズして、「スクリプト」で繰り返し発生する「保存→開く」の手間を０にする方法について、以前も記事にしています。

こちらも非常に有用なカスタマイズですので、ぜひご参考ください。ストレス激減です！

ぜひ、下記の記事をご参考に適用を検討してみてください。

pleasanter.hatenablog.jp

ご利用上の注意！

他でスクリプトを使用して拡張している場合、競合して動かないこともあります。

また、管理画面の動作を制御するスクリプトになるため、本番環境など影響の大きい環境への導入は十分にご検討ください（自己責任でお願いします）。

まとめ

今回は、「テーブルの管理」で表示されるカラムの表示名にDB名を追記する方法についてブログにまとめました。

コピペで簡単、便利に使えますので、ぜひ試してみてください。

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

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