選択入力
選択入力は、ユーザーが事前定義された選択肢の中から一つまたは複数を選択できる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” が チェックされている場合のみ有効です。
|
| Required | エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。 |
| Appearance | 表示方法を以下から指定します。
|
| Display If | エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。 歯車ボタンをクリックするとAngular関数の一覧が表示されます。 ここから関数を指定して定義することができます。 “False” の場合、キャンバスからも表示されなくなります。 |
| Class | 任意のクラスを定義することができます。 |
コメント
0件のコメント
サインインしてコメントを残してください。