CookBook

IM-BloomMaker リッチテーブルのセルにアイコンを表示する方法

投稿日:

このCookBookでは、リッチテーブルのセルに Font Awesome 5 や CSS Sprite Image List のアイコンを表示する方法について紹介しています。
intra-mart Accel Platform 2021 Winter 以前のバージョンではリッチテーブルにアイコンを表示できないのでご注意ください。

インポートファイル

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

インポートファイル:cookbook_209277_im_bloommaker-data.zip

また、CookBook の手順通りに操作してもうまくいかない場合は、以下の完成サンプルを参考にしてください。

完成サンプルのインポートファイル:cookbook_209277_im_bloommaker-data_completed_sample.zip

目次

  1. はじめに
  2. セルにアイコンを表示する方法(一括指定)
  3. セルにアイコンを表示する方法(個別指定)
  4. アイコンをクリックした時のアクションを設定する方法

1. はじめに

リッチテーブルにアイコンを表示するには、「columnSettings」プロパティを使用します。
このプロパティでは、リッチテーブルの列のデータ型や、その他のオプションを指定できます。
「columnSettings」プロパティについては、デザイナ画面でのヘルプ、または、ユーザ操作ガイドを参照してください。

IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド

コンテンツ種別が「imui」の場合、リッチテーブルのセルには CSS Sprite Image List のアイコンを表示できます。
コンテンツ種別が「Bulma」の場合、リッチテーブルのセルには Font Awesome 5(Free) のアイコンを表示できます。

2. セルにアイコンを表示する方法(一括指定)

一括指定でアイコンを表示する方法について説明します。

  • コンテンツ一覧画面を表示してください。
  • 使用したいコンテンツ種別に応じてコンテンツツリーから以下のいずれかのコンテンツを選択してください。
    • コンテンツ種別「imui」を使用したい場合
      • 「intra-mart CookBook」>「im_cookbook_209277」>「im_cookbook_209277_imui」>「im_cookbook_209277_imui」
    • コンテンツ種別「Bulma」を使用したい場合
      • 「intra-mart CookBook」>「im_cookbook_209277」>「im_cookbook_209277_bulma」>「im_cookbook_209277_bulma」

  • 「デザイン編集」ボタンをクリックし、デザイナ画面を開いてください。
  • 「Icon」と「Icon with link」の列を持つリッチテーブルが配置されています。
    ここでは「Icon」と「Icon with link」の列にアイコンを表示します。

まずは、「Icon」の列にアイコンを表示する手順を説明します。

  • 右ペインの「変数」タブを開いてください。
  • 「JSON形式で編集」アイコンをクリックしてください。「JSONエディタ」ダイアログが表示されます。
  • 「columnSettings」の配下に以下の変数を追加してください。
    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合

    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合

  • 「決定」ボタンをクリックして「JSONエディタ」ダイアログを閉じてください。
  • リッチテーブルを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「エレメント固有」カテゴリ内の「columnSettings」プロパティに「$variable.columnSettings」を指定してください。
  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • リッチテーブルの「Icon」の列のセルにアイコンが表示されていることを確認してください。
    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合
    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合
  • プレビュー画面を閉じてください。

次は、「Icon with link」の列にリンク付きのアイコンを表示する手順を説明します。

  • 右ペインの「変数」タブを開いてください。
  • 「JSON形式で編集」アイコンをクリックしてください。「JSONエディタ」ダイアログが表示されます。
  • 「columnSettings」の配下に以下の変数を追加してください。
    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合

    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合

  • 「dataSource」の配下にある「column4」の代入値に、任意の URL を指定してください。
  • 「決定」ボタンをクリックして「JSONエディタ」ダイアログを閉じてください。
  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • リッチテーブルの「Icon with link」の列のセルにアイコンが表示されていることを確認してください。
    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合
    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合
  • 「Icon with link」の列のセルのアイコンをクリックしてください。
    指定した URL が新しいタブ、または、別のウインドウで表示されます。

二つのアイコンを重ねて表示する(Bulma 限定)

コンテンツ種別が「Bulma」の場合、二つのアイコンを重ねて表示できます。
二つのアイコンを重ねて表示する手順を説明します。

  • 右ペインの「変数」タブを開いてください。
  • 「JSON形式で編集」アイコンをクリックしてください。「JSONエディタ」ダイアログが表示されます。
  • 「columnSettings」の配下にある「column3」を以下のように変更してください。
  • 「columnSettings」の配下にある「column4」を以下のように変更してください。

  • 「決定」ボタンをクリックして「JSONエディタ」ダイアログを閉じてください。
  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • アイコンが重なって表示されていることを確認してください。

3. セルにアイコンを表示する方法(個別指定)

セルごとに表示するアイコンやパラメータを指定する方法について説明します。

  • コンテンツ一覧画面を表示してください。
  • 使用したいコンテンツ種別に応じてコンテンツツリーから以下のいずれかのコンテンツを選択してください。
    • コンテンツ種別「imui」を使用したい場合
      • 「intra-mart CookBook」>「im_cookbook_209277」>「im_cookbook_209277_imui」>「im_cookbook_209277_imui」
    • コンテンツ種別「Bulma」を使用したい場合
      • 「intra-mart CookBook」>「im_cookbook_209277」>「im_cookbook_209277_bulma」>「im_cookbook_209277_bulma」
  • 「デザイン編集」ボタンをクリックし、デザイナ画面を開いてください。
  • 「Icon」と「Icon with link」の列を持つリッチテーブルが配置されています。
    ここでは「Icon」と「Icon with link」の列にアイコンを表示します。

まずは、「Icon」の列にアイコンを表示する手順を説明します。

  • 右ペインの「変数」タブを開いてください。
  • 「JSON形式で編集」アイコンをクリックしてください。「JSONエディタ」ダイアログが表示されます。
  • 「columnSettings」の配下に以下の変数を追加してください。

  • 「dataSource」の配下にある「column3」を以下のように変更してください。
    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合
      • 1個目の要素
      • 2個目の要素

    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合
      • 1個目の要素

      • 2個目の要素

  • 「決定」ボタンをクリックして「JSONエディタ」ダイアログを閉じてください。
  • リッチテーブルを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「エレメント固有」カテゴリ内の「columnSettings」プロパティに「$variable.columnSettings」を指定してください。
  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • リッチテーブルの「Icon」の列のセルにアイコンが表示されていることを確認してください。
    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合
    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合
  • プレビュー画面を閉じてください。

次は、「Icon with link」の列にリンク付きのアイコンを表示する手順を説明します。

  • 右ペインの「変数」タブを開いてください。
  • 「JSON形式で編集」アイコンをクリックしてください。「JSONエディタ」ダイアログが表示されます。
  • 「columnSettings」の配下に以下の変数を追加してください。

  • 「dataSource」の配下にある「column4」を以下のように変更してください。
    「href」の代入値には任意の URL を指定してください。

    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合
      • 1個目の要素
      • 2個目の要素

    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合
      • 1個目の要素
      • 2個目の要素

  • 「決定」ボタンをクリックして「JSONエディタ」ダイアログを閉じてください。
  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • リッチテーブルの「Icon with link」の列のセルにアイコンが表示されていることを確認してください。
    • 「im_cookbook_209277_imui」(コンテンツ種別が imui)の場合
    • 「im_cookbook_209277_bulma」(コンテンツ種別が Bulma)の場合
  • 「Icon with link」の列のセルのアイコンをクリックしてください。
    1行目をクリックした場合は、href に指定した URL が新しいタブ、または、別のウインドウで表示されます。
    2行目をクリックした場合は、href に指定した URL に遷移します。

二つのアイコンを重ねて表示する(Bulma 限定)

コンテンツ種別が「Bulma」の場合、二つのアイコンを重ねて表示できます。
二つのアイコンを重ねて表示する手順を説明します。

  • 右ペインの「変数」タブを開いてください。
  • 「JSON形式で編集」アイコンをクリックしてください。「JSONエディタ」ダイアログが表示されます。
  • 「dataSource」の配下にある1個目の「column3」を以下のように変更してください。
  • 「dataSource」の配下にある1個目の「column4」を以下のように変更してください。

  • 「決定」ボタンをクリックして「JSONエディタ」ダイアログを閉じてください。
  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • アイコンが重なって表示されていることを確認してください。

4. アイコンをクリックした時のアクションを設定する方法

アイコンをクリックした時にアクションを実行する方法を説明します。
リッチテーブルの「tableDataClickEvent」プロパティと「clickedCell」プロパティを組み合わせてアイコンをクリックした時にアクションの実行を行います。

  • 右ペインの「アクション」タブを開いてください。
  • 「Sample action」アクションの「編集」アイコンをクリックして「アクションエディタ」ダイアログを開いてください。
  • アクションアイテム「カスタムスクリプトを実行する」の上に「ラベル○」を配置してください。
  • ラベル名に「Column check」を指定してください。
  • 「実行後に後続処理を続行する」のアイコンをクリックし、「実行後にアクションを終了する」に変更してください。
  • 実行条件「変数○が○でないとき」を、アクションアイテム「ラベル○」に配置してください。
  • 「比較元」に「$variable.clickedCell.key」を指定してください。
  • 「比較先」に「column3」を指定してください。
  • 「決定」ボタンをクリックして「アクションエディタ」ダイアログを閉じてください。
  • リッチテーブルを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「エレメント固有」カテゴリ内の「tableDataClickEvent」プロパティに「Sample action」を指定してください。
  • 「エレメント固有」カテゴリ内の「clickedCell」プロパティに「$variable.clickedCell」を指定してください。
  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • 「Icon」の列の任意のアイコンをクリックしてください。ダイアログでメッセージが表示されます。

-CookBook
-

執筆者:


comment

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

関連記事

no image

IM-BloomMaker 排他制御エレメントでロックを取得したユーザのみが編集できる画面の作成方法

このCookBookでは、「排他制御」エレメントを利用して、ロックを取得したユーザのみ編集できる画面を作成する方法について紹介します。 「排他制御」エレメントは 2021 Winter でリリースした …

no image

後処理プログラムで画面アイテム「ファイルアップロード」にバリデーションを実行する方法

このCookbookでは、画面アイテム「ファイルアップロード」に添付されたファイルをバリデーションする方法を紹介します。 後処理プログラムを使用してバリデーションを実行することで、画面に表示するエラー …

no image

IM-BloomMaker 「マルチファイルアップロード」エレメントの利用方法

このCookBookでは、 2021 Spring でリリースした「マルチファイルアップロード」エレメントの利用方法について説明していきます。 登録画面でアップロードしたファイルを別画面でダウンロード …

no image

IM-BIS アクション設定の「条件」の書き方

このCookbookでは、アクション設定の条件式の書き方を説明します。 この方法により入力値に応じてアクション設定の外部連携や入力モード変換などのイベントの実行をコントロールすることができます。 完成 …

no image

グリッドテーブルの列タイプ「カスタム」を利用した場合にマルチセレクトがトグルされないようにする方法

このCookBookでは、グリッドテーブルの列タイプ「カスタム」を利用した場合に、マルチセレクトがトグルされないようにする方法を説明します。 グリッドテーブルでは、行内で参照表示となっている部分をクリ …