UI要素のダイナミック機能

ダイナミックUI設計とは、ユーザーの入力に応じて適応するようにユーザーインターフェイスを設計することをいいます。 ダイナミックユーザーインターフェイス（UI）を設計するときは、指定された条件に従って、ユーザーが表示および操作するフィールドを制御します。 ダイナミックUIコンテンツは、インテント駆動型のUI設計の重要な要素です。 ユーザーの選択により、表示されるコントロールが決定され、関連フィールドのみが表示されます。

たとえば、お客様がローンの申し込みをする場合、顧客は配偶者の有無を指定します。 顧客が既婚を選択した場合、アプリケーションで配偶者の名前を入力するユーザー入力フィールドが表示されます。

以下の画像の中央にある縦線をドラッグすると、独身と既婚が選択された状態のローン申請が表示されます。

UI要素のダイナミック動作を設定するには、要素を表示する場合と無効にする場合を操作して行います。

可視

フィールドやレイアウトの可視性を設定して、特定の条件が満たされたときにフィールドやレイアウトを表示します。

デフォルトでは、UI要素の可視性設定はAlways（常に）になっており、UI要素は常に画面に表示されます。 次の表は、その他の可視性設定オプションを示しています。

可視性設定	UI要素の動作	例	例の説明
Always	常に表示		アプリケーションユーザーが名前を入力するNameフィールドは常に表示しておきます。
Condition (expression)	式（whenルール）でtrueが返された場合に表示されます。 このオプションは、ケース全体で再利用する必要のない短い式に使用します。		ユーザーがSpecial meal（特別な食事） オプションを選択すると、Type of meal（食事の種類）のドロップダウンリストが表示されます。 それ以外の場合は、ドロップダウンリストは表示されません。 この式が必要なのはこれだけであると判断したため、Condition （expression）オプションを使用するのが適切です。
Condition (when rule)	whenルールでtrueが返された場合に表示されます。 このオプションは、whenルールが複雑な場合や、whenルールをケースタイプ全体で再利用する場合に使用します。		Marital Status（婚姻状況）= Married（既婚）というwhenルールを作成して、再利用する予定です。 このwhenルールを参照して、ユーザーがMarital StatusとしてMarriedを選択したときに、Name of Spouseフィールドが表示されるようにします。 それ以外の場合、Name of Spouse（配偶者の氏名）は表示されないようにします。
If not blank	フィールドの値が空白でない場合に表示されます。		診察の予約を確認する際、患者はオプションで次回の予約日を選択できます。 患者が日付を選択すると、Next appointment dateフィールドが表示されます。 患者が日付を選択しない場合、Next appointment dateフィールドは非表示になります。
If not zero	フィールドの値がゼロでない場合に表示されます。		顧客がオンラインで購入すると、注文合計金額が計算されます。 Order total フィールドがゼロより大きい場合に表示されます。 算出されたOrder total（注文合計）がゼロの場合、注文合計は非表示になります。

無効

フィールドやレイアウトが無効になるタイミングを設定して、フィールドへのユーザーのアクセスを制限できます。 特定の条件が満たされたときに、フィールドやレイアウトが無効になります。

デフォルトでは、UI要素が無効になることはありません。つまり、ユーザーは常にUI要素にアクセスできます。 次の表は、UI要素を無効にするためのオプションを示しています。

無効設定	UI要素の動作	例	例の説明
Never	無効にしない		ユーザーが常にNameフィールドに自分の名前を入力できるようにする必要があります。
Always	常に無効		銀行口座を開設する際、お客様は口座の種類を選択します。 口座開設後、お客様は口座のタイプを確認できますが、変更することはできません。 この動作を実現するために、Account typeフィールドを常に無効にするように設定します。
Condition (expression)	式（whenルールの場合もあります）がtrueを返す場合は無効		ユーザーが希望する連絡方法としてEmailを選択している場合、Mobile numberフィールドは無効になります。 ユーザーがPreferred Contact MethodとしてTextを選択している場合、Emailフィールドは無効になります。 この式が必要なのはこれだけであると判断したため、Condition （expression）オプションを使用するのが適切です。
Condition (when rule)	whenルールがtrueを返す場合は無効		年齢が21歳以上の場合というWhenルールを参照して、顧客がクレジットカードを申し込む際に、顧客が21歳以上であれば、Cosigner informationフィールドを無効にします。

必須

フィールドやレイアウトを必須として設定し、ユーザーが必ず値を指定するようにします。 特定の条件が満たされたときに、フィールドやレイアウトが必須になります。

デフォルトでは、UI要素は必須ではありません。つまり、ユーザーは値を指定しないでケース処理を続行できます。 次の表は、UI要素を必須にするオプションを示しています。

必須設定	UI要素の動作	例	例の説明
Never	必須ではない		Emailフィールドはオプションで、ユーザーに対して必須にしないようにします。
Always	常に必須		お客様が銀行口座を開設する際には、口座タイプを選択する必要があります。 Account typeフィールドは常に必須です。
Condition (expression)	式（whenルール）でtrueが返される場合は必須		ユーザーがPreferred Contact MethodとしてEmailを選択した場合、Emailフィールドは必須になります。 ユーザーがPreferred Contact MethodとしてTextを選択した場合、Mobile numberフィールドは必須になります。 この式が必要なのはこれだけであると判断したため、Condition （expression）オプションを使用するのが適切です。
Condition (when rule)	whenルールでtrueが返される場合は必須		年齢が21歳未満の場合というWhenルールを参照して、顧客がクレジットカードを申し込む際に、顧客が21歳未満の場合は、Cosigner informationフィールドが必須になるようにします。 それ以外の場合は、連帯保証人の情報の入力はオプションになります。

以下のインタラクションで理解度をチェックしてください。