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

この 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)以降のバージョンであること

レシピ

データエクスポート画面

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

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

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

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

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

JSON

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

1
2
3
4
5
6
7

{
  "dataName": "Data name",
  "createdUserCode": "Created by",
  "recordDate": "Record Date",
  "version": "Version",
  "editable": "Editable"
}
dataSource プロパティ
テーブルに表示するデータを指定するプロパティです。
マップ型の配列の変数のみ指定可能で、配下にある変数の値がテーブルに表示されます。
headerRowString プロパティとキー名が一致している変数の値がテーブルに表示されます。
サンプルでは二つのテーブル両方に以下の構造の変数を指定しています。

JSON

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

1
2
3
4
5
6
7
8
9

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

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

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

エクスポート画面のテーブルで 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);
});

$variable.resultData = [];

const selectedDataIndex = $variable.selectedDataIndex;

selectedDataIndex.forEach((index) => {

const selectedDataPath = `$variable.data[${index}]`;

const selectedData = $im.resolve(selectedDataPath);

$variable.resultData.push(selectedData);

});

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

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

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

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

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

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

JSON

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

1
2
3
4

{
"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
  }
]

[

{

"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 プロパティ

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