Skip to main content
close Search
Close search

Challenge

UI für eine mobile App entwerfen

3 Aufgaben

15 Min.

Für alle Benutzer sichtbar
Anfänger Pega Platform 8.4 Mobil Benutzererfahrung Deutsch

Szenario

Das Kundendienst-Team von GoGoRoad möchte mobilen Benutzern auf einer für Smartphones optimierten Benutzeroberfläche die in der Nähe ansässigen Service-Provider anzeigen. Statt einer Tabelle soll mobilen Benutzern eine Karte mit Markern angezeigt werden, die die Standorte der nächstgelegenen Service-Provider angeben. Konfigurieren Sie die Karte so, dass ein Pop-up-Fenster mit dem Namen und der Adresse des Service-Providers angezeigt wird, wenn der Benutzer auf einen Marker tippt. Die Benutzeroberfläche für das Pop-up-Fenster wurde bereits von einem anderen Entwickler konfiguriert.

Fügen Sie das Steuerelement „Address map“ zur Ansicht „Select service provider“ hinzu, um für jeden Service-Provider, der sich in der Nähe befindet, einen Marker anzuzeigen. Konfigurieren Sie die Karte so, dass der Abschnitt ProviderInformation angezeigt wird, wenn der Benutzer auf den Marker klickt. Wenden Sie eine When-Bedingung für die Transparenz an, indem Sie die standardmäßige When-Regel pyIsMobile auf die Karte anwenden, damit diese nur auf Mobilgeräten angezeigt wird. Wenden Sie eine weitere When-Bedingung für die Transparenz an, indem Sie mit der When-Standardregel IsNotMobile die Tabelle mit den Service-Providern auf Mobilgeräten ausblenden.

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

Rolle Benutzer ID Kennwort
Application Developer author@gogoroad pega123!

Challenge-Schritte

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Genaue Übungsschritte

1 Kartensteuerelement zur Anzeige der nächstgelegenen Service-Provider konfigurieren

  1. Klicken Sie im Navigationspanel von Dev Studio auf App, um den Application Explorer zu öffnen.
  2. Wählen Sie im Application Explorer AssistanceRequest > User Interface > Section aus und klicken Sie auf SelectServiceProvider_ServiceProvider, um die Abschnittsregel zu öffnen, die die Liste der nächstgelegenen Service-Provider anzeigt.
  3. Klicken Sie im Formular mit der Abschnittsregel auf Structural > Dynamic layout und ziehen Sie den Mauszeiger im Regelformular über das Layout Table 1. Im Regelformular wird eine orangefarbene horizontale Linie angezeigt, um die vorgesehene Position des dynamischen Layouts anzugeben.
    The insertion point for a new layout is indicatedby the orange horizontal line
  4. Lassen Sie die Maustaste los, um das dynamische Layout oberhalb des Tabellenlayouts einzufügen.
  5. Klicken Sie auf Data display > Map und ziehen Sie den Mauszeiger in das leere dynamische Layout, um dem Abschnitt ein Kartensteuerelement hinzuzufügen.
  6. Doppelklicken Sie auf das Steuerelement Map, um das Fenster „Cell Properties“ zu öffnen.
  7. Ändern Sie die Karte, um anstelle des Standardsteuerelements „Tracking Map“ das Steuerelement „Address Map“ zu verwenden.
    1. Klicken Sie rechts neben dem Namen des Steuerelements auf Change, um ein neues Steuerelement auszuwählen.
      Map properties window, highlighting the link for changing the control
    2. Wählen Sie unter „Custom“ die Option Other aus, um die Liste der Steuerelemente zu verwerfen und rechts neben dem Namen des Steuerelements ein Eingabefeld anzuzeigen.
    3. Geben Sie in das unbeschriftete Feld rechts neben dem Namen des Steuerelements pxAddressMap ein, oder wählen Sie die Option aus, um das Steuerelement „Address Map“ zu verwenden.
      Map properties window with the pxAddressMap control selected
  8. Aktivieren Sie im Fenster „Cell Properties“ die Checkbox Show User Location, um den aktuellen Standort des Benutzers anzuzeigen.
  9. Fügen Sie Marker für die Service-Provider zur Karte hinzu.
    1. Wählen Sie unter „Markers source“ aus der Drop-down-Liste Type die Option Data page aus, um die Markerdaten aus einer Datenseite zu beziehen.
    2. Geben Sie D_ServiceproviderList im Feld Data page ein oder wählen Sie die Option aus, um die Source-Marker-Daten über die mit dem Datentyp „Service Provider“ verknüpften Datensätze zu beziehen. Das Fenster „Cell Properties“ wird aktualisiert und zeigt nun den von der Datenseite erwarteten Parameter an.
    3. Geben Sie unter dem Feld „Data page“ den Wert .ServiceAddress.State in das Feld Value ein oder wählen Sie ihn aus, um den Bundesstaat der Serviceadresse als Parameter für die Datenseite zum Filtern der Liste der Service-Provider zu verwenden.
    4. Geben Sie .LatLong in das Feld Property for location ein oder wählen Sie die Eigenschaft aus, um die Marker für jeden Service-Provider anhand des Längen- und Breitengrads ihres Standorts zu positionieren.
    5. Geben Sie ProviderInformation in das Feld Marker Info section ein oder wählen Sie die Option aus, um den Anzeigebereich festzulegen, wenn der Benutzer auf ein Marker-Icon klickt.
      Completed configuration of the Address Map control to display markers for nearby service providers
  10. Klicken Sie auf Submit, um die Konfiguration des Steuerelements „Address Map“ abzuschließen.

2 When-Bedingungen für die Transparenz auf die Karte und die Tabelle mit den Service-Providern anwenden

  1. Doppelklicken Sie im Formular der Abschnittsregel auf das Label Dynamic Layout (Default) - 1, um das Fenster „Dynamic layout properties“ zu öffnen.
  2. Wählen Sie im Fenster „Dynamic layout properties“ die Option Condition (when rule) aus der Drop-down-Liste Visibility aus. Rechts neben der Drop-down-Liste wird ein Feld angezeigt.
  3. Geben Sie pyIsMobile in das unbeschriftete Feld rechts neben der Drop-down-Liste ein oder wählen Sie die Option aus, um das Layout mit der Karte nur dann anzuzeigen, wenn der Benutzer ein Mobilgerät verwendet.
    Configuration of the dynamic layout containing the map control to display only if the user is using a mobile device
  4. Klicken Sie auf Submit, um die Konfiguration des Layouts mit der Karte der Service-Provider abzuschließen.
  5. Doppelklicken Sie auf das Label Table - 2, um das Fenster mit den Layouteigenschaften für das Tabellenlayout anzuzeigen.
  6. Wählen Sie unter „Conditions“ die Option Condition (when rule) aus der Drop-down-Liste Grid visibility aus. Rechts neben der Drop-down-Liste wird ein Feld angezeigt.
  7. Geben Sie IsNotMobile in das unbeschriftete Feld rechts neben der Dropdown-Liste ein, oder wählen Sie die Option aus, um das Tabellenlayout nur dann anzuzeigen, wenn der Benutzer kein Mobilgerät verwendet.
  8. Klicken Sie auf Submit, um die Konfiguration des Tabellenlayouts abzuschließen.
  9. Klicken Sie auf Save, um die Konfiguration des Abschnitts abzuschließen.

3 Arbeit überprüfen

  1. Klicken Sie in App Studio auf Preview application, um zum Case Manager zurückzukehren.
  2. Erstellen Sie einen neuen Case „Assistance Request“.
  3. Füllen Sie alle Pflichtfelder aus und führen Sie den Case im Step „Identify Location“ fort.
  4. Geben Sie im Step „Identify Location“ als Standort MA in das Feld State ein, um die im US-Bundesstaat Massachusetts ansässigen Service-Provider anzuzeigen.
  5. Führen Sie den Case im Step „Select Service Provider“ fort.
  6. Vergewissern Sie sich, dass nur die Tabelle mit den Service-Providern angezeigt wird.
    Table of service providers displayed to a user not using a mobile device
  7. Klicken Sie in der Menüzeile auf das Icon Tablet preview, um eine Vorschau des Case auf einem simulierten Apple iPad Pro 10.5-Display anzuzeigen.
    App Studio menu bar with the Tablet preview icon highlighted
Tip: Die Tablet-Vorschau bietet einen größeren Vorschaubereich für den Case als die Smartphone-Vorschau.
  1. Vergewissern Sie sich, dass nur die Karte mit den Service-Providern angezeigt wird.
    The Select service providers step, as viewed on a simulated Apple iPad display
  2. Klicken Sie auf einen der Marker, um ein Pop-up-Fenster zu öffnen, in dem Informationen zum Service-Provider und eine Schaltfläche, über die der Service-Provider dem Case zugewiesen wird, angezeigt werden.
    Map of service providers with a provider selected, displaying a pop-up containing information about the service provider
  3. Optional: Verwenden Sie das Icon Phone preview und die Geräteauswahl, um den Case auf anderen simulierten Mobilgeräten anzuzeigen.


In den folgenden Missions verfügbar:

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

Fanden Sie diesen Inhalt hilfreich?

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

Änderung vorschlagen

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