!++++
!----
※Ver5のサンプルは用意しておりません。
1. はじめに
Client-side JavaScript を用いて、ドリルダウン項目の押下時に REST API でデータを取得し、リアルタイムで下位項目を描画する方法を紹介します。
2. サンプル機能の内容と確認ポイント
大量のデータに対して一括でドリルダウン項目を生成すると表示が重くなるため、ドリルダウン項目の押下時に REST API 経由でデータを取得し、リアルタイムで下位項目を描画する方法を紹介します。
なお、本画面は照会専用であり、データの更新はできません。
また、画面に表示されているデータは「検索」処理で取得したものではないため、標準の PDF 出力、Excel 出力、改ページ制御などの機能は使用できません。これらは制約事項としてご留意ください。
Client-side JavaScript による実装内容は以下のとおりです。
-
検索時にドリルダウン対象の項目へクリックイベントを追加します。
-
クリックイベント内では、ドリルダウン項目の操作および
main_execute関数による API 呼び出しを実行します。 -
API 呼び出しは1回のみ実行し、2回目以降は呼び出さないよう、対象要素に
setAttribute("data-api-called", "true")を設定します。
上記により、ドリルダウン項目の押下に応じて REST API を経由しデータを取得できるようになります。main_execute 関数で API を呼び出すと、send_rest_search_response 関数でレスポンスを受け取り、JSON に変換後、レンダリング処理を行う renderDrillDownRows 関数にデータを渡します。
renderDrillDownRows 関数では、レスポンスデータを forEach で処理し、各項目の has_child 値が 1（子要素あり）の場合は、次階層を開くリンクを追加します。子要素がない場合はリンクは追加されません。
※呼び出し先の REST API は、'ITEM1' は最大3階層、'ITEM2' は最大5階層まで has_child: 1 になるよう設定されています。
🔍 確認いただけるポイント
- ドリルダウン項目押下時に REST API が呼び出され、下位項目がリアルタイムで描画されること（「処理中です。」のステータスバーが表示されます）
- 描画済みのドリルダウンを閉じて再度開いた場合、REST API が再度呼び出されないこと（ステータスバーは表示されません）
- 'ITEM1' は3階層まで、'ITEM2' は5階層まで表示されること
3. 画面イメージ
以下は、「ITEM1」は第3階層まで、「ITEM2」は第5階層まで表示されていることを示しています。
!++++
使用したコード一覧
!----