日日是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式として、以下を記述します。

以上で実装は完了です。アプリケーションを実行すると、本記事の先頭にある画像のように対話モード・レポートが表示されます。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/sample-ir-star-rating.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

2022年11月29日火曜日

対話モード・レポートでのテンプレート・ディレクティブの利用

APEX 22.2より対話モード・レポートとクラシック・レポートでもテンプレート・ディレクティブが利用できるようになりました。

今までは条件ごとに列の表示を切り替えるために、主にCASE句を使用していました。これだとレポートのSELECT文が非常に見難くなります。

APEX 22.2より対話モード・レポートとクラシック・レポートで使用できるようになったテンプレート・ディレクティブにより、レポートのソースのSELECT文がどのように変わるか以下に紹介します。

アプリケーションのページに対話モード・レポートを３つ作成しています。最初の対話モード・レポートデフォルトは表SAMPLE_FILESにテスト・データを投入するために使用します。ページ作成ウィザードによって作成されたフォーム付き対話モード・レポートです。

対話モード・レポート従来の実装では、レポートのソースのSELECT文にCASE句を使っています。対話モード・レポートテンプレート・ディレクティブでは、レポートのソースのSELECT文ではなくテンプレート・ディレクティブで列の表示を切り替えています。

どちらも表示上は同じになっています。

表SAMPLE_FILESの作成

クイックSQLの以下のモデルより、表SAMPLE_FILESを作成しています。

# prefix: sample
files
    name vc80 /nn
    url vc400
    content file

生成されるDDLは以下になります。

create table sample_files (
    id                             number generated by default on null as identity 
                                   constraint sample_files_id_pk primary key,
    name                           varchar2(80 char) not null,
    url                            varchar2(400 char),
    content                        blob,
    content_filename               varchar2(512 char),
    content_mimetype               varchar2(512 char),
    content_charset                varchar2(512 char),
    content_lastupd                date
)
;

今回実装するレポートの列Nameに、以下の設定を行ないます。

列CONTENTにBLOBのデータが保存されている場合は、NameをクリックするとBLOBのデータをダウンロードします。そうでない場合は列URLを開きます。

また、列CONTENT_MIMETYPEよりファイルタイプに応じたアイコンを表示します。

従来の実装

従来の実装でのソースです。

レポートに現れる列はNAMEとTYPEですが、これらは両方ともHTMLなのでセキュリティの特殊文字のエスケープをOFFにする必要があります。アプリケーションの安全性が下がります。

また列フィルタのタイプとしてデフォルトの列タイプに基づくデフォルトが選択されていると、列のデータ（HTMLのA要素）がそのまま検索条件やソートの条件に使用されます。

テンプレート・ディレクティブ

テンプレート・ディレクティブの使用を前提とした、ソースのSELECT文です。

列DOWNLOAD_URL、EXTERNAL_URL、FILE_EXISTが追加されています。列NAMEとTYPEにテンプレート・ディレクティブを使ったHTML式を記述する際に使用しますが、表示は不要です。これらの列の識別のタイプは非表示にします。

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

先頭の１行はコメントです。

{!#FILE_EXIST#/}

本来であればこの行が無くても同じ動作になるのですが、if文の条件に非表示文字列が使用されていると正しく認識されないという不具合があり、そのワークアラウンドとして先頭に非表示列を含むコメント行を含めています。

列TYPEのHTML式です。

列NAMEとTYPEともに検索結果のデータ自体はHTMLではないため、セキュリティの特殊文字のエスケープをOFFにする必要はありません。より安全な実装になっています。

また、列フィルタの値もHTMLにはなりません。

列TYPEの列フィルタの値は、アイコンではなくMIMEタイプの文字列が表示されます。アイコンでは検索やソートはできないので、文字列が表示される方が実用的といえます。

対話モード・レポートでのテンプレート・ディレクティブの利用方法の紹介は以上になります。

今回使用したアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/new-222-template-directive.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

登録: 投稿 (Atom)