チェックボックス

996 views

チェックボックス

チェックボックスは、ユーザーが複数のオプションの中から1つ以上を選択できるインプット要素です。チェックボックスはフォームの一部としてよく使用され、選択肢が独立している場合に適しています。

チェックボックスの使いどころ

チェックボックスは、ユーザーに複数の選択肢を提供し、その中から1つ以上を選択してもらう場面で使用されます。以下は具体的な例です。

設定の有効化/無効化: アプリケーションの設定画面で、ユーザーに特定の機能を有効または無効にするオプションを提供する場合。
同意の確認: ユーザーに利用規約やプライバシーポリシーに同意してもらう場合。
フィルタリングオプション: Eコマースサイトで商品のフィルタリングオプションを提供する場合。

チェックボックスは、複数のオプションから1つ以上を選択する必要がある場合に非常に便利です。設定画面、同意の確認、フィルタリングオプションなど、さまざまな用途で利用されています。チェックボックスを正しく使用することで、ユーザーインターフェースをより直感的で使いやすいものにすることができます。

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

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

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

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

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

可視

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

有効

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

SmartUX側にはチェックボックスウィジェットを使います。

チェックボックスウィジェットは以下のような感じになっております。

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

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

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

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

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

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

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

<mat-checkbox data-comp-id=”mat-checkbox-custom.1″ id=”mat-checkbox-custom.1″>

　　<mat-label>Checkbox</mat-label>

</mat-checkbox>

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

プロパティ	内容
Data	Magic プログラムで定義されたコントロールを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 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 …… 照会８モード時のみ表示されます。
Required	エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。
Lable Position	ラベルの表示位置を指定します。以下から指定できます。 Default …… チェックボタンの後ろに表示されます。 Before ……チェックボタンの前に表示されます。 After…… チェックボタンの後ろに表示されます。
Tooltip	コントロールに関連付けるツールチップを指定します。マウスカーソルをこのコントロールに置くと指定された文字が表示されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 mg.getTitle(mgc.XXXXXXXXXX)にてMagicで設定されたツールチップを表示させることが可能です。
Display If	コントロールを表示させるかどうか指定します。 Is Visibleと似ていますが論理型の式を設定し、 True,Falseで指定します。他　mg.getValue(mgc.XXXXXXXXXX) !=””　と入力するとXXXXXXXXXXが空白以外の場合はTrueになるので表示されます。 “False” の場合、キャンバスからも表示されなくなります。
Disabled	無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Class	任意のクラスを定義することができます。