Skip to main content

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

Archived

3 タスク

5 分

Visible to: All users
初級 Pega Platform 8.6 ユーザーエクスペリエンス 日本語
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded. ここをクリックして to continue your progress in the latest version.

シナリオ

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

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

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

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

詳細なタスク

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

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

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

  1. App Studioのナビゲーションペインで、Case types > Assistance Requestをクリックして、「Assistance Request」ケースタイプを開きます。
  2. Save and runをクリックして、ケースインスタンスを作成します。
  3. 「Create view」の先に進みます。
  4. 「Enter customer information」ビューで、Designモードを切り替えます。
    designmode
  5. 「Enrollment information」セクションにカーソルを合わせてクリックし、Edit this section「Enrollment information」ペインを開きます
    design mode
  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桁以上の場合、エラーメッセージが表示されることを確認します。
    zip_code
  7. Zip codeフィールドに5桁未満の数値を入力してContinueをクリックします。
  8. Zip codeの長さが5桁未満の場合、エラーメッセージが表示されることを確認します。
  9. Zip codeフィールドに5桁の数値を入力してContinueをクリックします。
  10. ケースが「Identify vehicle」ステップに進むことを確認します。


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

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