Skip to main content

実行時のビューのカスタマイズ

3 タスク

15 分

Visible to: All users
初級 Pega Platform '23 ユーザーエクスペリエンス 日本語

シナリオ

GoGoRoadの関係者は、「Enter customer information」ビューと「Identify Location」ビューで、適切な検証を行った上で関連情報のみを表示するように簡素化したいと考えています。 このリクエストに対応するには、「Enter customer information」ビューをカバーする情報を2列レイアウトに変更し、「Identify Location」ビューにZIPコードプロパティを必要なバリデーションを付けて追加します。

以下の表は、チャレンジに必要なログイン情報をまとめたものです。

ロール ユーザー名 パスワード
アプリケーションデベロッパー author@gogoroad pega123!
補足: 練習環境では、複数のチャレンジの完了をサポートする場合があります。 その結果、チャレンジのウォークスルーに表示される設定は、お客様の環境と完全に一致しない場合があります。

このチャレンジを完了するには、Pegaインスタンスを起動する必要があります。

起動には5分ほどかかることがありますので、しばらくお待ちください。

チャレンジ ウォークスルー

詳細なタスク

1 データタイプにプロパティを追加する

  1. チャレンジのPegaインスタンスに、以下のログイン情報を入力します。
    1. User nameフィールドに「author@gogoroad」と入力します。
    2. Password フィールドに「pega123!」と入力します。
  2. App Studioのナビゲーションペインで次をクリックします:Data. 
  3. Data objects and integrationsランディングページで、「Service address」をクリックしてService addressデータオブジェクトを開きます。
    data_objects_integrations_landing_page
  4. Add field」をクリックして、Service addressデータオブジェクトに新しいフィールドを追加します。
  5. Field nameフィールドに、「Zip」と入力します。
  6. Type リストで「Text (single line)」を選択します。  
  7. Advanced 」をクリックしてオプションを展開します
  8. Max lengthフィールドに、「5」と入力します。
    zip3
  9. Submit 」をクリックして変更を保存します。 

2 テンプレートを2列のレイアウトに変更する

  1. App Studioのナビゲーションペインで、Case Types > Assistance Requestをクリックして、Assistance Requestケースタイプを開きます。
  2. Save and run」をクリックして、ケースインスタンスを作成します。
  3. Identify issueステップの先に進みます。
  4. 「Enter customer information」ビューで、「Design」モードを切り替えます。
    Design button location
  5. 「Enrollment information」セクションにカーソルを合わせてEdit this Sectionをクリックし、「Enrollment information」ペインを開きます
    Enrollment section
  6. 「Enrollment information」パネルで、「Template」の右側にある「Change」をクリックして、テンプレートを変更します。
    asdf
  7. Select a templateウィンドウで、「2 Column」をクリックします。
  8. 「Enrollment information」ペインで、「Coverage level」にカーソルを合わせてクリックし、「Column B」にドラッグします。
    Move drop down to a different column
  9. 「Close」をクリックして、「Enrollment information」パネルを閉じます。
  10. Designモードを切り替えます。

3 コントロール値の設定

  1. Continue」をクリックして、ケースをIdentify locationステップに進めます。
  2. 「Design」モードを切り替えます。
  3. Service addressアドレスセクションにカーソルを合わせてEdit this Sectionをクリックします
  4. 右側のペインで「Add」アイコンをクリックします。
    dfsf
  5. Fields 」セクションで、Zipフィールドにカーソルを置き、「Add to View」をクリックします。
    zipcode
  6. 「Close」をクリックして前のペインに戻ります。
    close
  7. 右側のペインで、Zipにカーソルを合わせ、「Edit this "Text input"」をクリックします。 
    sss
  8. 「Use property default」チェックボックスの選択を解除します。
  9. Label valueフィールドに「Zip code」と入力します
  10. Placeholderリストで「Other」を選択します。
  11. Placeholderリストの下のフィールドで、プレースホルダーの値として「12345」と入力します。
  12. Requiredリストで、「Always」を選択します。
    actual zip settings
  13. Presentationタブをクリックします。
  14. Editable Settingsセクションで、Min charactersフィールドに「5」と入力します。
  15. Max charactersフィールドでも手順14を繰り返します。
  16. Editable FormatセクションのTypeリストで、「Number」を選択します。
  17. Text alignmentリストで、「Left」を選択します。
  18. 「Display value using read-only formatting」チェックボックスの選択を解除します。 
    zip10
  19. 「Apply」をクリックして、変更を保存します。
  20. Close」をクリックして、前のペインに戻ります。
  21. Close」をクリックして、セクションペインを閉じます。
  22. 「Design」モードを切り替えます。

作業の確認

  1. マルチステップのナビゲーションメニューで、「Enter customer information」をクリックすると前のステップに戻ります。
  2. Account IDリストで、登録済みの顧客を選択し、2番目の列に「Coverage level」が表示されることを確認します。
    enter_customer_information
  3. Continue」をクリックして、ケースをIdentify locationステップに移動させます。
  4. Identify location」ビューで、Zip codeフィールドに数字のみを入力できることを確認します。
  5. Zip codeフィールドに6桁以上の数値を入力して「Continue」をクリックします。
  6. Zip codeの長さが6桁以上の場合、エラーメッセージが表示されることを確認します。
    Identify location error if Zip code is longer than 5 digits
  7. Zip codeフィールドに5桁未満の数値を入力して「Continue」をクリックします。
  8. Zip codeの長さが5桁未満の場合、エラーメッセージが表示されることを確認します。
  9. Zip codeフィールドに5桁の数値を入力して「Continue」をクリックします。
  10. ケースがIdentify vehicleステップに進むことを確認します。

このチャレンジは、下記のモジュールで学習したことを実践するための内容です。


このモジュールは、下記のミッションにも含まれています。

If you are having problems with your training, please review the Pega Academy Support FAQs.

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

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

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