Oracle APEXで対話モード・レポートにハイライトを実装してみた

Last updated at 2024-06-18Posted at 2024-06-17

はじめに

Oracle APEXでハイライト表示をする方法は沢山あります。
対話モード・レポートのハイライト機能を使えば、直ぐにレポート内の任意の行をハイライト表示することが出来ます。

ただ、行すべてをハイライトするのではなく、任意の列のみハイライトするにはどうすれば良いでしょうか。本記事ではCSSを記述し、以下の様にハイライトを実装してみます。

【前提条件】

Oracle APEXのワークスペースを作成済みであること

1. APEX環境の準備

Oracle APEXのワークスペース上で、新しいアプリケーションを作成します。（ハイライト実装を試すことの出来るデータと、対話モード・レポートが既に作成済みであれば、2. ハイライトの実装へスキップします）

Oracle APEXのワークスペースへログインし、アプリケーション・ビルダーをクリックします。
新たなアプリケーションを作成するので、作成をクリックします。
サンプルデータセットとして、student.xlsxというExcelファイルのデータを使用します。ファイルからアプリケーションの作成をクリックし、アプリケーションを作成します。
こちらからstudent.xlsxというExcelファイルをダウンロードし、APEXの画面にドラッグアンドドロップします。
表名をSTUDENTとし、インポートしたstudent.xlsx内のデータを、STUDENTという新規表へロードします。

インポートしたExcelファイルのデータは、画面下部のプレビューから見ることが出来ます。Excelファイルには、生徒の氏名、生年月日、都道府県、メールアドレスなどのデータが格納されています。
データのロードが終了し、STUDENT表が新規に作成されました。作成された表を基に、アプリケーションを作成します。アプリケーションの作成をクリックします。
アプリケーションの作成ページが表示されたら、何も変更せず、アプリケーションの作成をクリックします。
アプリケーションが作成されました。

画面上部のSQLワークショップから、作成されたSTUDENT表を確認する事が出来ます。

2. ハイライトの実装

対話モードレポートのあるページのページ・デザイナを開きます。（4 - Studentレポートに対話モードレポートが作成されているので、4 - Studentレポートをクリックします。）
ページのCSS>インラインをクリックし、コードエディタを開きます。
コードエディタに以下のCSSを記述します。
```
.chip {
padding: 4px 10px;
border-radius: 20px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
}

.chip-success {
background: #cdffe0;
color: #00592e;
}

.chip-warning {
background: #faf334;
color: #cf630b;
}

.chip-danger {
background: #f3cee5;
color: #990067;
}
```
chipを定義、背景色や文字色を変更したchip-success、chip-warning、chip-dangerも定義します。それぞれのchipの背景色（background）と文字色（color）等は自由に変更可能です。
Studentリージョンをクリックし、ソース>タイプ>SQL問合せと変更します。
SQL問合せをクリックし、編集します。
本記事では、生徒の年齢が18歳未満の場合はピンク色でハイライト、生徒の年齢が55歳以上の場合は黄色でハイライトをしたいと思います。

SQL問合せのコードエディタで、以下の様に記述します。
CASE式を使用して、年齢が18歳未満だった場合はchip-danger内に年齢を表示、年齢が55歳以上だった場合はchip-warning内に年齢を表示するように記述しました。
```
select ID,
       "氏名",
       "フリガナ",
       "性別",
       "生年月日",
       (CASE
            WHEN "年齢" < 18
                THEN '<span class="chip chip-danger">'||to_char("年齢")||'</span>'
            WHEN "年齢" >= 55
                THEN '<span class="chip chip-warning">'||to_char("年齢")||'</span>'
            ELSE to_char("年齢")
       END) "年齢",
       "郵便番号",
       "都道府県",
       "メールアドレス"
  from STUDENT
```
本記事では、STUDENT表の中の年齢列にハイライトを表示させたいので、Student>年齢>セキュリティ>特殊文字をエスケープのトグルをオフにします。（他の列にもハイライトを表示させる場合は、同様にトグルをオフにします。）
これでハイライトの実装が終わりました。画面上部の緑色の保存と実行ボタンをクリックし、確認してみます。
デフォルトで作成されるログイン画面が表示されます。APEXのユーザー名とパスワードを入力し、ログインします。
対話モード・レポートが作成されたページをクリックします。（Studentレポートページに対話モードレポートが作成されているので、Studentレポートページをクリックします。）
変更を加えた年齢列は非表示になっているので、列を追加し、表示させます。アクションをクリックし、列をクリックします。
列をクリックすると、列の選択という画面が表示されます。年齢をクリック、＞の記号をクリックし、年齢をレポートに表示に移動します。
レポートに表示の右隣りにある記号をクリックし、年齢を生年月日の隣に表示させます。
設定した通り、年齢が18歳未満の場合は年齢がピンクでハイライト、年齢が55歳以上の場合は年齢が黄色でハイライトされるようになりました。