JET Picto Chartをサンプルに使用します。APEXアプリケーションは、こちらの記事で作成したJET without Knockoutのアプリケーションに、それぞれのレポートのページを追加します。
最初にクラシック・レポートのページを作成します。
JET Picto Chartを組み込むページには、ページ・プロパティに以下を設定します。
JavaScriptのファイルURLとして以下を設定します。
[require jet]
JavaScriptのページ・ロード時に実行に以下を設定します。
require(["ojs/ojpictochart"], function() {});
CSSのファイルURLに以下を設定します。
#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css
CSSのインラインに以下を設定します。
.oj-dvt-datatip-value {
display: none;
}
クラシック・レポートのソースのSQL問合せとして、以下のSELECT文を記述します。列TEMPERATURESにJET Picto Chartのitemsに与えるJSON形式のデータが返されます。
列TEMPERATURESのタイプはプレーン・テキスト、列の書式のHTML式として以下を記述します。
以上で、クラシック・レポートにJETチャートを表示することができます。
続いて対話モード・レポートのページを作成します。
列TEMPERATURESのタイプと列の書式のHTML式も、クラシック・レポートと同じです。
対話モード・レポートでは、属性のパフォーマンスの遅延ロードをオフにします。JETチャートの描画は非同期に行われるため、遅延ロードがオンだとJETチャートが表示されません。
しかし、対話モード・レポートで遅延ロードをオフにすることで抑止される処理はレポートの初回表示時のみです。ページ送りによるレポートの描画は必ず遅延ロードが適用されます。結果として、ページ送りをしたときはJETチャートが表示されません。
対話モード・レポートのリフレッシュ後に、ページのリロードを実行することが、ワークアラウンドのひとつです。
対話モード・レポートに動的アクションを作成します。
タイミングのイベントにリフレッシュ後を選択します。
TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。
location.reload(false);
以上で、対話モード・レポートでJETチャートが表示されるようになります。
JETチャートが非同期で表示される点については、そのJETチャートをラップするWebコンポーネントを作成することにより対応可能です。Oracle CorporationにてAPEXを開発しているRonny Weißさんがドイツで開かれたカンファレンスAPEXConnect 2023にて、その実装を紹介されています。この実装については、また別の機会にまとめたいと思います。
対話グリッドではクラシック・レポートや対話モード・レポートとは異なり、遅延ロードの設定に関わらずJETチャートは表示されます。
対話グリッドのソースのSQL問合せは以下になります。
チャートのデータとなる列とチャートを表示する列を別にする必要があるため、これまでのレポートのソースSQLに列CHARTを追加しています。
列TEMPERATURESの属性のタイプは非表示に変更します。
列CHARTの識別のタイプをHTML式に変更し、ヘッダーは（非表示にした列TEMPERATURESの代わりに）Temperatures、設定のHTML式として以下を記述します。
置換文字列として#TEMPERATURES#の代わりに&TEMPERATURES.を使います。
以上で、対話グリッドでJETチャートが表示されるようになります。
最後に、カード・リージョンでJETチャートを表示します。
カード・リージョンのソースのSQL問合せは、クラシック・レポートおよび対話モード・レポートと同じです。
タイトルの列としてCITY_NAME、サブタイトルの列としてMONTHを選択します。本体の拡張フォーマットをオンに変更し、HTML式に対話グリッドで使用した式を記述します。
カード・リージョンも対話グリッドと同様に、遅延ロードの設定に関わらずJETチャートは表示されます。
各種レポートやカード・リージョンへのJETチャートの組み込みについての説明は以上です。
https://github.com/ujnak/apexapps/blob/master/exports/jet-without-knockout.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
