このCookBookでは、リッチテーブルエレメントで大量のデータを扱う時にデータの読み込みを速くする方法について紹介しています。
intra-mart Accel Platform 2023 Autumn でリッチテーブルエレメントに追加されたプロパティを利用することで、読み込みを速くできます。
intra-mart Accel Platform 2023 Autumn より前のバージョンではできないので注意してください。
intra-mart Accel Platform 2023 Spring 以前は、リッチテーブルで扱うデータは最初に全て読み込む必要がありました。
扱うデータの数が多くなるほど読み込みに時間がかかり、パフォーマンス劣化の原因となってしまいます。
最初の読み込みで全てのデータを取得するのではなく、検索やページの切り替えを行うたびに必要なデータのみを取得することで読み込みにかかる時間を短縮してパフォーマンスの悪化を防ぐことができます。
実現方法
intra-mart Accel Platform 2023 Autumn でリッチテーブルエレメントに「pagingType」プロパティが追加されました。このプロパティの設定値を「manual」にすると、テーブルデータの総件数に任意の値を表示できるようになります。
同じく intra-mart Accel Platform 2023 Autumn で追加された「currentPage」「totalCount」「interactiveNavigationEvent」プロパティと組み合わせることで、ページの切替や検索、ソート実行のたびにデータ取得処理を呼び出して必要最小限のデータを取得する、という動作を実現できます。
intra-mart Accel Platform 2023 Spring 以前と同様に最初に全てのデータを読み込みたい場合は「pagingType」プロパティの設定値を「auto」にしてください。
- 簡易検索によるデータの絞り込み
- テーブルのページ移動による表示データの切り替え
- テーブルの1ページあたりの表示件数変更による表示データの更新
- ソートによるデータの並べ替え
この CookBook でサンプルを紹介します。
完成サンプル
この CookBook で説明に使用するサンプルのインポートファイルです。
intra-mart Accel Platform 2023 Autumn 以降のバージョンで利用できます。
IM-LogicDesigner のインポートファイルは、IM-LogicDesigner のインポート画面からインポートしてください。
IM-BloomMaker のインポートファイルは、IM-BloomMaker のインポート画面からインポートしてください。
IM-LogicDesigner のインポートファイル : im_cookbook_234055_im_logicdesigner-data.zip
IM-BloomMaker のインポートファイル : im_cookbook_234055_im_bloommaker-data.zip
インポート完了後、テナント環境セットアップでサンプルデータのセットアップを行い、以下のそれぞれのロジックフロールーティング定義、および、IM-BloomMaker のルーティング定義に認可設定を行ってください。
- IM-LogicDesigner のロジックフロールーティング定義
- im_cookbook/234055/get_user_list
- im_bloommaker/standard_template/delete_user
- im_bloommaker/standard_template/get_user
- im_bloommaker/standard_template/get_user_count
- im_bloommaker/standard_template/register_user
- im_bloommaker/standard_template/update_user
- IM-BloomMaker のルーティング定義
- 「intra-mart CookBook」>「im_cookbook_234055」>「im_cookbook_234055_user_list」
手順
- IM-LogicDesigner
- データの取得を行うロジックフローを作る
- ロジックフロールーティングを作る
- IM-BloomMaker
- 「paging」プロパティを「true」にする
- 「pagingType」プロパティを「manual」にする
- 「currentPage」プロパティを設定する
- 「rowsPerPage」プロパティを設定する
- 「totalCount」プロパティを設定する
- 「simpleSearchText」プロパティを設定する
- 「allowSorting」プロパティを設定する
- 「sortConditions」プロパティを設定する
- 「interactiveNavigationEvent」プロパティを設定する
- データの件数を取得するアクションを作成する
- データを取得するアクションを作成する
1. IM-LogicDesigner
リッチテーブルに表示するデータをデータベースから取得する処理を実装します。今回は IM-LogicDesigner のロジックフローで行います。
1-1. データの取得を行うロジックフローを作る
- 「ロジックフロー定義一覧」画面を表示してください。
- ツリーから「im_cookbook_flow」>「im_cookbook_234055_flow Get user list」を選択して「編集」ボタンをクリックしてください。
- 以下のようなフローが表示されます。
- このロジックフローでは以下のパラメータを受け取ります。
No キー名 説明 1 userCd 検索条件です。ユーザコードを検索します。 2 limit データを何件取得するか指定します。 3 offset データの取得開始位置を指定します。 4 sortConditions ソート条件を指定します。 - 各タスクでは以下の処理を行っています。
No タスク 説明 1 Branch ソート条件が指定されているか判定し、未指定の場合は 2 のタスクをスキップします。 2 im_cookbook_234055_user Create embedded parameter string パラメータとして受け取ったソート条件を、3 のタスクで SQL に埋め込むために加工します。 3 im_cookbook_234055_user Get user list SQL を実行してデータを取得します。
1-2. ロジックフロールーティングを作る
- 「ロジックフロールーティング定義一覧」画面を表示してください。
- 「im_cookbook/234055/get_user_list」の編集アイコンをクリックしてください。
- 以下のロジックフロールーティング定義情報が表示されます。IM-BloomMaker のアクションからこのロジックフロールーティングを呼び出します。
2. IM-BloomMaker
リッチテーブルのプロパティを設定します。
各プロパティの詳細は、デザイナ画面のヘルプ、または、ユーザ操作ガイドを参照してください。
IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド
- 「IM-BloomMaker コンテンツ一覧」画面を表示してください。
- ツリーから「intra-mart CookBook」>「im_cookbook_234055」>「im_cookbook_234055_user_list」を選択して「デザイン編集」ボタンをクリックしてください。
- リッチテーブルエレメントを選択してください。
2-1. 「paging」プロパティを「true」にする
- 右ペインの「プロパティ」タブを表示してください。
- 「paging」プロパティのチェックボックスにチェックがついていることを確認してください。
「pagingType」プロパティは「paging」プロパティが「true」の場合のみ有効のため、チェックをつける必要があります。
2-2. 「pagingType」プロパティを「manual」にする
- 「pagingType」プロパティの設定値が「manual」になっていることを確認してください。
「pagingType」プロパティの設定値を「manual」にすることで、リッチテーブルの総件数を「totalCount」プロパティから指定できるようになります。
「pagingType」プロパティの設定値を「auto」にした場合、「dataSource」プロパティに指定したデータの件数がリッチテーブルの総件数として扱われます。
2-3. 「currentPage」プロパティを設定する
- 「currentPage」プロパティの設定値が「$variable.offset」になっていることを確認してください。
リッチテーブルの現在ページは「currentPage」プロパティに指定した変数に格納されます。データの取得開始位置を決めるために使用します。
2-4. 「rowsPerPage」プロパティを設定する
- 「rowsPerPage」プロパティの設定値が「$variable.limit」になっていることを確認してください。
1ページあたりの表示件数は「rowsPerPage」プロパティに指定した変数に格納されます。データの取得件数を決めるために使用します。
2-5. 「totalCount」プロパティを設定する
- 「totalCount」プロパティの設定値が「$variable.countApiResponse.count」になっていることを確認してください。
上記で説明した通り、「pagingType」プロパティの設定値が「manual」の場合は「totalCount」プロパティに指定した値がデータの総件数になります。
変数「$variable.countApiResponse.count」にはデータ件数を取得する API から取得した件数を格納しています。
2-6. 「simpleSearchText」プロパティを設定する
- 「simpleSearchText」プロパティの設定値が「$variable.searchUserCd」になっていることを確認してください。
簡易検索のテキストボックスに入力された内容は「simpleSearchText」プロパティに指定した変数に格納されます。
今回はユーザコードの検索条件として使用しています。
2-7. 「allowSorting」プロパティを設定する
- 「allowSorting」プロパティの設定値が「multiple」になっていることを確認してください。
今回のサンプルでは複数の列で並び替えできるようにしています。
2-8. 「sortConditions」プロパティを設定する
- 「sortConditions」プロパティの設定値が「$variable.sortConditions」になっていることを確認してください。
ソート条件は「sortConditions」プロパティに設定した変数に格納されます。
今回は変数をそのままロジックフローに渡し、ロジックフロー側で SQL に埋め込める形に加工しています。
2-9. 「interactiveNavigationEvent」プロパティを設定する
- 「interactiveNavigationEvent」プロパティの設定値が「Search Process」になっていることを確認してください。
リッチテーブルでページの切り替え、簡易検索、ソート、1ページあたりの表示件数の変更を行うと、「interactiveNavigationEvent」プロパティに設定されたアクションが実行されます。
「Search Process」アクションは、上記の手順でプロパティに設定した値を使ってデータ取得を行うロジックフローを呼び出します。
なお、「currentPage」や「rowsPerPage」プロパティなどに指定した変数の値を直接書き換えた場合、アクションは実行されません。
2-10. データの件数を取得するアクションを作成する
- 右ペインの「アクション」タブを表示してください。
- 「Number of Items Acquisition Process」アクションの編集アイコンをクリックしてください。
- 以下のアクションエディタダイアログが表示されます。
- 各アクションアイテムでは以下の処理を行っています。
No アクションアイテム 説明 1 カスタムスクリプトを実行する 2 のアクションアイテムでロジックフローに渡すパラメータを作成します。 2 IM-LogicDesigner フロールーティング○にリクエストを送信する データの件数を取得するロジックフロールーティングを呼び出します。
2-11. データを取得するアクションを作成する
- 「Search Process」アクションの編集アイコンをクリックしてください。
- 以下のアクションエディタダイアログが表示されます。
- 各アクションアイテムでは以下の処理を行っています。
No アクションアイテム 説明 1 アクション○を実行する 上記の「Number of Items Acquisition Process」アクションを実行します。 2 カスタムスクリプトを実行する 3 のアクションアイテムでロジックフローに渡すパラメータを作成します。 3 IM-LogicDesigner フロールーティング○にリクエストを送信する 1-2 の手順で作成したロジックフロールーティングを呼び出します。
「Number of Items Acquisition Process」アクションで取得したデータ件数が 0 の場合はスキップします。
動作確認
- 「IM-BloomMaker ルーティング定義一覧」画面を表示してください。
- ツリーから「intra-mart CookBook」>「im_cookbook_234055」>「im_cookbook_234055_user_list」を選択して「URLのコピー」アイコンをクリックしてください。
- ブラウザのアドレスバーに URL を貼り付けて画面を表示してください。
- サンプルのユーザ検索画面が表示されます。
- テキストボックスに任意の文字列を入力して「検索」ボタンをクリックしてください。
- 入力した文字列を含むユーザコードのデータのみ表示されます。
- 「クリア」ボタンをクリックしてください。
- 「並べ替え」アイコンをクリックして、「並べ替え設定」ダイアログで任意のソート条件を指定してください。
- ダイアログで指定したソート順でデータがソートされます。
- ページャのページ移動のアイコンをクリックしてください。
- 現在のページに応じたデータがテーブルに表示されます。
- 1ページあたりの表示件数を任意の値に変更してください。
- 選択した件数分のデータがテーブルに表示されます。
いつも思うのですがなぜロケールが英語なんでしょう？
ロケールを日本語とすると、海外のユーザが記事を読んだ際に読めないためです。
本文はブラウザの機能などで翻訳することが可能ですが、画像内の文章は翻訳することが困難です。
画面右下の言語切り替えのプルダウンで機械翻訳を行うことも可能です。
日本国内のお客様にはご不便をおかけしますが、ご理解いただけますようお願いします。