作成したアプリケーションは以下のように動作します。
アプリケーション自体はチャートの記事で作成したものとほぼ同じです。oj-chart要素は表示するデータを静的に割り当てることができましたが、oj-table要素はDataProviderとして割り当てる必要があります。そのため、アプリケーションの作り方が少し変わります。
このアプリケーションのエクスポートは以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/dynamic-jet-table.zip
以下よりチャートを表示するアプリケーションとの差分について説明します。
ページ・プロパティのJavaScriptのページ・ロード時に実行は以下になります。ojs/ojchartの代わりにojs/ojtableをロードします。
require(['ojs/ojtable'], function() {});
任意のSELECT文を渡して実行結果を得るAjaxコールバックをGET_TABLEとして作成します。ソースのPL/SQLコードとして以下を記述します。チャートのときはAjaxコールバックでHTMLを生成しましたが、oj-table要素はデータをHTMLの記述に含めることはできないため、列情報をcolumns属性、データをdata属性として持つJSONドキュメントを返すようにしています。
表の出力先となるDIV要素のIDをchartからtableに変更しています。
<div id="table"></div>
oj-table要素を生成するJavaScriptのコードは以下になります。ボタンGENERATEをクリックしたときに実行されるTRUEアクションの設定のコードを置き換えます。
以上でアプリケーションは完成です。
Oracle JETのoj-tableのリファレンスは以下になります。今回はoj-tableを表示するために最低限必要な属性であるcolumnsとdataのみを設定しています。他の属性を設定することにより、より使い勝手を向上させることも可能でしょう。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
