CookBook

リッチテーブルの任意の列を非表示にする方法

投稿日:

このCookBookでは、リッチテーブルの任意の列を非表示にする方法について紹介しています。
列の非表示は intra-mart Accel Platform 2022 Spring から可能です。
intra-mart Accel Platform 2021 Winter 以前のバージョンではできないので注意してください。

サンプル

この CookBook で使用するサンプルのインポートファイルです。
ダウンロードして IM-BloomMaker のインポート画面からインポートしてください。

im_cookbook_209579_im_bloommaker-data.zip

上記のサンプルは、intra-mart Accel Platform 2022 Spring および intra-mart Accel Platform 2022 Winter の環境で動作することを確認しています。

レシピ

  1. 変数を作成する
  2. リッチテーブルのプロパティを指定する
  3. 動的に表示・非表示を切り替える(intra-mart Accel Platform 2022 Winter 以降)
  4. 動的に表示・非表示を切り替える(intra-mart Accel Platform 2022 Spring)

1. 変数を作成する

  • 上記の「サンプル」のインポートファイルをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
  • IM-BloomMaker のコンテンツ一覧画面を表示してください。
  • 「intra-mart CookBook」>「im_cookbook_209579」>「im_cookbook_209579」のコンテンツを選択し、デザイナ画面を開いてください。
  • 右ペインの「変数」タブの「JSON形式で編集」アイコンをクリックしてください。
  • 以下の JSON を JSON エディタに貼り付けて変数を作成してください。

2. リッチテーブルのプロパティを指定する

  • 「リッチテーブル」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「リッチテーブル」エレメントのプロパティを以下の通りに設定してください。
    カテゴリ プロパティ 設定値
    エレメント固有 headerRowString $variable.headerRowString
    エレメント固有 dataSource $variable.dataSource
    エレメント固有 columnSettings $variable.columnSettings
  • 「リッチテーブル」エレメントに「User code」「User name」「Membership department」の3つの列が表示されていることを確認してください。
  • 右ペインの「変数」タブの「JSON形式で編集」アイコンをクリックしてください。
  • 「columnSettings」>「department」>「hiddenColumn」の代入値を「true」に変更し、「決定」ボタンをクリックしてください。
  • 「リッチテーブル」エレメントの「Membership department」の列が非表示になっていることを確認してください。

    リッチテーブルの列の表示・非表示を切り替えるには、「columnSettings」プロパティの「hiddenColumn」オプションを使用します。「hiddenColumn」に「true」を指定すると、対象の列が非表示になります。
    「columnSettings」プロパティについては、デザイナ画面でのヘルプ、または、以下を参照してください。
    IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド

3. 動的に表示・非表示を切り替える(intra-mart Accel Platform 2022 Winter 以降)

intra-mart Accel Platform 2022 Spring ではこの方法で動的に表示・非表示を切り替えることはできません。
  • 「Hide columns」の下にある左側の「チェックボックス」エレメントを選択してください。
  • 選択した「チェックボックス」エレメントのプロパティを以下の通りに設定してください。
    カテゴリ プロパティ ラジオボタン 設定値
    エレメント固有 textContent 変数値 $variable.headerRowString.userCd
    エレメント固有 checked 変数値 $variable.columnSettings.userCd.hiddenColumn
  • 「Hide columns」の下にある中央の「チェックボックス」エレメントを選択してください。
  • 選択した「チェックボックス」エレメントのプロパティを以下の通りに設定してください。
    カテゴリ プロパティ ラジオボタン 設定値
    エレメント固有 textContent 変数値 $variable.headerRowString.name
    エレメント固有 checked 変数値 $variable.columnSettings.name.hiddenColumn
  • 「Hide columns」の下にある右側の「チェックボックス」エレメントを選択してください。
  • 選択した「チェックボックス」エレメントのプロパティを以下の通りに設定してください。
    カテゴリ プロパティ ラジオボタン 設定値
    エレメント固有 textContent 変数値 $variable.headerRowString.department
    エレメント固有 checked 変数値 $variable.columnSettings.department.hiddenColumn
  • プレビュー画面を開いてください。
  • 「Hide columns」の下の任意のチェックボックスをクリックしてください。チェックをつけるとリッチテーブルの対象の列が非表示になり、チェックを外すと列が表示されます。
  • うまく動作しない場合は、サンプルのインポートファイルに含まれている「im_cookbook_209579_final_version (2022 Winter)」のコンテンツを参照してください。

3. 動的に表示・非表示を切り替える(intra-mart Accel Platform 2022 Spring)

  • 右ペインの「変数」タブの「JSON形式で編集」アイコンをクリックしてください。
  • 以下の変数を追加し、「決定」ボタンをクリックしてください。

  • 右ペインの「アクション」タブの「新規作成」アイコンをクリックしてください。
  • アクションアイテム「カスタムスクリプトを実行する」を配置してください。
  • スクリプトエリアに以下のコードを貼り付けてください。
  • アクション名を「Toggle column hiding」に変更し、「決定」ボタンをクリックしてください。
  • 「Hide columns」の下にある左側の「チェックボックス」エレメントを選択してください。
  • 選択した「チェックボックス」エレメントのプロパティを以下の通りに設定してください。
    カテゴリ プロパティ ラジオボタン 設定値
    エレメント固有 textContent 変数値 $variable.headerRowString.userCd
    エレメント固有 checked 変数値 $variable.hiddenUserCd
    イベント クリック時 - Toggle column hiding
    イベント 二度押し防止 - オフ
  • 「Hide columns」の下にある中央の「チェックボックス」エレメントを選択してください。
  • 選択した「チェックボックス」エレメントのプロパティを以下の通りに設定してください。
    カテゴリ プロパティ ラジオボタン 設定値
    エレメント固有 textContent 変数値 $variable.headerRowString.name
    エレメント固有 checked 変数値 $variable.hiddenName
    イベント クリック時 - Toggle column hiding
    イベント 二度押し防止 - オフ
  • 「Hide columns」の下にある右側の「チェックボックス」エレメントを選択してください。
  • 選択した「チェックボックス」エレメントのプロパティを以下の通りに設定してください。
    カテゴリ プロパティ ラジオボタン 設定値
    エレメント固有 textContent 変数値 $variable.headerRowString.department
    エレメント固有 checked 変数値 $variable.hiddenDepartment
    イベント クリック時 - Toggle column hiding
    イベント 二度押し防止 - オフ
  • プレビュー画面を開いてください。
  • 「Hide columns」の下の任意のチェックボックスをクリックしてください。チェックをつけるとリッチテーブルの対象の列が非表示になり、チェックを外すと列が表示されます。
  • うまく動作しない場合は、サンプルのインポートファイルに含まれている「im_cookbook_209579_final_version (2022 Spring)」のコンテンツを参照してください。

-CookBook
-

執筆者:


comment

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

関連記事

no image

Docker Swarm を利用して Payara のクラスタリングを構築する。

この CookBook では、Docker Swarm を利用して Payara のクラスタリングを構築する手順について紹介しています。 intra-mart Accel Platform のクラスタ …

no image

IM-BloomMaker でウィザード形式の設定画面の作り方

この CookBook では、IM-BloomMaker を使用して、ウィザード形式で設定を進めていくような画面を作成する方法を紹介します。 完成イメージ 完成サンプル 以下の完成サンプルをダウンロー …

no image

Payara blog のご紹介

この CookBook では Payara のブログについて紹介したいと思います。 以下の URL で Payara に関する様々な記事が投稿されています。 https://blog.payara.f …

no image

外部システムから IM-Notice に通知を送る方法

この CookBook では、intra-mart Accel Platform 8.0.14 2016 Summer から導入された IM-Notice への通知タスクを利用して、外部システムから …

IM-BloomMaker 画面操作後に入力規則のチェックが行われるフォームの作成

変数の入力規則のチェックは画面表示後すぐに行われ、入力規則に反している場合はエラーが表示されます。 このCookBookでは intra-mart Accel Platform 2020 Summer …