2023年2月17日金曜日

チャートとレポートを連携させる(2) - 動的アクション

 地域別の円チャートに加え、選択された地域のサブ地域の円チャートを表示し、レポートのフィルタリングをサブ地域でもできるようにします。

レポートのリンク設定によるフィルタリングの代わりに、データソースにWHERE句を追加します。

前回作成したアプリケーションを更新します。

作成済みの地域別のチャートを重複させ、サブ地域別のチャートを作成します。

地域別のチャート上でコンテキスト・メニューを表示させ、重複を実行します。


識別タイトルサブ地域別に変更します。地域別のチャートの右隣に配置されるよう、レイアウト新規行の開始OFFにします。


ページ・アイテムP1_REGIONを作成します。選択された地域のID(REGION_ID)を保持します。

識別名前P1_REGIONタイプとして選択リストを選びます。ラベル地域とします。

LOVタイプSQL問合せを選択し、SQL問合せとして以下を記述します。

select name d, id r from eba_country_regions

追加値の表示OFFにします。

作成したページ・アイテムはチャートとレポートの間に配置します。


選択されたサブ地域のID(SUB_REGION_ID)を保持するページ・アイテムP1_SUB_REGIONを作成します。ページ・アイテムP1_REGIONを重複させ、いくつかの属性を変更します。

識別名前P1_SUB_REGIONラベルサブ地域に変更します。ページ・アイテムP1_REGIONの右隣に配置するため、レイアウト新規行の開始OFFにします。LOVSQL問合せは以下に変更します。

select name d, id r from eba_country_sub_regions


この時点でアプリケーションを実行すると、以下のように表示されます。


これから連携に必要な実装を行なっていきます。

地域別のチャートのシリーズ人口を選択します。

リンクタイプURLにリダイレクトに変更します。


ターゲットURLとして以下を記述します。

ページ・アイテムP1_REGIONとして列REGION_IDの値、表示値として列REGION_NAMEの値、そしてページ・アイテムP1_REGIONの変更イベントを抑止しない(つまり、動的アクションが実行される)という引数でJavaScript APIのsetValueを呼び出しています。

javascript:apex.item("P1_REGION").setValue("&REGION_ID.", "&REGION_NAME.", false);


これで地域別の円チャートをクリックすると、ページ・アイテムP1_REGIONクリックした地域が選択されます。

サブ地域別のチャート(のリージョン)を選択し、ソースWHERE句に以下を記述します。選択された地域に含まれるサブ地域に表示を限定しています。

region_id = :P1_REGION

送信するページ・アイテムP1_REGIONを設定します。


サブ地域別のチャートのシリーズ人口を選択します。

列のマッピングラベルSUB_REGION_NAMEに変更します。また、リンクタイプURLにリダイレクトに変更し、URLとして以下を記述します。

javascript:apex.item("P1_SUB_REGION").setValue("&SUB_REGION_ID.", "&SUB_REGION_NAME.", false);


これでサブ地域別の円チャートをクリックすると、ページ・アイテムP1_SUB_REGIONクリックしたサブ地域が選択されます。

ページ・アイテムP1_REGION、P1_SUB_REGIONを使って、対話グリッドの表示を制限するWHERE句を設定します。

リージョンEbac Countriesを選択し、ソースWHERE句に以下を記述します。
(:P1_REGION is null or :P1_REGION = region_id)
and
(:P1_SUB_REGION is null or :P1_SUB_REGION = sub_region_id)
送信するページ・アイテムに、P1_REGIONP1_SUB_REGIONを指定します。


検索条件については、すべて設定できました。

ページ・アイテムP1_REGION、P1_SUB_REGIONの値が変更されたときに、表示を更新したいリージョン(チャートまたはレポート)のリフレッシュを行う動的アクションを作成します。

ページ・アイテムP1_REGIONに動的アクションを作成します。

識別名前地域の変更とします。ページ・アイテム上で動的アクションの作成を行うと、タイミングはデフォルトでイベント変更選択タイプアイテムアイテムP1_REGIONとなります。


TRUEアクションとしてリフレッシュを選択します。影響を受ける要素選択タイプリージョンリージョンとしてサブ地域別を選択します。地域別の円チャートがクリックされたときに、クリックされた地域でサブ地域別の円チャートが更新されます。


同時に対話グリッドのレポートもリフレッシュされるように、TRUEアクションを追加します。作成済みのTRUEアクションを重複させます。

作成されたTRUEアクションの影響を受ける要素リージョンを、Ebac Coutriesに変更します。


ページ・アイテムP1_REGIONが変更されたときは、ページ・アイテムP1_SUB_REGIONを未設定にする必要があります。例えば、地域としてAsiaが選択され、サブ地域としてEastern Asiaが選択されている状態で地域をAmericaに変更すると、地域がAmericaでサブ地域がEastern Asiaという、あり得ない組み合わせになります。

TRUEアクションを作成し、リフレッシュの前に配置します。アクションクリアを選択し、影響を受ける要素選択タイプアイテムアイテムとしてP1_SUB_REGIONを選択します。


同様にページ・アイテムP1_SUB_REGIONに動的アクションを作成します。

識別名前サブ地域の変更とします。


TRUEアクションリフレッシュするリージョンEbac Countriesのみです。


これでテストしたところ、不具合が1つ見つかりました。

ページ・アイテムP1_SUB_REGIONを選択し、LOVSQL問合せを以下に変更します。

select name d, id r from eba_country_sub_regions
where id in (select sub_region_id from eba_countries where region_id = :P1_REGION)

サブ地域としての選択肢を、選択済みの地域に限定します。

カスケードLOV親アイテムとしてP1_REGIONを指定します。


以上で動的アクションによるチャートとレポートの連携が実装できました。アプリケーションを実行すると、本記事の先頭のGIF動画のように動作します。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/link-chart-and-report-da.zip

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

続く