Oracle APEX で作ったアプリケーションの対話モードレポートの検索ボタンに動的アクションを付けてみた

# はじめに



### 動的アクションについて
* 動的アクションは、JavaScriptを必要としないで複雑なクライアント側の動作を宣言的に定義する方法を提供します。動的アクションの作成ウィザードを使用して、定義された条件セットが発生したときに実行されるアクションを指定します。また、アクションの影響を受ける要素や、影響を受ける時期と影響も指定できます。
* 標準の動的アクションは、ページ・アイテムの値が変更されたときにページ要素を表示、非表示、有効化および無効化するというような単純なアクションに使用されます。

[動的アクション](https://docs.oracle.com/cd/F93580_01/htmdb/managing-dynamic-actions.html)



# 動的アクションを検索ボタンに対し、実装してみる
 * [こちら](https://apex.oracle.com/pls/apex/r/japancommunity/main/workshops)を参考に、簡易的なアプリケーションを作成し、対話モードレポートのページを持たせます。(上記資料のp.32までの操作で大丈夫です。)

 * 下記のようなアプリケーションが作成されます。
 ![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/cb6904b0-90fc-d1c8-4bc0-b0a9b16ae7d7.png)
 ![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/0fb91c52-d5a3-1d8c-c905-7ee000463c5b.png)

 * レポートのページに使われているのが対話モードレポートという機能です。
 　対話モードレポートでは、検索、フィルタ処理、ソート、列選択、ハイライトなどのデータ操作を行うことで、データの表示をカスタマイズできます。カスタマイズしたレポートは、プライベートまたはパブリックいずれかのレポートとして保存できます。多くの対話モード・レポートには、検索バー、「アクション」メニュー、「列ヘッダー」メニューおよび(各行の最初の列に)編集アイコンがあります。

[対話モードレポート](https://docs.oracle.com/cd/F70953_01/aeeug/about-interactive-reports.html)

* 検索窓の横に実行ボタンがあります。これに対し、ボタンを押すと警告文が表示されるような動的アクションを付けてみます。
*  アプリケーションから、画面下の黒いメニューバーから「ページn」をクリックし、APEXのワークスペース内のページ・デザイナに移ります。
　![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/225dfb46-7c13-3a07-f2fb-349d4fe0f57d.png)


* ページ・デザイナから、アプリケーションの詳細の設定を変更することができます。
　![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/58dbe8cc-97f5-348f-e1cd-012eb42edf52.png)
* 動的アクションを追加します。
画面左のレンダリング・ツリー上のBodyの下のTasksリージョンにカーソルをおき、右クリックを押します。
* 動的アクションの作成を押します。
　![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/945371db-08d3-4e89-48cd-27a3e9f4bf95.png)

* 動的アクションの設定をしていきます。
　新規という名前の動的アクションがレンダリングツリーにあります。左クリックで選択をし、画面右側のプロパティエディタから、下記のように設定します。
 
 <dl>
  <dt>識別</dt>
  <dd>名前：検索クリック(名前は何でもいいです。)</dd>
  <dt>実行</dt>
  <dd>イベントの有効範囲：<strong>動的</strong></dd>
<dt>タイミング</dt>
  <dd>イベント：<strong>クリック</strong></dd>
  <dd>選択範囲：<strong>jQueryセレクタ</strong></dd>
  <dd>jQueryセレクタ：<strong>.a-IRR-button--search</strong></dd>
</dl>

 ![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/dfaac25b-37b2-90e4-e99a-2ab824917e45.png)
 ![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/af0fb599-a64c-e92d-29fb-cdb3757f2788.png)

* 画面左側のレンダリングタブから、一つ右の雷マークの動的アクションタブに移動します。
* 画面左側で、検索クリックの>True>新規　を選択し、プロパティから動的アクションがTrueの場合のアクションの設定をしていきます。
     <dl>
      <dt>識別</dt>
      <dd>名前：<strong>警告</strong>(名前は何でもいいです。)</dd>
      <dd>アクション：<strong>アラート</strong></dd>
      <dt>設定</dt>
      <dd>タイトル：<strong>警告</strong></dd>
      <dd>メッセージ：<strong>これは警告文です。</strong></dd>
      <dd>スタイル：<strong>警告</strong></dd>
    </dl>
　![画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/c9d3e6e3-0912-2a2b-70ef-524925d5f3c3.png)

* 画面右上の緑色の三角マークを押して、変更の保存とアプリケーションの実行をします。
* 変更が反映されたアプリケーションが開かれます。
* レポートページにて、「実行」を押してみると、警告がきちんと表示されます。
　![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058002/d93f2541-5c95-063d-3897-2f2464a1cc0d.png)

# おわりに
動的アクションはリージョンやアイテム、列だけでなく、検索の実行ボタンのような細かいところにも実装することができます。
今回は警告文を表示させるという簡単な動的アクションを作成しましたが、例えばPL/SQL文を実行させるというような設定もすることができます。