サブフォーム

1276 views

サブフォーム

サブフォーム（nested formまたはサブフォーム）は、メインのフォーム内に含まれる追加のフォーム要素を指します。サブフォームは、複雑なデータ入力を整理し、関連情報をグループ化するために使用されます。サブフォームを使用することで、複雑なデータ入力を整理し、ユーザーが関連情報を一括して入力できるようになります。製品のバリエーション、プロジェクトのタスク、ユーザープロフィールとアドレス、イベントの参加者情報など、様々な場面でサブフォームは有効です。これにより、フォームの可読性と使いやすさが向上し、ユーザーエクスペリエンスが改善されます。

［サブフォーム］コントロールに対応したコントロールです。

Magic xpaの［サブフォーム］コントロールに関して設定は以下の通りなっております。

①：サブフォーム名は必要に応じて設定する

②：SmartUX側と関連するプロパティを設定する

⁂必要に応じてご活用ください。

可視

コントロールを表示させるかどうか指定します。論理値を返す式で指定することもできます。

SmartUX側では以下のように設定を行います。

ドラッグアンドドロップして設置します。

サブフォームウィジェットは以下のような感じになっております。

①：Magic Xpa側のサブフォーム名をSmartUX側のサブフォームウィジェットのプロパティに設定する

歯車ボタンをクリックして設定します。

設定した後は以下の通りなっております。

Magic Xpa側に”可視”プロパティを設定した場合は、SmartUX側のプロパティにも以下の通りに設定をします。

コンポーネント［サブフォームウィジェット］を配置すると、デフォルトで以下のコードが定義されます。

<div data-comp-id="subform.1" id="subform.1">
    <magic-subform></magic-subform>
</div>

プロパティ一覧

プロパティ	内容
Data	Magic プログラムで定義された［サブフォーム］コントロールを指定します。歯車ボタンをクリックすると項目一覧が表示されます。ここから［サブフォーム］コントロールを選択することができます。
Is Visible	コントロールの表示設定。 visible …… 表示 hidden …… 非表示 collapse …… 表の行や列を詰める inherit …… 親要素の設定を継承歯車ボタンをクリックするとAngular関数の一覧が表示されます。ここから関数を指定して定義することができます。直接入力する場合は、クォーテーション(“)で囲んでください。大抵はmg.getVisible(mgc.V_XXXXXXXXX)のようにgetVisible関数を設定しMagicの可視と関連付けます
Display If	コントロールを作成させるかどうか指定します。論理値を返す式で指定することもできます。歯車ボタンをクリックするとAngular関数の一覧が表示されます。ここから関数を指定して定義することができます。直接入力する場合は、クォーテーション(“)で囲んでください。 Is Visibleがvisible,hiddenだったのに対してDisplayIfはタグを作成”する”・”しない”となり、必要とする値も true･falseとなります。例としてmg.getValue(mgc.V_XXXXXXXXX)==1234と書くことで1234ならば作成、以外ならは作成しないとなります。 Magicならばmg.isDisabled(mgc.XXXXXXXXXX)のようにisDisabled関数と組み合わせることが多いです。
Alignment	サブフォーム内の表示の整列方法を指定します。以下から選択できます。 Default Left …… 左寄せ Right …… 右寄せ Center …… 中央寄せ Justify …… 均等割付
Text Wrap	サブフォーム内のテキスト表示を折り返すかどうかを指定します。以下から選択できます。 Normal …… 初期値 Break Word …… 単語の途中でも改行 Initial …… 初期値に戻す Inherit …… 親エレメントのプロパティを継承
Text Transformation	サブフォーム内のテキストの変換方法を指定します。以下から選択できます。 Default …… 変換なし Uppercase …… 大文字 Lowercase …… 小文字 Capitalize …… 先頭文字のみ大文字
Class	任意のクラスを定義することができます。