はじめに
プリザンターの一覧画面の「ソート状態」を見やすくする方法で紹介した一覧のヘッダーのソート状態を示すアイコンを見やすいものに変更する方法をさらにカスタマイズして使いやすくする方法を紹介します。
ソート状態アイコンを変更する
Google Iconsのアイコンを指定していましたがちょっと直感的でない・・・ということで、他のアイコンに差し替えます。
使うアイコンを考えてみる
アイコンについてはいろいろとあるのですが、今回はライセンスが緩いLine Awesomeを使用します。
| 用途 | アイコン | アイコン名 | SVG |
|---|---|---|---|
| 昇順 |  |
sort-alpha-down-solid |
SVG |
| 降順 |  |
sort-alpha-down-alt-solid |
SVG |
これなら直感的で分かりやすいので、これを使用します。
Line Awesomeをプリザンターに組み込む
インターネットに出られる環境であれば拡張HTMLを使用してCDNで使用するのですが、これだとプリザンターの良いところである「完全オンプレ・インターネット不要」で使用できるメリットが消えてしまうので、Line Awesomeのリソースをプリザンターに組み込んでしまいます。
Line Awesomeの公式サイトからZIPファイルをダウンロードしてきて、プリザンターのインストール先のディレクトリに下記の階層で展開します。
次に拡張HTMLを用意します。
<link rel="stylesheet" href="/line-awesome/css/line-awesome.min.css" />
マニュアルではファイル名のサフィックスに言語の2レターコードを付けるように記載がありますが、それを省略することで全ての言語に適用できます。
サーバスクリプトで表示させてみる
サーバスクリプトを作成します。設定条件は「画面表示の前」です。
if (['index', 'gridrows', 'newongrid', 'copyrow'].includes(context.Action)) {
for (const [key, value] of Object.entries(view.Sorters)) {
switch (value) {
case "asc":
context.AddResponse('ReplaceAll', `th[data-name="${key}"] div .ui-icon`,
'<span class="las la-sort-alpha-down" style="font-size: 1.5em;"></span>');
break;
case "desc":
context.AddResponse('ReplaceAll', `th[data-name="${key}"] div .ui-icon`,
'<span class="las la-sort-alpha-down-alt" style="font-size: 1.5em;"></span>');
break;
}
}
}
表示を確認してみます。
いい感じに表示させることが出来ました。
ソートの順番を表示させる
プリザンターでは複数の項目でソートを設定することが出来ます。ClassAを昇順に並び替えた後にClassBを降順に並び替えるといったことが出来ます。これは、ヘッダーの要素をクリックした順番になります。
このクリックした順番、画面上では一切表示されないので、これを表示させるようにしてみます。
使うアイコンを考えてみる
前項で使用したLine Awesomeがそのまま使えれば良いのですが数字系のアイコンの実装がないため、こちらではGoogle Iconsを使用します。
| 用途 | アイコン | アイコン名 |
|---|---|---|
| 1 |  |
filter_1 |
| 2 |  |
filter_2 |
| 3 |  |
filter_3 |
| 4 |  |
filter_4 |
| 5 |  |
filter_5 |
| 6 |  |
filter_6 |
| 7 |  |
filter_7 |
| 8 |  |
filter_8 |
| 9 |  |
filter_9 |
| 9+ |  |
filter_9_plus |
これなら直感的で分かりやすい&9個以上の項目を選択したときも対応出来るので、これを使用します。
サーバスクリプトで表示させてみる
サーバスクリプトを作成します。設定条件は「画面表示の前」です。先ほどのソート順アイコンを表示させるスクリプトをベースにしています。
if (['index', 'gridrows', 'newongrid', 'copyrow'].includes(context.Action)) {
for (const [index, [key, value]] of Object.entries(Object.entries(view.Sorters))) {
//Object.entriesを使用すると先頭にGetType,ToString,Equals,GetHashCodeの4つが格納されるので除外する
if (index < 4) {
continue;
}
//前処理と同じ理由からインデックスの値を補正する
var number = index - 3;
var icons = "";
switch (value) {
case "asc":
icons +=
`<span class="las la-sort-alpha-down" style="font-size: 1.5em;"></span>`;
break;
case "desc":
icons +=
`<span class="las la-sort-alpha-down-alt" style="font-size: 1.5em;"></span>`;
break;
}
if (9 < number) {
icons +=
`<span class="material-symbols-outlined" style="font-size: 1.5em;">filter_9_plus</span>`;
} else {
icons +=
`<span class="material-symbols-outlined" style="font-size: 1.5em;">filter_${number}</span>`;
}
context.AddResponse('ReplaceAll', `th[data-name="${key}"] div .ui-icon`,
icons);
}
}
表示を確認してみます。
いい感じに表示させることが出来ました。
まとめ
今回は、ヘッダーでかけられているソートの状態をさらにわかりやすくする方法を紹介しました。いろいろと応用の利く要素がありますので、是非試してみてください。