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

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

関連記事

差戻し先ノードの処理対象者を再展開するフローを作成する方法

このCookBookでは、差戻し先ノードの処理対象者を再展開するフローを作成する方法について紹介しています。 IM-Workflowの仕様として、差戻し先ノードではそのノードを以前に処理した人のみが再 …

no image

スクリプト開発でのCSRF対策(formタグ編)

Cross Site Request Forgery(CSRF)とは、閲覧者に不正にHTTPリクエストを送信させ、攻撃者の意図した処理を実行させる攻撃手法です。 このCookBookでは、スクリプト開 …

標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する

このCookBookでは、標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する方法について紹介しています。 本稿では、表示する項目が多く縦長い画面で下へスクロールすると右下に「先頭へ戻る」ボタン …

no image

デバッグサーバ起動時に出力されるコンソールの情報をファイル出力する方法

このCookBookでは、e Builder でデバッグサーバの利用時にコンソールに出力された内容を、別途指定したファイルに出力する方法について紹介しています。 完成イメージ 1. 指定したファイルに …

no image

Payara の Docker を作成する。

この CookBook では、Payara の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Payara の Docker イメージを作成します 実行します 1. …

RSSRSSRSSRSS