CookBook

IM-BloomMaker 画面構成タブでテーブルの行または列を入れ替える方法

投稿日:2020-12-01 更新日:

この CookBook では、 Accel Platform 2020 Winter から利用可能になった、画面構成タブでテーブルエレメント配下のエレメントを並び替えられる方法を紹介します。
Accel Platform 2020 Summer まではテーブルエレメント配下のエレメントを並び替える場合は、コンテナ上でテーブルヘッダセル配下にあるエレメントまたは、テーブルセル配下にあるエレメントを D&D で一つずつ並び替える必要がありましたが、今回のリリースでまとめて行や列を入れ替えることが可能になりました。

使い方

ここでは、従来の入れ替え方と Accel Platform 2020 Winter からの入れ替え方を説明します。
サンプル資材: cookbook_189905_im_bloommaker
はじめに、サンプル資材をインポートし、コンテンツ一覧画面からコンテンツ名 im_cookbook_189905 のデザイナ画面を開いてください。

従来の入れ替え方

テーブルヘッダセル配下にある Header2Header3 を入れ替える場合

  1. Header2 のラベルを選択して、Header3 の横に D&D します。

  2. D&D 後 Header3 のラベルを Header2 があった場所に D&D します。


    これで Header2Header3 が入れ替わりました。
    入れ替えれる場所が少なければそこまで手間ではありませんが、数が多い場合は手間がかかります。

Accel Platform 2020 Winter からできる入れ替え方

列の場合

  1. 画面構成タブを開きます。
  2. 画面構成タブのテーブルヘッダセルを選択します。
    この時、Header3 の親要素のテーブルヘッダセルが選ばれていることを確認してください。
  3. D&D で下のテーブルヘッダセルと入れ替えます。


    Header2Header3 が入れ替わりました。
    テーブルヘッダセルを D&D するだけで、子要素のラベルも一緒に入れ替えることができます。

また、テーブルのセルであればコンテナ上の D&D でも入れ替えることは可能です。

行の場合

  1. 画面構成タブのテーブルボディ配下のテーブル行を選択します。
  2. D&D で2行目のテーブル行と入れ替えます。


    テーブルボディの1行目と2行目が入れ替わりました。
    テーブル行を D&D するだけで、子要素のラベルも一緒に入れ替えることができます。
    *テーブル行の並び替えは、コンテナ上ではできません。画面構成タブでのみで行えます。

また、この行入れ替えによりテーブルの最終行以外の行挿入が楽になります。
従来だと、テーブルの rowCount を増やし、1つずつテーブルセル配下のエレメントをずらす必要がありました。

テーブルボディの1行目と2行目の間に新規で行追加したい場合

  1. テーブルエレメントの rowCount を4にします。
  2. 画面構成タブを開き、最終行のテーブル行を選択します。
  3. テーブルボディ配下の1行目にテーブル行と2行目のテーブル行の間に D&D します。


    これで完了です。簡単に行挿入することができました。

さいごに

リストやコンテナ系のエレメントも D&D で入れ替えることが可能になっているので、是非試してみてください。

-CookBook
-

執筆者:


  1. T.Iwachika より:

    行の移動は楽になったのですが、(ラベルだけでなく)列の移動は出来ないでしょうか?

    • imdeveloper より:

      列も「テーブルヘッダ」「テーブルボディ」に関わらず、同一の「テーブル行」の中では移動することが可能です。
      列をまとめて移動することはできないか?ということでしたら、それはできません。

comment

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

関連記事

no image

Solr の Docker を作成する。

この CookBook では、Solr の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Solr の Docker イメージを作成します 実行します 1. ベースイ …

no image

未完了案件・完了案件を全て削除する方法

このCookBookでは、LogicDesignerを利用してワークフローの未完了案件・完了案件を一括削除する方法を紹介します。 開発環境のお掃除に役立つTipsです。 削除した案件は復元することがで …

BloomMakerでワークフローの添付ファイルを直接編集する画面を作成する

このCookBookでは、BloomMakerで、ワークフローの添付ファイルを直接追加や削除する画面を作成してみました。 本稿で紹介のサンプルのように、BloomMakerを利用することで、ちょっとし …

no image

Formaの実行画面でアクセスログを収集する

このCookBookでは、Formaの実行画面で、アクセスログを収集する方法を紹介します。 サンプルでは、登録画面を開いた時点とデータ登録を実行した時点で、ログを収集します。 ログを収集することで、登 …

IM-BloomMaker リッチテーブルのセルにボタンや画像を表示する方法

このCookBookでは、intra-mart Accel Platform 2021 Winter でリッチテーブルエレメントに追加されたプロパティ「columnSettings」プロパティを使って …