CookBook

IM-BloomMaker 複数行明細テーブルのような見た目を実現する方法

投稿日:

この CookBook では複数行明細テーブルのような見た目を実現する方法を紹介します。
今回紹介するのはテーブルではないエレメントである「ボックス(繰り返し)」と「フレックスコンテナ」を組み合わせて、テーブルっぽく見せるものです。
そのため、エレメントのテーブルのようなプロパティの制御はできないことにご注意ください。

完成イメージ

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
このサンプルは、2020 Summer 版以降でインポートできます。

IM-BloomMaker インポートファイル: im_cookbook_204118_im_bloommaker-data

IM-BloomMaker インポートファイルには、以下の定義が含まれています。

コンテンツ定義im_cookbook_204118
ルーティング定義im_cookbook_204118

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

ローカル環境で表示させる場合は、以下の URL にアクセスしてください。
http://localhost:8080/imart/im_cookbook/204118
なおベース URL である以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

前提条件

この CookBook の手順をお手元の環境で実施する場合は、コンテンツ種別「Bulma」のコンテンツを作成し使用してください。

レシピ

  1. マップ型の配列変数を作成する
  2. CSSを設定する
  3. レイアウトを作成する

1. マップ型の配列変数を作成する

複数行明細のテーブルに表示するデータを作成します。

変数タブの「JSON形式で編集」アイコンをクリックし、以下のJSONを張り付けてください。

2. CSS を設定する

フレックスコンテナにテーブルのような枠線を付けるため CSS を設定します。

「CSS編集」アイコンをクリックし、以下の CSS を張り付けてください。

3. レイアウトを作成する

1. コンテナページ配下にコンテナ(レイアウト(Bulma) カテゴリ)を配置します。

2. コンテナの「gap」のプルダウンから「fluid」を選択します。

3. コンテナ内にボックス (レイアウト カテゴリ) を配置します。

4. ボックス内に以下のエレメントを配置します。

  • 見出しレベル3(レイアウト(Bulma) カテゴリ)
  • フレックスコンテナ(レイアウト カテゴリ)
  • ボックス(繰り返し)(繰り返し カテゴリ)

5. 見出しレベル3の「textContent」に「Employee Information」と入力します。
今回作成する複数行明細テーブルのタイトルです。

6. フレックスコンテナの「elementCount」を「4」に変更します。

7. 各フレックスアイテムのクラス名に「border」と入力します。
上で設定した CSS を適用させテーブルのような枠線を付けるためです。

8. 前から順に各フレックスアイテムの「flexBasis」を以下の値に変更します。

  • 100%
  • 30%
  • 30%
  • 40%

9. フレックスコンテナをコピーして ボックス(繰り返し)内に貼り付けます。

10. ボックス配下のフレックスコンテナの「背景色」に「#6785cf」を入力します。
テーブルのヘッダの背景色になります。

11. 各フレックスアイテム内に強調ラベル(汎用 カテゴリ)を配置します。

12. 各強調ラベルの「文字色」に「#eeeeee」を入力します。
テーブルのヘッダの文字色になります。

13. 前から順に各強調ラベルの「textContent」に以下の値を入力します。

  • Employee Number
  • Name
  • Department
  • Role

14. ボックス(繰り返し)の「list」に「$variable.employeeList」をセットします。

15. ボックス (繰り返し) 配下のフレックスコンテナの「背景色」を変数値に変更し、「= $index % 2 == 0 ? '' : '#f0f5f8'」を入力します。
式表現を使用してテーブルデータの偶数行に背景色を設定しています。

16. 各フレックスアイテム内にラベル(汎用 カテゴリ)を配置します。

17. 前から順に各ラベルの「textContent」を変数値に変更し、以下の値を入力します。

  • $variable.employeeList[$index].employeeNumber
  • $variable.employeeList[$index].name
  • $variable.employeeList[$index].department
  • $variable.employeeList[$index].role

手順は以上です。
プレビューを確認すると完成イメージのような複数行明細のテーブルが出来ているはずです。

-CookBook
-

執筆者:


comment

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

関連記事

REST API 経由でジョブネットを起動する方法

この CookBook では、REST API とを経由してジョブネットを実行する方法について紹介しています。 完成サンプル 以下の完成サンプルをダウンロードしてご活用ください。 LogicDesig …

no image

スクリプト開発でのストアドプロシージャの実行方法

intra-mart Accel Platform 2017 Winter(8.0.18) より SharedDatabase, TenantDatabase に executeCallable AP …

no image

Formaの実行画面でセッションを維持するには

このCookbookでは、IM-FormaDesignerの実行画面でセッションを維持する方法を記載します。 この方法を利用すると、通常は時間制限によりタイムアウトしてしまうログインセッションを、自動 …

no image

IM-BloomMaker スプレッドシートのシート全体を DB に保存する

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になったスプレッドシートで、シート全体を DB に保存する方法を紹介します。 スプ …

案件一覧「My検索条件」の活用例

このCookbookでは、intra-mart Accel Platform 2019 Springから利用可能な、案件一覧画面にある「My検索条件」機能を活用し、任意の条件別にブックマークを作成する …