時刻

872 views

時刻

ユーザーが時刻を入力出来るフィールドを提供します。これにより、ユーザーが時刻を入力する際に指定できるようになります。以下にその詳細な説明と使いどころの例を示します。

時刻の基本

ユーザーが時刻を入力するためのインターフェースを提供します。

時刻の使いどころ

予約システム

ユーザーが予約時間を指定する場合に使用します。たとえば、レストランの予約や医療機関の予約など。
スケジュール管理

ユーザーがイベントやタスクの開始時間や終了時間を指定する場合に使用します。
勤務時間の記録

従業員が勤務開始時間と終了時間を入力するためのフォームに使用します。

ユーザーが時刻を簡単に入力できるインターフェースを提供します。予約システム、スケジュール管理、勤務時間の記録など、さまざまなシナリオで利用可能です。この要素を使用することで、ユーザーインターフェースが直感的で使いやすくなり、時刻入力の正確性も向上します。

時刻を入力する［エディット］コントロールに対応したコントロールです。Web Clientでは［入力］(matinput)または［ラベル］(label)、日付を入力（Date）として扱われます。Magic Xpa側では同じ［エディット］コントロールを使います。使う方法によってデータ入力がさまざまなシナリオに変わります。

Magic Xpa側では［エディット］コントロール関して以下の設定を行います。

①：［エディット］コントロールに設定する変数を作成する

②：フォームに［エディット］コントロール設置する

③：作成した変数を［エディット］コントロールに設定する

SmartUX側には時刻ウィジェットを使います。

時刻ウィジェットは以下のような感じになっております。

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

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

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

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

<mat-form-field data-comp-id=”mat-time.1″ id=”mat-time.1″ >

<mat-label>Time</mat-label>

</mat-form-field>

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

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