2022年10月25日火曜日

選択リストの値をリージョンのタイトルに設定する

 ひとつのページに選択リストがあり、その選択リストで選択した値をレポート・リージョンのタイトルとします。動的アクションを作成し、選択を変更すると同時にタイトルも更新します。リージョンのタイトルを宣言的に更新する機能をOracle APEXは提供していないため、JavaScriptを記述してHTMLを直接更新します。

以下のような動作になります。

以下、実装手順になります。サンプル・データセットのEMP/DEPTに含まれる表EMPをレポートに、表DEPTを選択リストに使用します。

アプリケーション作成ウィザードを起動します。ページの追加をクリックし、追加ページよりクラシック・レポートのページを選択します。


ページ名はEMPとします。表またはビュー、クラシック・レポートを選択します。表またはビューとしてEMPを選択します。

ルックアップ列としてDEPTNO(ルックアップ・キー)とDEPT.DNAME(表示列)のペア、MGRとEMP.ENAMEのペアを指定します。DEPTNOの表示列として指定するDEPT.DNAMEは自動的に生成されるLOVで(参照制約より生成される)、これはアプリケーション作成後に追加する選択リストのページ・アイテムにも使用します。

ページの追加をクリックします。


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


アプリケーションが作成された後、ページ・デザイナにてクラシック・レポートのページを開きます。

最初に部門の選択リストを作成します。

ページ・アイテムを作成します。識別の名前をP1_DEPTNO、タイプとして選択リスト、ラベルはDeptとします。LOVのタイプとして共有コンポーネント、LOVとしてDEPT.DNAMEを選択します。追加値の表示はOFFにします。


ページ・アイテムP1_DEPTNOで選択した部門でクラシック・レポートの表示が絞り込まれるよう、ソースのWHERE句に以下を記述します。また、動的アクションにてレポートの表示を変えるため、送信するページ・アイテムにP1_DEPTNOを含めます。

:P1_DEPTNO is null or :P1_DEPTNO = DEPTNO


クラシック・レポートの識別のタイトルがEmployeesになっています。ページ・アイテムP1_DEPTNOの表示値をレポート・リージョンのタイトルにするために、このタイトルを以下に変更します。

<span id="emp_title">Employees</span>


 リージョンのテンプレートにStandardが選択されている場合、リージョンの静的IDにempを割り当てているとリージョンのタイトルはIDのemp_headingとしてアクセスできます。ただし、APEXによって生成されているリージョンの内部要素に直接アクセスすることは推奨されていません。そのため、内部要素の変更があっても変わらずにタイトルにアクセスできるよう、タイトルにspanタグとidを含めます。このようにすることで、APEXのバージョンアップによる影響を最小限にできます。

選択リストP1_DEPTNOの値が変更されたときに、リージョンのタイトルを変更する動的アクションを作成します。

動的アクションのタイミングは、イベントが変更、選択タイプはアイテム、アイテムとしてP1_DEPTNOを選択します。


TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。

document.getElementById("emp_title").textContent
    = apex.items.P1_DEPTNO.displayValueFor(this.triggeringElement.value);

選択リストの表示値をリージョンのタイトルに設定しています。クライアント側の条件にて、P1_DEPTNOがnullではない、つまり選択リストで値が選択されているときに限定します。

初期化時に実行はONにします。


選択リストに値が選択されていない場合は、リージョンのタイトルをEmployeesとします。

TRUEアクションを作成し、以下のコードを実行します。

document.getElementById("emp_title").textContent
    = "Employees";

クライアント型の条件のタイプとして、先ほどのTRUEアクションの反対になるアイテムはnullを選択します。


最後にレポートのリージョンのリフレッシュを行うTRUEアクションを作成します。


デフォルトではレポート・リージョンのタイトルは非表示になっています。

外観のテンプレート・オプションを開きます。


HeaderをVisible - Defaultに変更します。


以上でアプリケーションは完成です。実行すると先頭のGIF動画のように動作します。

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

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

完