Developer Portal

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

公開日: 2020-04-14 / カテゴリ: CookBook

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

完成イメージ

  • データエクスポート画面リッチテーブルエレメントを利用した、データエクスポート画面のサンプルです。 動作内容は以下のとおりです。
    1. 一覧データの選択や、簡易検索ができます。
    2. 「Execute export」ボタンをクリックすると、ダイアログが開きます。
    3. ダイアログでは元の画面で選択したデータの一覧が表示されます。
  • データ編集可能な円グラフリッチテーブルエレメントと、円グラフエレメントを利用した、データ編集可能な円グラフのサンプルです。 円グラフエレメントの詳しい使い方を学びたい方は、以下の記事を参照してください。 /cookbook/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 プロパティテーブルのヘッダに表示する文字列を指するプロパティです。 マップ型の変数のみ指定が可能で、配下にある変数の値がテーブルのヘッダに表示されます。 サンプルではエクスポート画面のテーブル、確認ダイアログのテーブルの両方に以下の構造の変数を指定しています。

    { "dataName": "Data name", "createdUserCode": "Created by", "recordDate": "Record Date", "version": "Version", "editable": "Editable" }

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

    [ { "dataName": null, "createdUserCode": null, "recordDate": null, "version": null, "editable": null } ]

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

  • 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」アクションを解説します。 サンプルでは、以下の内容のカスタムスクリプトを実行しています。

$variable.resultData = [];

const selectedDataIndex = $variable.selectedDataIndex; selectedDataIndex.forEach((index) => { const selectedDataPath = `$variable.data[${index}]`; const selectedData = $im.resolve(selectedDataPath); $variable.resultData.push(selectedData); });

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

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

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

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

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

  • headerRowString プロパティサンプルでは以下の構造の変数を指定しています。

    { "name": "Name", "y": "Number of people" }

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

    [ { "name": "groupA", "y": 500 }, { "name": "groupB", "y": 450 }, { "name": "groupC", "y": 400 }, { "name": "groupD", "y": 350 }, { "name": "groupE", "y": 300 }, { "name": "groupF", "y": 250 }, { "name": "groupG", "y": 200 }, { "name": "groupH", "y": 150 }, { "name": "groupI", "y": 100 }, { "name": "groupJ", "y": 50 } ]

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

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

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

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

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