CookBook

IM-BloomMaker TreeViewの作成方法

投稿日:

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になったコンテンツ種別「Bulma」で
TreeViewのような動きをするサンプルの作成方法を紹介します。

完成イメージ

各アイテム(=ノード)の左側のボタンをクリックすることでツリーを開閉することができます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートデータ : cookbook_190350_bloommaker-data
IM-BloomMaker のインポート画面からインポートしてください。

レシピ

  1. エレメントの配置

  2. 変数の作成

  3. 初期表示の設定

  4. アクションの作成

  5. ツリー表示の設定

1. エレメントの配置

  1. コンテンツ種別「Bulma」のコンテンツを作成し、デザイナ画面を開いてください。

  2. 「繰り返し(Bulma)」カテゴリにある「テーブルコンテナ(繰り返し)」を配置してください。

  3. 「テーブルコンテナ(繰り返し)」の中ある「テーブル(繰り返し)」を選択して、以下のプロパティを設定してください。

    • showHeader(固定値):チェックを外す
    • hoverable(固定値):チェックを外す
    • columnCount:1
  4. 「レイアウト」カテゴリにある「フレックスコンテナ」を配置してください。

  5. 「フレックスコンテナ」を選択して、以下のプロパティを設定してください。

    • alignItems(固定値):center
    • elementCount:2
  6. 左側の「フレックスアイテム」を選択して、以下のプロパティを設定してください。
    • flexGrow:0
  7. 「フォーム部品(Bulma)」カテゴリにある「ボタン」を左側の「フレックスアイテム」の中に配置し、
    「汎用」カテゴリにある「ラベル」を右側の「フレックスアイテム」の中に配置してください。

これで必要なエレメントの配置は完了しました。

2. 変数の作成

ここでは、以下の変数を作成していきます。

変数 説明
root
childNode
grandChildNode_1
grandChildNode_2
ノードの情報を格納する変数です。
tree
childTree
ツリーの情報を格納する変数です。
selectedParentId クリックしたノードのIDを格納する変数です。この値によってツリーの情報が更新されます。
  1. 「変数」タブをクリックし、プルダウンの「変数」が選択されていることを確認してから「JSON形式で編集」アイコンをクリックしてください。

  2. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックしてください。

    root、childNode、grandChildNode_1、grandChildNode_2について、それぞれのパラメータの意味は以下のとおりです。

    パラメータ 説明
    id ノードを一意に識別するID
    parentId 親ノードのID
    name ノードの表示名
    childFlag 子ノードを持っているか

3. 初期表示の設定

  1. 「テーブル(繰り返し)」を選択し、以下のプロパティを設定してください。
    • list:$variable.tree
  2. 「ボタン」の中にある「ボタン要素」を選択し、以下のプロパティを設定してください。
    • textContent(固定値):(データなし)
    • color(固定値):white
    • leftIconClass(変数値):$variable.tree[$index].iconClass

  3. 「ラベル」を選択して、以下のプロパティを設定してください。
    • textContent(変数値):$variable.tree[$index].name
  4. 「アクション」タブをクリックし、「新規作成」アイコンをクリックしてください。
    アクション名は「Initialize」としてください。

  5. 「標準」カテゴリの「変数◯に◯を代入する」を配置してください。

  6. 代入先に$variable.tree、代入元に変数値$variable.rootを設定してください。

  7. 「標準」カテゴリの「カスタムスクリプトを実行する」を配置し、以下のコードを貼り付けてください。

  8. 「コンテナを選択」アイコンをクリックし、イベントのページ読み込み時に先程作成したアクション「Initialize」を設定してください。

  9. プレビューで確認します。
    まずは初期値の「root」を表示することができました。

4. アクションの作成

ここでは、以下のアクションを作成していきます。

アクション 説明
Set tree data 子ノードの情報をツリーにセットするアクションです。「Open/Close tree」内で利用します。
Open/Close tree ボタンをクリックしたときに呼ばれるアクションです。ツリーの開閉の設定を行います。
  1. 「アクション」タブをクリックし、「新規作成」アイコンをクリックしてください。

  2. アクション名は「Set tree data」とし、
    「標準」カテゴリの「変数◯に◯を代入する」を配置してください。

  3. 代入先に$variable.childTree、代入元に変数値$variable.childNodeを設定してください。

  4. 「実行条件タブ」の「標準」カテゴリから、「変数◯が◯のとき」を配置してください。

  5. 比較元に$variable.selectedParentId、比較先に固定値rootを設定してください。

  6. 「変数◯に◯を代入する」をさらに2つ配置してください。

  7. 以下のように設定してください。

    • 変数$variable.childTreeに変数値$variable.grandChildNode_1を代入する
      • 実行条件:変数$variable.selectedParentIdが固定値node_1のとき
    • 変数$variable.childTreeに変数値$variable.grandChildNode_2を代入する
      • 実行条件:変数$variable.selectedParentIdが固定値node_2のとき
  8. 「新規作成」アイコンをクリックしてください。

  9. アクション名は「Open/Close tree」とし、
    「標準」カテゴリの「変数◯に◯を代入する」を配置してください。

  10. 代入先に$variable.selectedParentId、代入元に変数値$variable.tree[$index].idを設定してください。

  11. 「標準」カテゴリの「アクション◯を実行する」を配置し、
    アクションに先程作成した「Set tree data」を設定してください。

  12. 「標準」カテゴリの「カスタムスクリプトを実行する」を配置し、以下のコードを貼り付けてください。

  13. 「実行条件」タブをクリックし、「標準」カテゴリの「上記カスタムスクリプトの返却値が true のとき」を配置し、以下のコードを貼り付けてください。

  14. 「アクション」タブに戻り、「標準」カテゴリの「カスタムスクリプトを実行する」をもう1つ配置し、以下のコードを貼り付けてください。

5. ツリー表示の設定

  1. 「ボタン要素」を選択し、イベントの「クリック時」に先程作成したアクション「Open/Close tree」を設定してください。

  2. 続けて、CSSクラスの「クラス名」に変数値$variable.tree[$index].cssClassを設定してください。

  3. 「テーブルセル」を選択し、共通の「表示/非表示」に変数値$variable.tree[$index].displayを設定してください。

  4. 左側のフレックスアイテムを選択し、余白の「外余白(左)」に変数値$variable.tree[$index].marginを設定してください。

  5. 「CSS編集」アイコンをクリックしてください。

  6. CSSエディタに以下を貼り付けてください。

  7. プレビューで確認します。
    ツリーの開閉ができるようになりました。

さいごに

このCookBookでは、TreeViewのような動きをするサンプルの作成方法を紹介しました。
各ノードは自由に増やしたり減らしたりできるので、是非試してみてください。

-CookBook
-

執筆者:


comment

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

関連記事

no image

完了したワークフロー案件の登録データをメンテナンスする方法

このCookBookでは、IM-BISとIM-FormaDesignerで作成したワークフロー案件の登録データを編集する方法を紹介します。 一部制限はありますが、IM-FormaDesignerのアプ …

no image

外部連携の後処理で任意のエラーメッセージを表示する

このCookbookでは、外部連携の後処理で任意のエラーメッセージを表示する方法を紹介します。 この方法を活用することにより、外部連携の後処理ででエラーが発生した場合、利用者に内容を通知することができ …

スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法

このクックブックでは、スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法をご紹介します。 ポートレットは、スプレッドシートとIM-Workflow REST APIを利用して作成し …

no image

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

この CookBook では、Docker Swarm を利用して Resin のクラスタリングを構築する手順について紹介しています。 Docker Swarm を利用することで、複数マシンにまたがっ …

画面アイテム「グリッドテーブル」で全行クリアする方法

このCookBookでは、IM-BISの画面アイテムであるグリッドテーブルで、入力データを全行クリアする方法について紹介します。 「グリッドテーブル」は、jqGridを利用しており、入力されたデータを …

RSSRSSRSSRSS