日日是Oracle APEX: 対話モード・レポートの列に星評価を表示する

2023年10月7日土曜日

対話モード・レポートの列に星評価を表示する

Oracle APEXではページ・アイテムと対話グリッドの列のタイプに星評価はありますが、対話モード・レポートの列のタイプとして星評価はありません。

Oracle Forumsを探してみると、HTML式とCSSを使った以下の回答を見つけました。

How to Display Star rating in IR?

https://forums.oracle.com/ords/apexds/post/how-to-display-star-rating-in-ir-9716

この回答はテンプレート・ディレクティブが導入される前の実装で、新しく導入されたテンプレート・ディレクティブを使うと、もっと簡単に実装できそうです。

サンプル・データセットのEMP/DEPTに含まれる表EMPをソースとした対話モード・レポートを使って、ジョブがCLERKの従業員の勤続年数を10年単位で星評価してみます。

以下のような表示になります。

表EMPをソースとした対話モード・レポートを含むアプリケーションが作成済みとします。

レポートのソースとなるSELECT文に、勤続年数が10年で1、20年で2、30年で3、、、となる列STARを作成します。

floor((extract(year from sysdate) - extract(year from hiredate)) / 10) star

ソースのSQL問合せは以下になります。

select EMPNO,
       ENAME,
       JOB,
       MGR,
       HIREDATE,
       floor((extract(year from sysdate) - extract(year from hiredate)) / 10) star,
       SAL,
       COMM,
       DEPTNO
  from EMP

この状態でのレポートの表示は以下になります。

星評価なので、表示する星のアイコンを探します。FontAPEXのサイトにアクセスします。

https://apex.oracle.com/fontapex

starで検索して見つけた、fa-starのアイコンを使用することにします。

fa-starをクリックして開きます。

アイコンfa-starのHTMLによる記述をコピーします。この文字列は後で使用するため、どこかに記録しておきます。

Oracle APEXのユニバーサル・テーマが提供している色のクラスを確認します。

https://apex.oracle.com/pls/apex/r/apex_pm/ut/color-and-status-modifiers

アイコンの表示色にu-hot-textを使用することにします。

１つの星を表示するHTMLは以下になります。

<span class="fa fa-star u-hot-text" aria-hidden="true"></span>

列STARの列の書式のHTML式として、以下を記述します。

	{case JOB/}
	{when CLERK/}
	{case STAR/}
	{when 0/}
	10年未満
	{when 1/}
	<span class="fa fa-star u-hot-text" aria-hidden="true"></span>
	{when 2/}
	<span class="fa fa-star u-hot-text" aria-hidden="true"></span>
	<span class="fa fa-star u-hot-text" aria-hidden="true"></span>
	{otherwise/}
	<span class="fa fa-star u-hot-text" aria-hidden="true"></span>
	<span class="fa fa-star u-hot-text" aria-hidden="true"></span>
	<span class="fa fa-star u-hot-text" aria-hidden="true"></span>
	{endcase/}
	{otherwise/}
	対象外
	{endcase/}