Skip to main content

Dynamische Funktionen zu Schaltflächen hinzufügen

2 Aufgaben

10 Min.

Visible to: All users
Anfänger
Pega Platform 8.7
Benutzererfahrung
Deutsch

Szenario

Nachdem eine Pannenhilfe-Anfrage genehmigt wurde, wird ein Dienstleister zu dem vom Kunden angegebenen Standort entsandt. Zur Durchführung dieser Aufgabe benötigen die Kundenbetreuer bei der Auswahl des Dienstleisters die Möglichkeit, die Service-Adresse zu überprüfen und zu ändern.

Fügen Sie der Ansicht „Select service provider“ eine Schaltfläche hinzu, damit der Kundenbetreuer die vom Kunden angegebene Service-Adresse verifizieren kann.

In der folgenden Tabelle finden Sie die Anmeldedaten, die Sie zur Durchführung der Challenge benötigen.

Rolle Benutzername Passwort
Application Developer author@gogoroad pega123!
Hinweis: Ihre Übungsumgebung unterstützt möglicherweise den Abschluss mehrerer Challenges. Es kann daher vorkommen, dass die im Challenge-Walkthrough gezeigte Konfiguration nicht genau mit Ihrer Umgebung übereinstimmt.  

Sie müssen zum Abschließen dieser Challenge Ihre eigene Pega-Instanz starten.

Die Initialisierung kann bis zu 5 Minuten dauern, bitte haben Sie Geduld.

Challenge-Schritte

Genaue Übungsschritte

1 Schaltfläche zur Ansicht „Select service provider“ hinzufügen

  1. Klicken Sie im Navigationspanel von App Studio auf Case types > Assistance Request.
  2. Klicken Sie auf Save and run, um einen neuen Case „Assistance Request“ zu erstellen.
  3. Leiten Sie den Case zum Step Identify location weiter und geben Sie eine Adresse in die Felder Street, City und State ein.
    Hinweis: Das Feld Address wird ausgefüllt, wenn Sie den Step „Identify vehicle“ erreichen. 
    New Assistance Request Identify location step
  4. Leiten Sie den Case an den Step Select service provider weiter und geben Sie Daten in alle Pflichtfelder ein.
  5. Klicken Sie im Header von App Studio auf Design , um in den Design-Modus zu wechseln.
  6. Gehen Sie mit der Maus unter der Bezeichnung „Select service provider“ auf den Kartenabschnitt und klicken Sie dann auf Edit this section, um rechts den Konfigurationsbereich „Select service provider“ zu öffnen.
  7. Klicken Sie im Konfigurationspanel auf das Icon Add, um ein UI-Element auszuwählen.
    select-service
  8. Gehen Sie im Abschnitt Controls  mit der Maus über Button und klicken Sie dann auf das Add to view-Icon, um das neue UI-Element unten in dem Bereich hinzuzufügen.
    add-view
     
    Hinweis: Scrollen Sie nach unten, um die Schaltfläche unter der Tabelle „Service Provider“ zu sehen.
  9. Schließen Sie das Panel Add .

2 Schaltfläche „Modify service address“ konfigurieren

  1. Gehen Sie im Konfigurationspanel mit der Maus über die Bezeichnung Button und klicken Sie auf das Edit this "Button"-Icon, um das Konfigurationspanel „Button“ zu öffnen.
  2. Geben Sie auf dem Tab General im Feld Text Modify service address ein.
  3. Klicken Sie auf Add action sets , um die Action Sets für die Schaltfläche zu definieren.
    add-action-sets
  4. Klicken Sie auf Create an action set.
  5. Klicken Sie im Abschnitt Action set 1 auf Add an event , um ein Ereignis für die Schaltfläche auszuwählen.
  6. Klicken Sie im Abschnitt Mouse events auf Click.
    add-event
  7. Klicken Sie im Abschnitt Action set 1 auf Add an action > All actions, um alle verfügbaren Aktionen anzuzeigen. 
  8. Klicken Sie im Abschnitt Launch auf Local action.
    add-action
  9. Geben Sie in das Feld Local Action IdentifyLocation ein oder wählen Sie das aus.
  10. Wählen Sie in der Liste Target den Eintrag  Modal Dialog aus.
    Action set local action Identify location modal dialogue
  11. Er klickt auf Add another action set.
  12. Klicken Sie im Abschnitt Action set 2 auf Add an event.
  13. Klicken Sie im Abschnitt Mouse events auf Hover.
    Tipp: Es hat sich bewährt, das Mausereignis „Hover“ für Mobilgeräte zu deaktivieren.
  14. Klicken Sie auf Add an action > All actions.
  15. Klicken Sie im Abschnitt Display auf Show smart info.
  16. Wählen Sie die Checkbox Display header aus.
  17. Wählen Sie in der Drop-down-Liste Header Source die Option Plain text aus.
  18. Geben Sie im Feld Plain Text Current service address ein.
  19. Geben Sie in das Feld Section ServiceAddress ein oder wählen Sie das aus.
  20. Klicken Sie auf OK, um die Konfiguration des Action Sets abzuschließen.
  21. Klicken Sie im Konfigurationspanel „Button“ auf Apply, um die Änderungen an der Schaltfläche zu speichern.
  22. Schließen Sie das Konfigurationspanel „Button“.
  23. Verschieben Sie die Schaltfläche Modify service address per Drag-and-Drop über die „Address Map“.
  24. Klicken Sie auf Design, um den Design-Modus zu beenden.

Arbeit überprüfen

  1. Fahren Sie in der Ansicht „Select service provider“ über die Schaltfläche Modify service address.
  2. Stellen Sie sicher, dass Street, City und State die Werte anzeigen, die Sie in der Ansicht „Identify location“ eingegeben haben.
    hover on Modify service address button
  3. Klicken Sie auf die Schaltfläche Modify service address, um die aktuelle Adresse anzupassen.
  4. Ändern Sie die Adresse im modalen Dialogfeld Identify location.
    Identify location modal dialogue box
  5. Klicken Sie auf Submit.
  6. Prüfen Sie die geänderte Adresse, indem Sie über Modify service address fahren. Die Liste „Service provider“ wird aktualisiert und zeigt eine Liste mit Anbietern in der Nähe der aktuellen Adresse an.

In dieser Challenge üben Sie, was Sie im folgenden Modul gelernt haben:


In den folgenden Missions verfügbar:

Wenn Probleme mit den Lerninhalten auftreten, lesen Sie bitte die Pega Academy Support FAQs.

Fanden Sie diesen Inhalt hilfreich?

100% fanden diesen Inhalt hilfreich

Möchten Sie uns dabei helfen, diesen Inhalt zu verbessern?

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