Skip to main content

ボタンにダイナミックな機能を追加する

Archived

2 タスク

10 分

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.

シナリオ

ロードサイドアシスタンスのリクエストが承認されると、顧客から提供された場所にサービスプロパイダが派遣されます。 このタスクを実行するために、カスタマーサービス担当者(CSR)は、サービスプロバイダを選択する際に、Service Addressを確認し、変更する機能をリクエストします。

Select service providerビューにボタンを追加し、CSRが顧客から提出されたService Addressを確認できるようにしました。

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

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

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

詳細なタスク

1 Select service providerビューにボタンを追加する

  1. App Studioのナビゲーションペインで、Case types > Assistance Requestをクリックします。
  2. Save and runをクリックして新しいAssistance Requestケースを作成します。
  3. ケースをIdentify location ステップに進め、StreetCityStateフィールドにアドレスを入力します。
    補足: Identify vehicleステップに進むと、Addressフィールドが入力されます。 
    New Assistance Request Identify location step
  4. ケースをSelect service providerステップに進めて、すべての必須フィールドに情報を入力します。
  5. App Studioのヘッダーで、Design をクリックしてデザインモードに入ります。
  6. Select service providerラベルの下で、マップセクションにカーソルを合わせ、Edit this sectionをクリックすると、右側に「Select service provider」設定ペインが表示されます。
  7. 構成ペインで、AddアイコンをクリックしてUI要素を選択します。
    select-service
  8. Controls セクションで、Buttonにカーソルを合わせてAdd to viewアイコンをクリックし、新しいUI要素をリージョンの下に追加します。
    add-view
     
    補足: 下にスクロールすると、サービスプロパイダテーブルの下にボタンが表示されます。
  9. Add ペインを閉じます。

2 「Modify service address」ボタンを設定する

  1. 設定ペインで、Buttonラベルにカーソルを合わせてEdit this "Button"アイコンをクリックし、「Button Configuration」ペインを開きます。
  2. General タブのTextフィールドに、「Modify service address」と入力します。
  3. Add action sets をクリックして、ボタンのアクションセットを定義します。
    add-action-sets
  4. Create an action setをクリックします。
  5. Action set 1セクションで、Add an event をクリックしてボタンのイベントを選択します。
  6. Mouse eventsセクションで、Clickをクリックします。
    add-event
  7. Action set 1セクションで、Add an action > All actionsをクリックして使用可能なすべてのアクションを表示します。 
  8. Launch セクションで、Local actionをクリックします。
    add-action
  9. Local Actionフィールドに、「IdentifyLocation」と入力するか、選択します。
  10. Targetリストで Modal Dialogを選択します。
    Action set local action Identify location modal dialogue
  11. Add another action setをクリックします。
  12. Action set 2 セクションで、Add an eventをクリックします。
  13. Mouse events セクションで、Hoverをクリックします。
    ヒント: ベストプラクティスとして、モバイルデバイスではカーソルを合わせるマウスイベントを無効にしておく必要があります。
  14. Add an action > All actionsをクリックします。
  15. Display セクションで、Show smart infoをクリックします。
  16. Display headerチェックボックスを選択します。
  17. Header Sourceドロップダウンで、Plain textを選択します。
  18. Plain Textフィールドに、「Current service address」を入力します。
  19. Sectionフィールドに、「ServiceAddress」と入力するか、選択します。
  20. OKをクリックしてアクションセットの設定を完了します。
  21. 「Button Configuration」ペインでApplyをクリックすると、ボタンへの変更が保存されます。
  22. 「Button Configuration」ペインを閉じます。
  23. Address Mapの上にModify service addressボタンをドラッグアンドドロップします。
  24. Designをクリックすると、デザインモードが切り替わります。

作業の確認

  1. 「Select service provider」ビューで、Modify service addressボタンにカーソルを合わせます。
  2. 「Street」、「City」、「State」に「Identify location」ビューで入力した値が表示されていることを確認します。
    hover on Modify service address button
  3. Modify service addressボタンをクリックして現在の住所を変更します。
  4. Identify locationモーダルダイアログボックスで住所を変更します。
    Identify location modal dialogue box
  5. Submitをクリックします。
  6. Modify service addressボタンにカーソルを合わせて、住所の変更を確認します。 サービスプロバイダのリストが更新され、現在の住所の近くにあるプロバイダのリストが表示されます。


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

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