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
-

執筆者:


comment

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

関連記事

no image

ジョブを作成して定期実行する

このCookBookでは、以下の開発モデルでジョブを作成する方法と、作成したジョブを指定した時刻に定期実行する方法を紹介します。 ・スクリプト開発モデル ・JavaEE開発モデル いずれのモデルでもジ …

ワークフローの案件削除時にBIS/Formaの関連データも削除する方法

このCookBookでは、ワークフローの案件削除時にBIS/Formaの関連データも併せて削除する方法について紹介しています。 BIS/Formaで作成したワークフローには、機能ごとに個別で管理するト …

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。 サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタ …

FormaDesignerのユーザプログラム前処理と後処理をロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム前処理と後処理をロジックフローで作成する方法を紹介します。 サンプルでは、ユーザプログラム前処理と後処理を利用して、Workflo …

no image

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

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

RSSRSSRSSRSS