CookBook

IM-BloomMaker フォーム部品(Bulma)のフィールド、水平フィールドの利用方法

投稿日:

この CookBook では、intra-mart Accel Platform 2020 Summer から利用可能になった Bulma コンテンツのフォーム部品(Bulma)のフィールド、水平フィールドの利用方法について紹介します。

フィールドのエレメント固有の設定については以下のリンクを参考にしてください。
grouping, addon(グループ化、結合)
showLabel, showHelp(ラベル、ヘルプの表示)

フィールド、水平フィールドの違い

フォーム部品(Bulma)のエレメントは親となるフィールド、水平フィールドへ配置できます。
その他のエレメント、コンテナページへは配置できません。 ※ボタン、削除ボタンを除く

フィールド、水平フィールドには以下の違いがあります。

フィールド 水平フィールド
初期状態でラベルが表示されていない(「showLabel」設定で表示可能) 初期状態でラベルが表示されている
ラベルとエレメントの位置関係は上下になる ラベルとエレメントの位置関係は水平になる(画面の幅を狭めると上下になる)

以下はそれぞれを使用した入力フォームです。
画面の幅を狭めたとき、フィールドを使用した入力フォームのラベルとエレメントの位置関係に変化はありませんが、
水平フィールドを使用した入力フォームのラベルとエレメントの位置関係は水平から上下に変わります。
PCやスマホで画面の幅に合わせて表示を変える必要がない場合はフィールド、必要な場合は水平フィールドの使用が適しています。

フィールドを使用した入力フォーム

PC 版

モバイル版

水平フィールドを使用した入力フォーム

PC 版

モバイル版

またフィールドにラベルを表示させた状態でその中に複数のエレメントを配置する場合、水平フィールドの使用が適しています。
ラベルを表示しながら grouped, addon プロパティで複数のエレメントをまとめて配置したい場合、水平フィールドをご利用ください。
水平フィールドではなくフィールドを利用すると、ラベルも水平に表示されてしまいます。

上記を踏まえ、実際に画面を操作しながらコンテンツを作成しエレメントを配置するまでの流れを説明していきます。

コンテンツ種別「Bulma」のコンテンツを新規作成

フォーム部品(Bulma)を利用するためにはコンテンツ種別「Bulma」のコンテンツを作成する必要があります。

  1. 任意のカテゴリを選択してください。
  2. 「コンテンツ新規作成」をクリックしてください。
  3. コンテンツ種別「Bulma」を選択し、その他の必要な情報を入力してコンテンツを登録してください。

エレメントの配置

前項で作成したコンテンツのデザイナ画面を開いてください。

フィールド

フィールドは入力・送信フォームを作成するためのエレメントです。
フォーム部品(Bulma)のエレメントを配置できます。

  1. フィールドを配置してください。
  2. フィールド内へテキスト入力を配置してください。
    その他の場所へは配置できないようになっています。
  3. エレメント固有の設定で配下のエレメントに対してグループ化、結合、ラベル・ヘルプの表示ができます。
    各設定の詳細についてはこの CookBook の最初に記載したリンクを参考にしてください。
  4. フィールドを2つ追加して、その中へ数値入力、パスワード入力を配置してください。
  5. プレビューアイコンをクリックし、プレビューを開いてください。
    簡易的な入力フォームが表示されました。
  6. プレビューを閉じ、全てのフィールドのエレメント固有の設定「showLabel」へチェックを入れてください。
  7. プレビューアイコンをクリックし、プレビューを開いてください。
    ラベルが表示され、より入力フォームらしくなりました。
  8. 画面の幅を狭めてもラベルの表示位置は変わりません。

水平フィールド

水平フィールドは入力・送信フォームを作成するためのエレメントです。
フォーム部品(Bulma)のエレメントを水平方向に配置できます。

  1. 水平フィールドを配置してください。
  2. 水平フィールドの右側にあるフィールド内へテキスト入力を配置してください。
    その他の場所へは配置できないようになっています。
  3. 水平フィールドにはフィールドが使用されているので、フィールドと同様の設定ができます。
  4. 水平フィールドを2つ追加して、その中へ数値入力、パスワード入力を配置してください。
  5. プレビューアイコンをクリックし、プレビューを開いてください。
    「showLabel」設定時のフィールドとは違い、基本的にラベルの位置はエレメントと水平になります。
  6. 画面の幅を狭めるとラベルの表示位置が変わります。
    「showLabel」設定時のフィールドと同じく、エレメントの上部にラベルが表示されます。

-CookBook
-

執筆者:


comment

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

関連記事

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

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

no image

IM-BloomMaker Modifier の使い方

このCookBookでは、2020 Summer から利用可能になった環境変数($env)に含まれる「modifier」について紹介しています。 modifier は、同じく 2020 Summer …

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

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

FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法をご紹介します。 サンプルでは、スプレッドシート・グリッドテーブル・明細テーブルを使用し …

BloomMakerでワークフロー処理モーダルと動的処理対象者設定機能を利用してWorkflowコンテンツを作成する

このCookBookでは、BloomMakerで、ワークフロー処理モーダルと動的処理対象者設定機能を利用したWorkflowのコンテンツを作成する方法を紹介します。 本稿では、BloomMakerでワ …

RSSRSSRSSRSS