以前に記事「対話グリッドの自動リフレッシュ」として、タイマーのプラグインを使った実装を紹介しています。今回はフォーム付き対話モード・レポートを対象とし、以前と違う実装を行なってみます。
以下のような動作を実装します。
サンプル・データセットのEMP/DEPTに含まれている表EMPをソースとした対話モード・レポートとフォームのページを含むアプリケーションを作成します。
これからの実装は、対話モード・レポートのページに実施します。
ページ・デザイナで、対話モード・レポートのページを開きます。
ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言として、以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var intervalId; | |
const TIMEOUT = 3000; // 3秒で繰り返し。 | |
const REGION = "emp"; // 対象とするリージョンはemp | |
/* | |
* 指定したリージョンの繰り返しリフレッシュを開始する。 | |
*/ | |
const startRepeatRefresh = (timeout, region) => { | |
if (!intervalId) { | |
// 繰り返しリフレッシュは開始されていない。 | |
intervalId = setInterval(() => { | |
if (!document.querySelector(".ui-dialog")) { | |
// ダイアログやドロワーが開いていないときだけリフレッシュする。 | |
apex.region(region).refresh(); | |
} else { | |
console.log("ダイアログかドロワーが開いているのでリフレッシュしません。"); | |
} | |
}, timeout); | |
console.log(`リージョン${region}を${timeout}msごとにリフレッシュします。`); | |
}; | |
}; | |
/* | |
* リージョンの繰り返しリフレッシュを停止する。 | |
*/ | |
const stopRepeatRefresh = () => { | |
if (intervalId) { | |
clearInterval(intervalId); | |
intervalId = null; | |
console.log(`リージョンの繰り返しリフレッシュを停止しました。`); | |
}; | |
}; |
定期的なリフレッシュを開始するJavaScriptファンクションとしてstartRepeatRefresh、停止するJavaScriptファンクションとしてstopRepeatRefreshを定義しています。
これから、この2つのファンクションを呼び出す処理を追加します。
右ペインで動的アクション・ビューを開き、ページのロードで動的アクションを作成します。TRUEアクションとしてJavaScriptコードの実行を選び、設定のコードとして以下を記述します。
startRepeatRefresh(TIMEOUT, REGION);
ページのロード時、つまりページが開いた時にレポートの定期的なリフレッシュが開始します。
定期的なリフレッシュを停止するボタンSTOP_REFRESHを作成します。
JavaScriptを呼び出すため、動作のアクションとして動的アクションで定義を選択します。ボタンをクリックすると、ページの送信の代わりにJavaScriptのコードが実行されます。
ボタンに作成する動的アクションのタイミングのイベントはクリックになります。選択タイプはボタン、ボタンはSTOP_REFRESHです。
TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードとして以下を記述します。
stopRepeatRefresh();
TRUEアクションとして記述するコードは以下になります。ページのロード時に呼び出したファンクションです。
startRepeatRefresh(TIMEOUT, REGION);
この値は定数REGIONに設定されていて、startRepeatRefreshの第2引数として渡されます。
以上で実装は完了です。アプリケーションを実行すると、本記事の先頭のGIF動画のように動作します。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/auto-refresh-report-periodically.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完