はじめに
プリザンターの一覧画面、ヘッダーをクリックすることでソートを行うことが出来ます。ソートが適用されているときは小さなアイコンで昇順・降順が表示されています。このアイコン、ちょっとサイズが小さく見にくいので、今回はそれを改善する方法を紹介します。
要素を見てみる
ヘッダーの実際の要素を見てみます。
<!--昇順-->
<th data-name="TitleBody" class="sortable">
<div data-id="ViewSorters__TitleBody" data-order-type="desc" data-action="GridRows" data-method="post">
<span>タイトル/内容</span>
<span class="ui-icon ui-icon-triangle-1-n"></span>
<span></span>
</div>
</th>
<!--降順-->
<th data-name="TitleBody" class="sortable">
<div data-id="ViewSorters__TitleBody" data-order-type="" data-action="GridRows" data-method="post">
<span>タイトル/内容</span>
<span class="ui-icon ui-icon-triangle-1-s"></span>
<span></span>
</div>
</th>
<!--解除-->
<th data-name="TitleBody" class="sortable">
<div data-id="ViewSorters__TitleBody" data-order-type="asc" data-action="GridRows" data-method="post">
<span>タイトル/内容</span>
</div>
</th>
タイトルの隣接要素にソート状態を示すアイコンが設定されていることが分かります。が、data-order-typeにはヘッダーをクリックしたときの次に選択されるソートオーダーが設定されていたりと要素だけで今の状態を判断するのは難しそうです。アイコンのクラスを直接参照する方法もありますが、今後のデザイン変更などで変更される可能性もあるため可能なら避けたい方法です。
サーバスクリプトのViewを使用する
サーバスクリプトでビューを設定する時に使用するViewオブジェクトですが、実はビュー情報を取得する時にも使用できます。ちょっと中身を見てみましょう。次のようなサーバスクリプトを作ってみて、画面表示の前で表示させてみます。
context.Log($ps.JSON.stringify(view.Sorters));
ここで、ClassAとTitleBodyにソートをかけてみます。デバッグコンソールには次の様な結果が表示されます。
{"TitleBody":"asc","ClassA":"desc"}
フィルタがかかっているという情報が取得出来ました。これは使えそうですね。
使うアイコンを考えてみる
プリザンターでは標準でGoogle Iconsが組み込まれています。今回はその中のアイコンを使ってみます。
| 用途 | アイコン | アイコン名 |
|---|---|---|
| 昇順 |  |
stat_3 |
| 降順 |  |
stat_minus_3 |
これが良さそうですね。
サーバスクリプトで実装してみる
では実装をサーバスクリプトで行っていきます。context.AddResponseの出番です。コードを書いてみると次の様になります。
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="material-symbols-outlined">stat_3</span>');
break;
case "desc":
context.AddResponse('ReplaceAll', `th[data-name="${key}"] div .ui-icon`,
'<span class="material-symbols-outlined">stat_minus_3</span>');
break;
}
}
}
実行されるときの条件を['index', 'gridrows', 'newongrid', 'copyrow'].includes(context.Action)1に限定することで、ブラウザの画面遷移のタイミングと一覧の表が書き換えられるタイミング、一覧画面編集での行追加と行コピーのタイミング1に限定しています。
これを拡張サーバスクリプトやスクリプトに「画面表示の前」の条件で設定します。実行してみるとこのようになります。
いい感じで表示できました。
まとめ
プリザンターのヘッダーでのソートで、今どの項目にソートが設定されているかをよりわかりやすく表示させることができました。項目に対して直感的な表示となるため非常にオススメのカスタマイズです。皆さんも是非試してみてください。