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

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

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

no image

ワークスペースとToDo機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のToDo機 …

カテゴリ単位にIM-FormaDesignerのアプリケーションを管理する方法

このCookbookでは、intra-mart Accel Platform 2019 Summerから利用可能なIM-FormaDesignerの新しいアプリケーション一覧を紹介します。 新しいアプ …

no image

ViewCreatorのヘッダやフッタに配置するリンクのURLに計算結果を埋め込む方法

本記事では、ViewCreatorのヘッダやフッタにリンクを埋め込む際に、関数を利用する方法をご紹介します。 この方法を利用すると、パラメータ文字列に「今日日付」を受け渡すといったことが実現できます。 …

複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプル

このCookBookでは、IM-BloomMaker で作成するアプリケーション画面で複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプル …