ルックアップ

947 views

ルックアップ

ルックアップは、ユーザーが入力フィールドに値を入力する際に、関連するデータを検索して選択できるようにするUIコンポーネントです。SmartUXでは、ルックアップを使うことでユーザーが簡単に必要な情報を見つけて選択できるようにします。

詳細な説明

ルックアップの役割
- ルックアップは、ユーザーが入力フィールドに値を入力する際に、候補となるデータを検索し、その中から選択する機能を提供します。
- 例えば、顧客名を入力する際に、既存の顧客リストから一致する顧客を検索し、その中から選択できるようにします。
動作の流れ
- ユーザーが入力フィールドに文字を入力し始めると、関連する候補が表示されます。
- ユーザーは候補リストから適切な選択肢を選ぶことができ、選んだ値が入力フィールドに自動的に反映されます。
チェックボックス
- 複数の選択肢から複数を選択できる形式です。各選択肢に対して個別にチェックを入れることができます。

ルックアップ機能は、ユーザーが入力フィールドに値を入力する際に、関連するデータを検索して選択できるようにする便利なUIコンポーネントです。顧客管理システムや在庫管理システムなど、データベースから特定のエントリを検索して選択する必要がある場面で特に有用です。

この機能を活用することで、ユーザーの入力ミスを減らし、入力の効率を向上させることができます。また、ユーザー体験を向上させるために、適切なフィードバックとアクセシビリティの考慮も重要です。

フォームのデータ・フィールドに情報を検索して入力するために使用されます。入力フィールドに一部を入力すると、ルックアップボタンが一致する可能性のある情報を検索します。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

<c-input-group class=”LookupWithDescription” data-comp-id=”lookup-with-description.2″ id=”lookup-with-description.2″>

<mat-form-field appearance=”outline”>

</c-input-group>

以下のプロパティがあります

プロパティ	内容
Data	Magic プログラムで定義されたコントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Label	コントロールの外枠上に表示されるラベルを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Error	エラーメッセージとして表示させるテキストを指定します。エラーは初期状態では非表示で、無効なフォームフィールドに表示されるのは、ユーザがそのエレメントを操作した後か、親フォームが送信された後です。エラーはヒントと同じスペースを占めるため、エラーが表示されるとヒントは隠されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Description Input	ルックアップボタンの左側に表示されるテキストを入力します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Lookup Button	ルックアップボタンに対応するMagicコントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。
is inside Table	テーブル内に配置する場合はチェックをつけます。追加することで[rowId]=”row.rowId”タグが追加されます。テーブル内にあるのにチェックをつけなかった場合は常に1行目のイベントとして取り扱われます。
Show Control	コントロールを表示するかどうかを指定します。以下から選択できます。 “Is Inside Table” がチェックされている場合のみ有効です. None …… 常に表示されます。 Is Row Edit …… 修正モード時のみ表示されます。 Is Row Read …… 照会モード時のみ表示されます。
Required	エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。
Hint	コントロールのヒントとして使用されるテキスト。ヒントは、タイプ入力している間に自動的に削除される［エディット］コントロールの上で表示されるテキストです。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Tooltip	コントロールに関連付けるツールチップを指定します。マウスカーソルをこのコントロールに置くと指定された文字が表示されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 mg.getTitle(mgc.XXXXXXXXXX) にてMagicで設定されたツールチップを表示させることが可能です。
Disabled	歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Display If	表示条件を指定します。歯車ボタンをクリックするとAngular関数の一覧が表示されます。ここから関数を指定して定義することができます。
Class	任意のクラスを定義することができます。