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

IM-BloomMaker imui の「ボタン」エレメントの背景色を css エディタで適用する方法

この CookBook では imui の「ボタン」エレメントの色を CSS エディタで適用する方法を説明します。 完成サンプル 以下の完成サンプルをダウンロードしてご活用ください。 IM-Bloom …

no image

IM-BloomMaker 排他制御エレメントの使い方

このCookBookでは、2021 Winterでリリースした共通エレメント「排他制御」の利用方法について紹介します。 「排他制御」エレメントは、特定の業務画面、特定の業務データにおける操作を排他的に …

no image

承認ノードの画面アイテムに任意の初期値を設定する方法

このCookBookでは、BISワークフローにおいて、承認ノードの画面アイテムに任意の初期値を設定する方法を紹介します。 画面アイテムに任意の初期値を設定する方法としては、画面アイテムプロパティである …

BloomMakerで動的承認ノードを利用したWorkflowコンテンツを作成する

このCookBookでは、BloomMakerで、動的承認ノードを利用したWorkflowのコンテンツを作成する方法を紹介します。 本稿では、BloomMakerとLogicDesignerでWork …

no image

IM-BloomMaker リッチテーブルの行の詳細画面を別タブで開く方法

このCookBookでは、リッチテーブルの行をクリックした時に別タブで詳細画面を開く方法について紹介しています。 リッチテーブルから詳細画面を開く方法は複数ありますが、このCookBookではそのうち …