CookBook

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

投稿日:2022-06-09 更新日:

この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」の列の任意のアイコンをクリックしてください。ダイアログでメッセージが表示されます。

なお、本記事の内容をベースに、以下の開発動画を公開しています。
記事と合わせてご確認ください。

【intra-mart】リッチテーブルのセルにアイコンを表示する【ローコード開発】

-CookBook
-

執筆者:


comment

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

関連記事

no image

IM-BloomMaker フォーム部品(Bulma)を使用したバリデーション処理の作成

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になったコンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したバリデー …

no image

Payara のログレイアウトを変更する方法

この CookBook では、Payara のログ出力を変更する方法について紹介しています。 レシピ フォーマッタを実装します。 実装したフォーマッタを適用します。 ログを確認します。 1. フォーマ …

no image

ウォッチ機能のご紹介

このCookBookでは「intra-mart Accel Collaboration」に備わっているウォッチ機能のご紹介です。 各会社様でグループで仕事をする機会が多いと思います。 仕事を行う上で、 …

面グラフの作り方とスプレッドシートとのデータ連携のやり方

このCookBookでは、IM-BloomMaker で作成するアプリケーション画面で面グラフを作成する方法と、グラフエレメントとスプレッドシートのデータ連携のやり方について紹介しています。 IM-B …

BloomMakerでワークフローの一括代理設定画面を作成する

このCookBookでは、BloomMakerで、ワークフローの代理設定を一括で登録する画面を作成してみました。 本稿で紹介のサンプルのように、BloomMakerを利用することで、ちょっとした要件に …