Skip to main content

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

ダイナミックUI設計

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

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

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

ダイナミックUI設計を使用するメリットは、エンドユーザーの動作に対するリアルタイムの応答、大半のユーザーインタラクションに対する強力な機能を用意できること、画面上を視覚的に整理できること、ページ全体の更新の減少などがあり、UIの応答性が向上します。

UI要素のダイナミック属性

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

可視

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

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

可視性設定 UI要素の動作 例の説明
Always 常に表示
Name field example
アプリケーションユーザーが名前を入力するNameフィールドは常に表示しておきます。
Condition (expression) 式(whenルール)でtrueが返された場合に表示されます。 このオプションは、ケース全体で再利用する必要のない短い式に使用します。
Visible condition expression with special meal selected

ユーザーがSpecial meal(特別な食事) オプションを選択すると、Type of meal(食事の種類)のドロップダウンリストが表示されます。 それ以外の場合は、ドロップダウンリストは表示されません。 この式が必要なのはこれだけであると判断したため、Condition (expression)オプションを使用するのが適切です。

Condition (when rule) whenルールでtrueが返された場合に表示されます。 このオプションは、whenルールが複雑な場合や、whenルールをケースタイプ全体で再利用する場合に使用します。
Visible when rule with married vs single selected
Marital Status(婚姻状況)= Married(既婚)というwhenルールを作成して、再利用する予定です。 このwhenルールを参照して、ユーザーがMarital StatusとしてMarriedを選択したときに、Name of Spouseフィールドが表示されるようにします。 それ以外の場合、Name of Spouse(配偶者の氏名)は表示されないようにします。  
If not blank フィールドの値が空白でない場合に表示されます。
Visible if not blank with Next appointment date value
診察の予約を確認する際、患者はオプションで次回の予約日を選択できます。 患者が日付を選択すると、Next appointment dateフィールドが表示されます。 患者が日付を選択しない場合、Next appointment dateフィールドは非表示になります。
If not zero フィールドの値がゼロでない場合に表示されます。
Visible if not zero with order total value
顧客がオンラインで購入すると、注文合計金額が計算されます。 Order total フィールドがゼロより大きい場合に表示されます。 算出されたOrder total(注文合計)がゼロの場合、注文合計は非表示になります。 

無効

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

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

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

必須

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

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

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

次の問題に答えて、理解度をチェックしましょう。

トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: Pega Academy サポートのよくある質問 (FAQ).

このコンテンツは役に立ちましたか?

このコンテンツは 100% のユーザーにとって役に立ちました。

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice