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

物理マシン 1 台で Resin のクラスタリング環境を構築する

この CookBook では、物理マシン 1 台で Resin のクラスタリング環境を構築する手順について紹介しています。 Resin のクラスタリングを構築するには通常複数台のマシンが必要ですが、D …

no image

IMBox に投稿種別を追加する方法(iframe)

この CookBook では、IMBox に投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミ …

no image

IM-BloomMaker スプレッドシート 特定のセルを編集できないようにするには?

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になった「スプレッドシート」エレメントで、特定のセルを編集できないようにする方法を …

no image

IFTTT と連携して LogcDesigner のフローを呼び出す方法

この CookBook では、IFTTT と連携して LogcDesigner のフローを呼び出す方法について紹介しています。 Twitter から「intra-mart」を含むつぶやきを検索し、IM …

ワークフローの案件削除時にBIS/Formaの関連データも削除する方法

このCookBookでは、ワークフローの案件削除時にBIS/Formaの関連データも併せて削除する方法について紹介しています。 BIS/Formaで作成したワークフローには、機能ごとに個別で管理するト …