選択入力

1021 views

選択入力

選択入力は、ユーザーが事前定義された選択肢の中から一つまたは複数を選択できるUIコンポーネントです。SmartUXでは、選択入力はドロップダウンリストの形式で提供され、ユーザーに対して直感的な選択操作を可能にします。

選択入力コンポーネントは、ユーザーが選択肢から適切なオプションを簡単に選べるようにするための重要なUI要素です。ドロップダウンリスト形式で提供され、ユーザーインターフェースの効率性と使いやすさを向上させます。

［コンボボックス］コントロールに対応したコントロールです。

Magic Xpa側の［コンボボックス］コントロールに関して設定は以下の通りになります。

①：フォームにコンボボックス設置する

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

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

可視

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

有効

コントロールを有効にするかどうかを指定します。有効にするかどうかを表す論理値を返す式を使用できます。

SmartUX側には選択入力ウィジェットを使います。

選択入力ウィジェットは以下のような感じになっております。

Magic Xpaと関連するためData入力の隣にある歯車ボタンをクリックして設定します。

歯車ボタンをクリックしたら以下のような画面が出て来ます。Magic Xpa側のコンボボックスのコントロール名を選んで保存します。

選んだ後は以下の通りになっております。

これでMagic Xpa側とSmartUX側は連携取れた状態になります。

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

表示ロジックの”Display if”プロパティに歯車ボタンをクリックして設定します。

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

コンポーネント（選択入力ウィジェット）を配置すると、デフォルトで以下のコードが定義されます。

<mat-form-field appearance=”outline” data-comp-id=”mat-select-input.1″ id=”mat-select-input.1″>

<mat-select>

<mat-option></mat-option>

</mat-select>

</mat-form-field>

選択入力ウィジェットには以下のプロパティがあります

プロパティ	内容
Data	Magic プログラムで定義された［イメージ］コントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Label	表示するテキストを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Error	エラーメッセージとして表示させるテキストを指定します。エラーは初期状態では非表示で、無効なフォームフィールドに表示されるのは、ユーザがそのエレメントを操作した後か、親フォームが送信された後です。エラーはヒントと同じスペースを占めるため、エラーが表示されるとヒントは隠されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Multi Select	複数選択が可能かどうかを指定します。複数選択の場合、選択肢の前にチェックボックスが表示されます。
is inside Table	テーブル内に配置する場合はチェックをつけます。追加することで[rowId]=”row.rowId”タグが追加されます。テーブル内にあるのにチェックをつけなかった場合は常に1行目のイベントとして取り扱われます。
Show Control	コントロールを表示するかどうかを指定します。以下から選択できます。 “Is Inside Table” がチェックされている場合のみ有効です。 None …… 常に表示されます。 Is Row Edit …… 修正モード時のみ表示されます。 Is Row Read …… 照会８モード時のみ表示されます。
Required	エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。
Appearance	表示方法を以下から指定します。 outline …… 外観はフォームフィールドを全周に枠線が表示されます。 fill …… 外観はフォームフィールドを塗りつぶした背景ボックスと下線で表示されます。
Display If	エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。歯車ボタンをクリックするとAngular関数の一覧が表示されます。ここから関数を指定して定義することができます。 “False” の場合、キャンバスからも表示されなくなります。
Class	任意のクラスを定義することができます。