Listendaten in Ansichten anzeigen
Archived
3 Aufgaben
10 Min.
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
Genaue Übungsschritte
1 Listenansicht für Dienstleister erstellen
- Klicken Sie im Navigationspanel von Dev Studio auf Data types > Service provider, um den Datentyp „Service Provider“ zu öffnen.
- Klicken Sie auf den Tab Views.
- Klicken Sie auf Create new view, um eine neue Ansicht zu erstellen.
- Klicken Sie oben links im neuen Fenster New View auf New View, um den Ansichtsnamen zu ändern.
- Geben Sie Providers list ein, um die Ansicht umzubenennen.
- Klicken Sie im linken Fensterpanel auf den Eintrag Fields.
- Gehen Sie mit der Maus über das Feld Name und klicken Sie dann auf Add to view.
- Wählen Sie in der Liste Options Read-only aus.
- Wiederholen Sie Schritt 7, um die Felder Address und LatLong hinzuzufügen.
- Klicken Sie auf Submit, um das Dialogfenster zu schließen.
- Klicken Sie oben rechts auf Save, um die Listenansicht „Providers“ zu speichern.
2 Responsive Ansicht erstellen
- Klicken Sie im Navigationspanel von Dev Studio auf App, um den App Explorer zu öffnen.
- 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.
- Klicken Sie auf User Interface > Section.
- Klicken Sie mit der rechten Maustaste auf Section. Klicken Sie dann auf Create. Das Formular „Create Section“ wird angezeigt.
- Geben Sie im Feld Label Providers List Responsive ein, um den Abschnitt zu benennen.
- Klicken Sie oben rechts auf Create and open, um einen Abschnitt zu erstellen. Der Abschnitt Providers List Responsive wird angezeigt.
- Klicken Sie im rechten Panel auf Change, um die Vorlage zu ändern. Das Fenster Select a template wird angezeigt.
- Klicken Sie im Fenster Select a template auf Inline wrapping.
- Klicken Sie im rechten Panel auf das Icon Add, um ein Steuerelement hinzuzufügen.
- Klicken Sie in der Liste Add auf Action > Button , um das Schaltflächen-Steuerelement hinzuzufügen.
- Gehen Sie mit der Maus über das Steuerelement Button und klicken Sie dann auf Edit this "Button". Das Fenster Cell Properties wird angezeigt.
- Geben Sie im Fenster Cell Properties im Feld Text Select provider ein.
- Klicken Sie auf Submit, um das Fenster zu schließen.
- Klicken Sie im rechten Panel auf das Icon Add.
- Klicken Sie in der Liste Add auf Data display > Embedded section. Das Dialogfenster Section Include Modal wird angezeigt.
- Geben Sie im Dialogfenster Section Include Modal im Feld Section ProvidersList ein oder wählen Sie dies aus.
- Klicken Sie auf Submit, um das Dialogfenster zu schließen.
- Klicken Sie oben rechts auf Save, um die responsive Ansicht zu speichern.
3 Neu angelegte Ansicht zu Ihrer Anwendung hinzufügen
- 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.
- Klicken Sie in der Developer Toolbar auf Live UI.
- Klicken Sie im Case „Assistance Request“ auf den Abschnitt 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.
- Klicken Sie im rechten Panel (rechts neben „SelectServiceProvider“) auf Open in Dev Studio, um die Abschnittsregel in Dev Studio zu öffnen.
- Klicken Sie in der Abschnittsregel auf Structural. Klicken Sie ein Repeating dynamic layout an und ziehen Sie es in den Abschnitt „Service Provider“.
- Klicken Sie im Header Repeating dynamic layout auf View properties. Das Fenster Repeating dynamic layout properties wird angezeigt.
- Geben Sie im Fenster Repeating dynamic layout properties im Feld List/Group .ServiceProvider ein oder wählen dies aus.
- Klicken Sie auf Submit, um das Fenster zu schließen.
- Klicken Sie im App Explorer auf Options > Refresh App Explorer.
- Klicken Sie auf User Interface > Section.
- Verschieben Sie den Abschnitt ProvidersListResponsive per Drag&Drop aus dem App Explorer in das „Repeating Dynamic Layout“.
- 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
- Kehren Sie zur von Ihnen erstellten Case-Instanz „Assistance Request“ zurück.
- Klicken Sie rechts oben auf Actions > Refresh.
- Klicken Sie im Abschnitt To do auf Go, um zur Ansicht „Select service provider“ zurückzukehren.
- Überprüfen Sie, ob der aktualisierte Abschnitt angezeigt wird.