2020年2月21日金曜日

ファセット検索にチャートを追加する

 Oracle APEX 19.2にて新たに提供が開始されたファセット検索のページに、チャートを追加する方法をオラクルの開発者のCarsten Czarskiさんがブログで解説しています。自分でも試してみました。以下、その手順です。オリジナルの英語の内容はこちらです。


まず、EMP表のサンプルを用意します。SQLワークショップユーティリティサンプル・データセットを開きます。EMP/DEPT のアクションインストールをクリックします。


データセットの言語英語を選びます。日本語を選ぶこともできます。

へ進みます。


データセットのインストールを実行します。表EMPDEPT、それとビューEMP_DEPT_Vが作成されます。


データセットがロードされます。アプリケーションの作成を実行します。


アプリケーション作成ウィザードが起動します。アプリケーションの名前Demonstration - EMP / DEPTです。

今回の作業で使用するのはページ名Employeesフォーム付きのファセット検索(emp)のページです。

機能はすべて使用しないため、すべてをチェックをクリックして、チェックをすべて外します。また、言語の選択を日本語に変更します。

以上で、アプリケーションの作成を実行します。


アプリケーションが作成されます。


ページ・デザイナにてファセット検索のページである3 - Employeesを開きます。

レポートEmployees詳細静的IDとしてFC_EMPを設定します。


元の英語の記事に記載されているパイプライン表関数get_faceted_search_dataを作成します。

以下のコードを実行します。

/*
* オラクルの公式ブログに記載されているコード。
* Add a Chart to your Faceted Search Page, Carsten Czarski
* https://blogs.oracle.com/apex/post/add-a-chart-to-your-faceted-search-page
*/
create or replace type t_emp_row as object(
ename varchar2(50),
job varchar2(50),
mgr varchar2(50),
hiredate date,
sal number,
comm number,
-- the DEPTNO column is an LOV column. Thus we treat it as VARCHAR2
deptno varchar2(50) );
/
create or replace type t_emp_table as table of t_emp_row
/
create or replace function get_faceted_search_data(
p_page_id in number,
p_region_static_id in varchar2 )
return t_emp_table pipelined
is
l_region_id number;
l_context apex_exec.t_context;
type t_col_index is table of pls_integer index by varchar2(255);
l_col_index t_col_index;
---------------------------------------------------------------------------
procedure get_column_indexes( p_columns wwv_flow_t_varchar2 ) is
begin
for i in 1 .. p_columns.count loop
l_col_index( p_columns( i ) ) := apex_exec.get_column_position(
p_context => l_context,
p_column_name => p_columns( i ) );
end loop;
end get_column_indexes;
begin
-- 1. get the region ID of the Faceted Search region
select region_id
into l_region_id
from apex_application_page_regions
where application_id = v('APP_ID')
and page_id = p_page_id
and static_id = p_region_static_id;
-- 2. Get a cursor (apex_exec.t_context) for the current region data
l_context := apex_region.open_query_context(
p_page_id => p_page_id,
p_region_id => l_region_id );
get_column_indexes( wwv_flow_t_varchar2( 'ENAME', 'JOB', 'MGR', 'HIREDATE', 'SAL', 'COMM', 'DEPTNO' ) );
while apex_exec.next_row( p_context => l_context ) loop
pipe row( t_emp_row(
apex_exec.get_varchar2( p_context => l_context, p_column_idx => l_col_index( 'ENAME' ) ),
apex_exec.get_varchar2( p_context => l_context, p_column_idx => l_col_index( 'JOB' ) ),
apex_exec.get_varchar2( p_context => l_context, p_column_idx => l_col_index( 'MGR' ) ),
apex_exec.get_date ( p_context => l_context, p_column_idx => l_col_index( 'HIREDATE' ) ),
apex_exec.get_number ( p_context => l_context, p_column_idx => l_col_index( 'SAL' ) ),
apex_exec.get_number ( p_context => l_context, p_column_idx => l_col_index( 'COMM' ) ),
apex_exec.get_varchar2( p_context => l_context, p_column_idx => l_col_index( 'DEPTNO' ) ) ) );
end loop;
apex_exec.close( l_context );
return;
exception
when no_data_needed then
apex_exec.close( l_context );
return;
when others then
apex_exec.close( l_context );
raise;
end get_faceted_search_data;
/

ファセット検索のページにチャート・リージョンを作成します。

識別タイトルChartタイプチャートを選択します。


デフォルトで作成されたシリーズを選択します。

識別名前Salary by EmployeeソースタイプSQL問合せとし、SQL問合せとして以下を記述します。先ほど作成したパイプライン表関数get_faceted_search_dataを呼び出し、レポートEmployeesのデータを取り出しています。

select ename, sal from table(get_faceted_search_data(:APP_PAGE_ID, 'FC_EMP'));

列のマッピングラベルENAMESALを割り当てます。


ファセットの変更でチャートがリフレッシュされるように、動的アクションを作成します。

ファセット検索のリージョン検索の上でコンテキスト・メニューを表示させ、動的アクションの作成を実行します。


作成された動的アクションの識別名前ファセット変更タイミングイベントファセット変更[ファセット検索]選択タイプリージョンリージョン検索を指定します。


TRUEアクションの識別名前Chartのリフレッシュとします。アクションリフレッシュを選択し、影響を受ける要素として選択タイプリージョンリージョンChartを指定します。


これで動的アクションの設定が完了したので、最後に作成済みのチャートのシリーズに、リフレッシュの際にファセットの値が渡るように設定します。シリーズの送信するページ・アイテムとして以下を設定します。

P3_SEARCH,P3_DEPTNO,P3_MGR,P3_JOB,P3_SAL


参照したCarstenのブログの内容は、このあとレポート・リージョンを非表示にして、ファセットとチャートだけを表示するようにしていますが、その部分は割愛します。

以上で作業は完了です。アプリケーションを実行すると記事の先頭のGIF動画のように動きます。

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

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