Skip to main content

Challenge

Listendaten in Ansichten anzeigen

Szenario

Die GoGoRoad-Anwendung zeigt eine Liste aller verfügbaren Dienstleister in einer Tabelle an. Der UI-Berater möchte, dass Sie folgende Änderungen an der Benutzeroberfläche vornehmen: Es sollen nur relevante Dienstleister-Informationen angezeigt werden und der Bildschirminhalt soll passend für mehrere Bildschirmgrößen konfiguriert werden. Formatieren Sie die Anbieterliste nicht als Tabelle, sondern mit einem Layout, das einen einzigen Eintrag anzeigt und dann den Abschnitt in ein sich wiederholendes dynamisches Layout einbettet.

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.

Challenge-Schritte

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.

Genaue Übungsschritte

1 Listenansicht für Dienstleister erstellen

  1. Klicken Sie im Navigationspanel von Dev Studio auf Data types > Service provider, um den Datentyp „Service Provider“ zu öffnen.
  2. Klicken Sie auf den Tab Views.
    1.2
  3. Klicken Sie auf Create new view, um eine neue Ansicht zu erstellen.
  4. Klicken Sie oben links im neuen Fenster New View auf New View, um den Ansichtsnamen zu ändern.
  5. Geben Sie Providers list ein, um die Ansicht umzubenennen.
  6. Klicken Sie im linken Fensterpanel auf den Eintrag Fields.
    Expand fields in the left pane of the New View window
  7. Gehen Sie mit der Maus über das Feld Name und klicken Sie dann auf Add to view.
    Add to view icon
  8. Wählen Sie in der Liste Options Read-only aus.
  9. Wiederholen Sie Schritt 7, um die Felder Address und LatLong hinzuzufügen. 
    1.9
  10. Klicken Sie auf Submit, um das Dialogfenster zu schließen.
  11. Klicken Sie oben rechts auf Save, um die Listenansicht „Providers“ zu speichern.

2 Responsive Ansicht erstellen

  1. Klicken Sie im Navigationspanel von Dev Studio auf App, um den App Explorer zu öffnen.
  2. Geben Sie im Suchfeld GoGo-GoGoRoad-Data-ServiceProvider ein oder wählen Sie es aus und drücken Sie anschließend die Enter-Taste. Es werden die Regeln in der angegebenen Klasse angezeigt.
  3. Klicken Sie auf User Interface > Section.
    App Explorer with GoGoRoad-Data-ServiceProvider selected
  4. Klicken Sie mit der rechten Maustaste auf Section. Klicken Sie dann auf Create. Das Formular „Create Section“ wird angezeigt.
  5. Geben Sie im Feld Label Providers List Responsive ein, um den Abschnitt zu benennen.
  6. Klicken Sie oben rechts auf Create and open, um einen Abschnitt zu erstellen. Der Abschnitt Providers List Responsive wird angezeigt.
  7. Klicken Sie im rechten Panel auf Change, um die Vorlage zu ändern. Das Fenster Select a template wird angezeigt.
    Change section template button
  8. Klicken Sie im Fenster Select a template auf Inline wrapping.
  9. Klicken Sie im rechten Panel auf das Icon Add, um ein Steuerelement hinzuzufügen.
    Add control to a section
  10. Klicken Sie in der Liste Add auf Action > Button , um das Schaltflächen-Steuerelement hinzuzufügen.
  11. Gehen Sie mit der Maus über das Steuerelement Button und klicken Sie dann auf Edit this "Button". Das Fenster Cell Properties wird angezeigt.
  12. Geben Sie im Fenster Cell Properties im Feld Text Select provider ein.
    Cell properties for the Select provider button
  13. Klicken Sie auf Submit, um das Fenster zu schließen.
  14. Klicken Sie im rechten Panel auf das Icon Add.
  15. Klicken Sie in der Liste Add auf Data display > Embedded section. Das Dialogfenster Section Include Modal wird angezeigt.
  16. Geben Sie im Dialogfenster Section Include Modal im Feld Section ProvidersList ein oder wählen Sie dies aus.
    Section include modal for an embedded section
  17. Klicken Sie auf Submit, um das Dialogfenster zu schließen.
  18. Klicken Sie oben rechts auf Save, um die responsive Ansicht zu speichern.
     

3 Neu angelegte Ansicht zu Ihrer Anwendung hinzufügen

  1. Erstellen Sie einen neuen Case „Assistance Request“ und führen Sie ihn bis zum Step „Select Service Provider“ fort.
    Tipp: Nicht alle Standorte verfügen über Dienstleister in der Nähe. Geben Sie im Step „Identify Location“ als Standort MA in das Feld State ein, um eine Liste der Service-Provider in Massachusetts, USA, anzuzeigen.
  2. Klicken Sie in der Developer Toolbar auf Live UI.
  3. Klicken Sie im Case „Assistance Request“ auf den Abschnitt Service provider
    image which shows the Select service provider
    Tipp: Sie können die UI-Abschnittsregeln mit dem Tool „Live UI“ vom App Explorer oder Data Explorer aus öffnen. Live UI ist ideal für Abschnitte, die aktiv im Case-Typ verwendet werden.
  4. Klicken Sie im rechten Panel (rechts neben „SelectServiceProvider“) auf Open in Dev Studio, um die Abschnittsregel in Dev Studio zu öffnen.
    Open in Dev Studio icon from Live UI
  5. Klicken Sie in der Abschnittsregel auf Structural. Klicken Sie ein Repeating dynamic layout an und ziehen Sie es in den Abschnitt „Service Provider“.
  6. Klicken Sie im Header Repeating dynamic layout auf View properties. Das Fenster Repeating dynamic layout properties wird angezeigt.
  7. Geben Sie im Fenster Repeating dynamic layout properties im Feld List/Group .ServiceProvider ein oder wählen dies aus.
    Repeating dynamic layout properties window with source specified as Service provider
  8. Klicken Sie auf Submit, um das Fenster zu schließen.
  9. Klicken Sie im App Explorer auf Options > Refresh App Explorer.
    Refresh App Explorer
  10. Klicken Sie auf User Interface > Section.
  11. Verschieben Sie den Abschnitt ProvidersListResponsive per Drag&Drop aus dem App Explorer in das „Repeating Dynamic Layout“. 
    Drag the ProvidersListResponsive section from the App Explorer
  12. Klicken Sie oben rechts auf Save, um die Änderungen am Abschnitt zu speichern.
Hinweis: Um die Dienstleister anzuzeigen, brauchen Sie nur das sich wiederholende dynamische Layout oder die Tabelle. Belassen Sie beide zu Vergleichszwecken.

Arbeit überprüfen

  1. Kehren Sie zur von Ihnen erstellten Case-Instanz „Assistance Request“ zurück.
  2. Klicken Sie rechts oben auf Actions > Refresh.
  3. Klicken Sie im Abschnitt To do auf Go, um zur Ansicht „Select service provider“ zurückzukehren.
  4. Überprüfen Sie, ob der aktualisierte Abschnitt angezeigt wird. 
    confirm your work screen


In den folgenden Missions verfügbar:

Wenn bei Ihrer Schulung Probleme auftreten, lesen Sie bitte die Pega Academy Support FAQs.

Fanden Sie 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