CookBook

IM-BloomMaker 「リッチテーブル」エレメントのサンプル集

投稿日:2020-04-14 更新日:

この CookBook では、intra-mart Accel Platform 2020 Spring から利用可能になった IM-BloomMaker のリッチテーブルエレメントの活用方法について紹介しています。

完成イメージ

  • データエクスポート画面

    リッチテーブルエレメントを利用した、データエクスポート画面のサンプルです。

    動作内容は以下のとおりです。

    1. 一覧データの選択や、簡易検索ができます。
    2. 「Execute export」ボタンをクリックすると、ダイアログが開きます。
    3. ダイアログでは元の画面で選択したデータの一覧が表示されます。
  • データ編集可能な円グラフ

    リッチテーブルエレメントと、円グラフエレメントを利用した、データ編集可能な円グラフのサンプルです。
    円グラフエレメントの詳しい使い方を学びたい方は、以下の記事を参照してください。
    https://dev.intra-mart.jp/cookbook169309/

    動作内容は以下のとおりです。

    1. グラフを選択すると、一覧の対応するデータがハイライトされます。
    2. 一覧のデータを選択すると、対応するグラフがハイライトされます。
    3. 一覧のデータから値を編集すると、対応するグラフのラベルや値が更新されます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

IM-BloomMaker サンプルインポートファイル : im_cookbook_180761_bloommaker.zip

サンプルに含まれる定義情報は以下のとおりです。

種類 定義名 補足説明
コンテンツ im_cookbook_180761_export_screen エクスポート画面
ルーティング定義 im_cookbook_180761_export_screen 上記BloomMakerコンテンツに対するルーティング定義
コンテンツ im_cookbook_180761_table_and_graph データ編集可能な円グラフ
ルーティング定義 im_cookbook_180761_table_and_graph 上記BloomMakerコンテンツに対するルーティング定義

サンプルは以下の環境で動作を確認できます。

  • intra-mart Accel Platform(Advanced) 2020 Spring(8.0.25)以降のバージョンであること

レシピ

データエクスポート画面

  1. エレメントのプロパティを設定する
  2. テーブルデータ選択時のアクションを設定する

エレメントの配置や変数・アクションの作成などは、この CookBook の主題ではないため省略します。
添付のサンプルコンテンツ「im_cookbook_180761_export_screen」を利用してください。

エレメントのプロパティを設定する

リッチテーブルエレメントに設定しているプロパティを解説します。

  • headerRowString プロパティ

    テーブルのヘッダに表示する文字列を指するプロパティです。
    マップ型の変数のみ指定が可能で、配下にある変数の値がテーブルのヘッダに表示されます。
    サンプルではエクスポート画面のテーブル、確認ダイアログのテーブルの両方に以下の構造の変数を指定しています。

  • dataSource プロパティ

    テーブルに表示するデータを指定するプロパティです。
    マップ型の配列の変数のみ指定可能で、配下にある変数の値がテーブルに表示されます。
    headerRowString プロパティとキー名が一致している変数の値がテーブルに表示されます。
    サンプルでは二つのテーブル両方に以下の構造の変数を指定しています。

    エクスポート画面のテーブルと確認ダイアログのテーブルでは表示するデータが違うため、同じ構造の別々の変数を指定しています。

  • allowSorting プロパティ

    テーブルデータのソート可否を指定するプロパティです。
    サンプルでは二つのテーブル両方に固定値のチェックボックスにチェックを入れ、テーブルデータのソートを可能にしています。

  • paging プロパティ

    ページング機能の有無を指定するプロパティです。
    サンプルでは二つのテーブル両方に固定値のチェックボックスにチェックを入れ、テーブルの下にページャを表示しています。

  • rowsPerPage プロパティ

    デフォルトの1ページあたりの表示件数を指定するプロパティです。
    二つのテーブル両方に10 を指定しています。

  • rowsPerPageOptions プロパティ

    ページャの表示件数のプルダウンの値を指定するプロパティです。
    サンプルでは二つのテーブル両方に10,20,50,100 を指定しています。

  • allowSimpleSearch プロパティ

    簡易検索機能の有無を指定指定するプロパティです。
    サンプルではエクスポート画面のテーブルに固定値のチェックボックスにチェックを入れ、簡易検索を可能にしています。

  • selectionType プロパティ

    行選択のタイプを指定するプロパティです。
    「none(行選択不可)」、「single(単一選択)」、「multiple(複数選択)」が指定できます。
    サンプルでは以下のとおりに指定しています。

    エレメント 設定値
    エクスポート画面のテーブル multiple
    確認ダイアログのテーブル none
  • selected プロパティ

    選択状態のテーブルデータのインデックスを格納する変数を指定するプロパティです。
    テーブル上で選択状態になっているデータのインデックスが、指定した変数に格納されます。
    サンプルのエクスポート画面のテーブルは selectionType プロパティに「multiple」を設定しているため、整数型の配列の変数を指定しています。

  • tableDataClickEvent プロパティ

    テーブルデータをクリックした際に実行するアクションを指定するプロパティです。
    サンプルではエクスポート画面のテーブルに、「Set result data」という名前のアクションを指定しています。
    アクションの詳細については、後述の「テーブルデータ選択時のアクションを設定する」の項を参照してください。

  • allowEditing プロパティ

    テーブルデータの編集可否を指定するプロパティです。
    サンプルでは二つのテーブルで両方とも編集をする必要がないため、固定値のチェックボックスのチェックを外しています。

  • 「幅・高さ」カテゴリのプロパティ

    サンプルではエクスポート画面のテーブル、確認ダイアログのテーブルに以下のとおりに設定しています。

    • 横幅: 100%

    • 縦幅: 300px

    リッチテーブルエレメントの縦幅プロパティを設定すると、データの件数が多い場合でもテーブル自体の縦幅は変わらず、テーブル内でスクロール表示されます。

テーブルデータ選択時のアクションを設定する

エクスポート画面のテーブルで tableDataClickEvent プロパティに指定している「Set result data」アクションを解説します。

サンプルでは、以下の内容のカスタムスクリプトを実行しています。

選択状態のテーブルデータのインデックスから、選択状態のテーブルデータが取得可能です。
取得したデータを、確認ダイアログのテーブルで dataSource プロパティに指定している変数に追加しています。

データ編集可能な円グラフ

  1. エレメントのプロパティを設定する

添付のサンプルコンテンツ「im_cookbook_180761_table_and_graph」を利用してください。

エレメントのプロパティを設定する
  • headerRowString プロパティ

    サンプルでは以下の構造の変数を指定しています。

  • dataSource プロパティ

    サンプルでは円グラフエレメントの seriesData プロパティと共通の、以下の構造の変数を指定しています。

  • paging プロパティ

    サンプルでは固定値のチェックボックスのチェックを外し、ページング機能を無しにしています。

  • allowSimpleSearch プロパティ

    サンプルでは固定値のチェックボックスのチェックを外し、簡易検索機能を無しにしています。

  • selectionType プロパティ

    サンプルでは「multiple」を指定し、複数選択を可能にしています。

  • selected プロパティ

    サンプルでは円グラフエレメントの selected プロパティと共通の、整数型の配列の変数を指定しています。
    グラフとテーブルで共通の変数を利用しているため、どちらを選択しても互いに対応するデータが選択状態になります。

  • allowEditing プロパティ

    サンプルでは固定値のチェックボックスにチェックを入れ、テーブルデータを編集可能にしています。
    グラフとテーブルで共通のデータを利用しているため、テーブルデータを編集することで対応するグラフの値も更新されます。

-CookBook
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

画面にインジケータ(ロード中のアイコン)を表示する

任意の処理を行った際にインジケータを表示する方法をご紹介します。 インジケータは、アイコンを用いて任意の処理中であること(ロード中であること)を画面に表示します。 インジケータを利用することで、任意の …

no image

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してくだ …

BloomMakerでワークフロー処理モーダルを利用してWorkflowコンテンツを作成する

このCookBookでは、2020 Spring(8.0.25)でリリースした下記の機能を利用して、Workflowのコンテンツを作成する方法を紹介します。 IM-BloomMakerのアクションに、 …

no image

Formaのスクリプトから処理対象者を制御するには

このCookBookでは、スクリプトを利用してIM-Workflowの動的ノード(動的承認、縦配置、横配置)の処理対象者を制御する方法をご紹介します。 スクリプトから動的処理対象者設定機能を利用するこ …

no image

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。 intra-mart Accel Platform では、画面上に配置したUI部品の …

RSSRSSRSSRSS