APEX 22.2よりPL/SQL動的コンテンツのリージョンがレガシーになり、新たに動的コンテンツというタイプが追加されました。一番の違いはリージョンのリフレッシュに対応している点です。
以下の記事で作成したAPEXアプリケーションに、動的コンテンツ・リージョンにより文書を表示するページを追加してみます。
CKEditor5による画像アップロードを実装する(4) - 画像をオブジェクト・ストレージに保存する作成したページは以下のように動作します。
ページを新規に作成します。
ページの作成をクリックします。
空白ページを選択します。
名前は任意ですが、ここでは動的コンテンツとしています。ページ・モードは標準です。
ページが作成されます。
作成されたページに文書を選択するためのページ・アイテムを作成します。
Body上でコンテキスト・メニューを表示させ、アイテムの作成を実行します。
識別の名前はP5_DOCUMENT_ID、タイプは選択リストを選びます。ラベルは表示する文書とします。LOVのタイプとしてSQL問合せを選択し、SQL問合せに以下を記述します。
select title d, id r from rte_documents
追加値の表示はOFF、NULL値の表示はON、NULL表示値として--文書を選択 --を入力します。
リージョンの識別のタイトルはドキュメント、タイプに動的コンテンツを選択します。ソースのCLOBを返すPL/SQLファンクション本体として、以下を記述します。
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
declare | |
l_clob clob; | |
begin | |
-- 表示する文書を取り出す。 | |
select content into l_clob from rte_documents where id = :P5_DOCUMENT_ID; | |
-- 画像URLを事前承認リクエストで置き換える。 | |
l_clob := replace(l_clob, :G_OBJECT_STORAGE_URL, :G_PREAUTH_URL); | |
-- マークダウンをHTMLに変換する。 | |
l_clob := apex_markdown.to_html(l_clob); | |
return l_clob; | |
exception | |
when no_data_found then | |
return null; | |
end; |
送信するページ・アイテムとしてP5_DOCUMENT_IDを指定します。
作成した動的アクションの識別の名前は文書の切り替えとします。タイミングのイベントは変更、選択タイプはアイテム、アイテムはP5_DOCUMENT_IDとなります。
TRUEアクションの識別の名前は文書の再表示とします。
アクションはリフレッシュ、影響を受ける要素の選択タイプはリージョン、リージョンはドキュメントを選択します。
このままだと画像が大きく表示されるため、CSSを定義します。
ページ・プロパティのCSSのインラインに以下を記述します。
#mydoc img {
width: 80%;
}
動的コンテンツのリージョンに静的IDとしてmydocを割り当てます。
以上で動的コンテンツを実装したページの完成です。実行すると先頭のGIF動画の動作をします。
今回作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/ckeditor-image-sample-dyn.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完