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

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

関連記事

IM-BloomMaker フォーム部品(Bulma)のフィールド、水平フィールドの利用方法

この CookBook では、intra-mart Accel Platform 2020 Summer から利用可能になった Bulma コンテンツのフォーム部品(Bulma)のフィールド、水平フィ …

no image

スクリプト開発モデルで作成した1つのページソースを複数の画面で利用する

このCookBookでは、任意のスクリプト開発モデルプログラムをコールして部分ページソース挿入を行う方法を紹介します。 部分ページソース挿入は<imart type=”include”>タ …

差戻し先ノードの処理対象者を再展開するフローを作成する方法

このCookBookでは、差戻し先ノードの処理対象者を再展開するフローを作成する方法について紹介しています。 IM-Workflowの仕様として、差戻し先ノードではそのノードを以前に処理した人のみが再 …

no image

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

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

IM-BloomMaker セルが結合されたテーブルの作成方法

このCookBookでは、セルが結合されたテーブルのような見た目を作成する方法をご紹介いたします。今回は簡単にセルの結合を実現するため、テーブル系のエレメントの代わりにコンテンツ種別「Bulma」の「 …