Skip to main content

Zusätzliche Aufgaben für die Gestaltung mobiler Apps

Die folgenden verwandten Aufgaben sind nicht Teil der Challenge für dieses Modul. Hier werden die verschiedenen Use Cases und die Vorgehensweise für diese zusätzlichen Aufgaben beschrieben. Diese Aufgaben gehören zum Prüfungsumfang für die Zertifizierung. In der Prüfung werden Ihnen ggf. Fragen zu diesen Aufgaben gestellt.

Entwicklung mobiler Listenseiten

Pega Community-Logo

Hinweis: Der folgende Inhalt, der von Pega Community stammt, ist hier enthalten, damit Sie die Lernziele des Moduls einfacher erreichen können.

Verbessern Sie die Reaktions- und Ladezeit der Benutzeroberfläche in Ihrer mobilen App, indem Sie die Inhalte Ihrer App als mobile Listenseite anzeigen. So verbessern Sie Ihre App mit einem nativen Bildschirm, der standardmäßig über fließende Übergänge und eine Suchleiste in der Kopfzeile verfügt.

Sie können beispielsweise eine native Listenseite erstellen, in der alle Ausgaben in der Kategorie „Lodging“ angezeigt werden. Ein Manager, der Ihre App nutzt, kann nach einem bestimmten Mitarbeiter-Namen, um Ergebnisse zu erhalten, die alle Spesen zu Unterkünften dieses Mitarbeiters umfassen.

Bevor Sie anfangen: Bereiten Sie das Framework für Ihre Listenseite vor:
  • Erstellen Sie einen mobilen Channel für Ihre App. Weitere Informationen finden Sie unter Mobile Apps einrichten.
  • Stellen Sie sicher, dass Sie über einen Case-Typ verfügen, um den Seitenbildschirm zu veröffentlichen. Erstellen Sie beispielsweise einen Case-Typ für einen Spesenbericht. Weitere Informationen finden Sie unter Case-Typen.
  • Wenn Sie für Benutzer benutzerdefinierte Swipe-Aktionen hinzufügen möchten, die sie bei Listenelementen einsetzen können, konfigurieren Sie zuerst eine Case-weite Aktion. Weitere Informationen finden Sie unter Optionale Aktionen zu Cases hinzufügen.

Bei der präskriptiven Low-Code-Entwicklung für Listenseiten nutzen Sie einfach Case-Typen von Ihrer Pega-Anwendung. Anschließend können Sie anpassen, wie Ihre App die Daten des Case-Typs auf mobilen Geräten anzeigt.

Hinweis: Wenn Sie eine mobile Listenseite mit einem offline aktivierten Case-Typ erstellen und dann diese Listenseite zur Navigation Ihrer App hinzufügen, stellt der automatische Paketprozess sicher, dass alle Cases, auf die die Listenseite verweist, für die Nutzung im Offline-Modus verfügbar sind. Weitere Informationen zur Aktivierung des Offline-Supports für Case-Typen in Ihrer App finden Sie unter Aktivieren der Case-Verarbeitung in offline aktivierten mobilen Apps.
  1. Öffnen Sie Ihren mobilen Channel:

    1. Klicken Sie im Navigationspanel von App Studio auf Channels.

    2. Im Bereich Current channel interfaces klicken Sie auf die Kachel, die einen mobilen Channel für Ihre App darstellt.

  2. Klicken Sie auf der Seite des mobilen Channel im Tab Content auf die Kategorie List pages.

  3. Erstellen Sie eine neue Listenseite, indem Sie auf Add klicken.

  4. Geben Sie im Abschnitt Edit page im Feld Page name den Namen der Listenseite ein.

  5. Optional:

    Um das Standard-Icon auf der mobilen Listenseite zu ändern, wählen Sie im Bildkatalog ein Icon aus:

    1. Klicken Sie neben dem Feld Page name auf das aktuelle Icon.

    2. Wählen Sie im Fenster Icon class picker das gewünschte Icon aus.

  6. Wählen Sie in der Liste Case type den Case-Typen aus, der Ihren Geschäftsprozess unterstützt.

    Beispiel: Wählen Sie für eine Listenseite, bei der Benutzer Spesen in unterschiedlichen Kategorien eingeben, z. B. in der Kategorie „Lodging“, den Case-Typ „expense reporting“ aus.
  7. Wählen Sie in der Liste Data page die Listendatenquelle aus, die Sie zum Ausfüllen des Seitenbildschirms nutzen möchten.

    Beispiel: Wählen Sie die Datenansicht aus, in der alle Spesenberichte aus der Kategorie „Lodging“ gespeichert werden.
    Hinweis: Wenn Sie einen Case-Typen erstellen, erstellt die Pega-Plattform automatisch eine Listendatenquelle, die Sie in Ihren mobilen Listenseiten nutzen können.
  8. Konfigurieren Sie im Abschnitt List item information, wie die Seite die Arbeitselemente anzeigt:

    Auswahlmöglichkeiten Aktionen
    Ein Feld zum Arbeitselement hinzufügen
    1. Klicken Sie im Abschnitt List item information auf Add field und wählen Sie dann einen Feldtypen aus.

    2. Wählen Sie in der Liste neben dem Feld die Eigenschaft aus, die Sie zum Ausfüllen des Felds zur Laufzeit nutzen möchten.

    Ein Feld vom Arbeitselement entfernen Klicken Sie im Abschnitt List item information neben dem Feld, das Sie entfernen möchten, auf das Icon Delete this row.
    Beispiel: Sie können die folgende Feld- und Eigenschaftskonfiguration nutzen, um die Seite mit Spesenberichten anzuzeigen:
    • Wählen Sie für das Feld Primary die Eigenschaft Label aus, die den Berichtnamen definiert.
    • Wählen Sie für das Feld Secondary die Eigenschaft Amount aus, die die Gesamthöhe der Spesen definiert.
    • Wählen Sie im nächsten Secondary Feld die Eigenschaft Create Date/Time aus, die das Datum und die Uhrzeit definiert, wann die Spesen eingereicht wurden.
    • Fügen Sie im nächsten Secondary Feld eine benutzerdefinierte Eigenschaft hinzu, die die Spesenkategorie definiert, zum Beispiel „Lodging“.
    • Wählen Sie für das Feld Status die Eigenschaft Work status aus, die den Status des Berichts definiert.
  9. Geben Sie im Abschnitt Swipe actions an, was passiert, wenn Benutzer zur Laufzeit über ausgewählte Arbeitselemente swipen:

    Auswahlmöglichkeiten Aktionen
    Eine Rechts-nach-links-Swipe-Aktion hinzufügen Klicken Sie in der Kategorie Right side actions auf Add action, und wählen Sie dann die hinzuzufügende Aktion aus.
    Eine Links-nach-rechts-Swipe-Aktion hinzufügen Klicken Sie in der Kategorie Left side actions auf Add action und wählen Sie dann die gewünschte Aktion aus.
    Eine Swipe-Aktion entfernen Klicken Sie neben der Aktion, die Sie entfernen möchten, auf das Icon Remove.
    Den Namen der Swipe-Aktion ändern
    1. Klicken Sie neben der Aktion, für die Sie den Namen ändern möchten, auf das Icon Click to edit configuration.

    2. Geben Sie im Feld Name einen neuen Namen für die Aktion ein.

    3. Klicken Sie auf Submit.

    Das Icon einer Swipe-Aktion ändern
    1. Klicken Sie neben der Aktion, für die Sie das Icon ändern möchten, auf das Icon Click to edit configuration.

    2. Klicken Sie im Abschnitt Icon auf Change.

    3. Wählen Sie im Fenster Icon class picker das gewünschte Icon aus.

    4. Klicken Sie auf Submit.

    Die Swipe-Richtung für die Aktion ändern Ziehen Sie die auswählte Aktion zur entsprechenden Kategorie für die Swipe-Richtung.

    Wenn Sie die Swipe-Richtung beispielsweise zu rechts nach links ändern möchten, ziehen Sie die Aktion zur Kategorie Right side actions.

    Die Reihenfolge der Swipe-Aktionen ändern
    Hinweis: Diese Option ist verfügbar, wenn Sie mehr als eine Aktion für eine Swipe-Richtung hinzufügen.
    Ziehen Sie die ausgewählte Aktion in der Liste für die Swipe-Richtung nach oben oder unten.
    Hinweis: Stellen Sie sicher, dass die wichtigere Aktion für Ihre Seite direkt am Bildschirmrand angezeigt wird, damit das Element für die Benutzer Ihrer mobilen App einfacher zu erreichen ist.
    Beispiel: Für eine Seite mit Spesenberichten können Sie die folgenden Swipe-Aktionen konfigurieren:
    • Fügen Sie in der Kategorie Right side actions eine Aktion Edit details hinzu, damit Benutzer die ausgewählten Spesenberichte mit einem Swipe nach links bearbeiten können.
    • Fügen Sie in der Kategorie Right side actions eine Case-weite Aktion Attach file hinzu, damit Benutzer mit einem Swipe nach links Dateien an ausgewählte Spesenberichte anhängen können, zum Beispiel eine Rechnung.
    • Fügen Sie in der Kategorie Left side actions eine Aktion Follow hinzu, damit Benutzer mit einem Swipe nach rechts Benachrichtigungen zu einem ausgewählten Spesenbericht erhalten können.
  10. Optional:

    Um eine flexible Aktions-Schaltfläche hinzuzufügen, die ein neues Arbeitselement erstellt, wenn Benutzer auf die Schaltfläche tippen, wählen Sie die Checkbox Show create item button aus.

    Die flexible Aktions-Schaltfläche ist eine Schaltfläche, die unten auf der Seite in der mobilen App angezeigt wird.
    Beispiel: Für die mobile Listenseite mit einer Liste an Spesenberichten, erstellt die flexible Actions-Schaltfläche einen neuen Spesenbericht.
  11. Klicken Sie auf Save.

Beispiel: Ein Entwickler einer mobilen App entwickelt eine Listenseite für die uPlus-Spesenbericht-App, mit der Benutzer durch Spesen scrollen und die wichtigsten Informationen ansehen können, zum Beispiel das Label und den Typ der Spesen.
Eine benutzerdefinierte Spesenlistenseite mit Swipe-Aktionen und einer flexiblen Aktions-Schaltfläche entwerfen
Hinweis: Fügen Sie Ihre mobile Listenseite zur Menüleiste hinzu und prüfen Sie dann die Änderungen an Ihrer mobilen App. Weitere Informationen finden Sie unter Elemente zur Menüleiste hinzufügen und Vorschau bei mobilen Apps.
  • Entwicklung mobiler Case-Seite für Cosmos React-Anwendungen

    Passen Sie Case-Seiten in der Low-Code-Entwicklungsumgebung an, um die wichtigsten Informationen in einer gemeinsamen, benutzerfreundlichen Mobilansicht hervorzuheben. So stellen Sie sicher, dass Benutzer Cases auf ihren mobilen Geräten effizient anzeigen und bearbeiten können.

  • Ein Such-Gadget hinzufügen

    Verbessern Sie die Benutzerfreundlichkeit Ihrer mobilen App duch die Konfiguration und Aktivierung der Suchfunktion. Sie können relevantere Suchergebnisse garantieren und die Suchgeschwindigkeit erhöhen, indem Sie bei bestimmten Case-Typen den Suchumfang reduzieren.

  • Eine flexible Aktions-Schaltfläche hinzufügen

    Weisen Sie auf die wichtigste Aktion auf einer Seite hin, indem Sie bei Ihrer mobilen App eine flexible Aktions-Schaltfläche hinzufügen. Sie können beispielsweise eine flexible Aktions-Schaltfläche hinzufügen, die einen Case-Flow für die Erstellung eines neuen Spesenberichts in Ihrer mobilen Spesen-App startet.

  • Elemente zur Menüleiste hinzufügen

    Schaffen Sie in Ihrer mobilen App ein effektives Navigationserlebnis, indem Sie Seiten und Aktionen zur Menüleiste hinzufügen. Sie können beispielsweise eine benutzerdefinierte Profilseite zur Menüleiste Ihrer Spesen-App hinzufügen, damit Benutzer bequem mit ihren grundlegenden Kontaktdaten auf den Bildschirm zugreifen können.

Anpassung der Bild-Assets mobiler Apps

Passen Sie die Icons in Ihrer mobilen App an die Branding-Anforderungen Ihres Unternehmens oder Projekts an, indem Sie die Standardbilder durch eigene Grafiken ersetzen.

Sie können die Icons auf dem Start- und Home-Bildschirm der mobilen App selbst gestalten. Laden Sie dafür einfach eigene Grafikdateien als eine einzige .zip-Datei hoch.
Bevor Sie anfangen: Erstellen Sie einen mobilen Channel für Ihre mobile App. Weitere Informationen finden Sie unter Mobile Apps einrichten.

Hinweis: Führen Sie diesen Vorgang nur durch, wenn Sie Folgendes machen wollen:
  • andere Icons für die Apps für iOS und Android festlegen
  • Icon-Bilder in einem anderen Format als im Standardformat SVG hochladen, z. B. .png
  • Icon-Bilder in einer anderen Auflösung als 512 x 512 Pixel (empfohlen) hochladen
  • für Android-Apps eigene Benachrichtigungs-Icons für die Statusleiste Ihrer mobilen App hochladen

Ansonsten lassen sich die Icons und der Start-Bildschirm Ihrer mobilen App auch in einer Low-Code-Umgebung anpassen. Weitere Informationen finden Sie unter Icons und Startbildschirm von mobilen Apps anpassen.

Hinweis: Beim Ersetzen der Standard-Icons in der .zip-Datei mit eigenen Grafiken müssen Sie darauf achten, dass in Ihrer .zip-Datei die Verzeichnisstruktur, die Dateinamen und die Icon-Größen exakt der .zip-Standarddatei entsprechen. Falls eine bestimmte Grafikdatei in Ihrer benutzerdefinierten .zip-Datei fehlt, skaliert das Betriebssystem Ihres Mobilgeräts die vorhandenen Icons neu (Android) oder ersetzt die fehlenden Grafiken durch die Standard-Icons des Betriebssystems (iOS).
  1. Laden Sie die .zip-Datei mit vereinfachten Grafikdateien herunter, die zu Ihrer Version des Pega Mobile Client passt.

    Weitere Informationen finden Sie unter Branding-Vorlagen für den Pega Mobile Client.
  2. Extrahieren Sie den Inhalt der .zip-Datei.

  3. Ersetzen Sie die Grafikdateien in den Ordnern, die Sie aus der .zip-Datei extrahiert haben, um eine oder alle der folgende Grafiken anzupassen:

    Auswahlmöglichkeiten Aktionen
    Mobile App Icon (iOS)
    1. Ersetzen Sie im Ordner common_assets die Datei icon.svg durch Ihre Grafikdatei.

      Hinweis: Verwenden Sie ein rechteckiges Icon, wenn Sie Ihre mobilen App im Apple App Store anbieten wollen. Mobilgeräte mit iOS skalieren zudem die Datei icon.svg und verwenden sie als Icon, um Benachrichtigungen in der Statusleiste Ihrer mobilen App anzuzeigen.
    Mobile App Icon (Android)
    1. Ersetzen Sie im Ordner common_assets die Datei icon.svg durch Ihre Grafikdatei.

    2. Ersetzen Sie im Ordner android die Datei icon_round.svg durch Ihre Grafikdatei.

      Hinweis: Verwenden Sie ein rundes Icon. Android-Geräte, die runde Start-Icons unterstützen, verwenden die Datei icon_round.svg statt der Datei icon.svg als App-Icon.
    3. Ersetzen Sie im Ordner android die Datei notification_icon.svg durch Ihre Grafikdatei.

      Android-Mobilgeräte verwenden dieses Icon, um Benachrichtigungen in der Statusleiste Ihrer mobilen App anzuzeigen.
      Hinweis: Verwenden Sie ein Icon, das folgende Anforderungen erfüllt:
      • Bildformat: 32-bit .png (mit Alpha-Kanal)
      • Transparentes Bild
      • Transparenzfarben-Index: Weiß (#FFFFFF)
    4. Optional:

      Um adaptive Symbole für Ihre mobile App zu aktivieren, ersetzen Sie im Ordner android die Dateien icon_background.svg und icon_foreground.svg mit den Bilddateien, die Sie verwenden möchten.

      Weitere Informationen über adaptive Icons im Android-Betriebssystem finden Sie im Artikel Adaptive Icons auf der Website für Android Developer.
    Splashscreen-Logo (iOS und Android) Ersetzen Sie im Ordner common_assets die Datei splashlogo.svg durch Ihre Grafikdatei.
  4. Wählen Sie die Ordner aus, die Sie aus der .zip-Datei extrahiert haben und die jetzt Ihre Grafiken enthalten, und komprimieren Sie diese in einer einzigen .zip-Datei.

  5. Öffnen Sie Ihren mobilen Channel:

    1. Klicken Sie im Navigationspanel von App Studio auf Channels.

    2. Im Bereich Current channel interfaces klicken Sie auf die Kachel, die einen mobilen Channel für Ihre App darstellt.

  6. Klicken Sie auf der Seite „Mobile Channel“ im Tab Layout auf Branding.

  7. Klicken Sie im Bereich Branding auf das Icon Configure advanced branding und wählen Sie dann die Checkbox Advanced Branding aus.

  8. Klicken Sie im Bereich Upload custom branding file auf Choose file und wählen Sie dann die .zip-Datei mit Ihren Grafikdateien aus.

  9. Bestätigen Sie Ihre Auswahl, indem Sie auf OK klicken.

  10. Klicken Sie auf Save.

Hinweis: In der Laufzeit verwendet Ihre mobile App nun Ihre Grafiken aus der .zip-Datei, die Sie im mobilen Channel hochgeladen haben.
Hinweis: Bestätigen Sie die Änderungen an Ihrer mobilen App, indem Sie die App generieren, installieren und starten. Weitere Informationen finden Sie unter Native mobile Apps generieren.

Vorschau mobiler Apps

Bevor Sie für Ihre mobile App eine ausführbare Datei erzeugen, stellen Sie bitte sicher, dass die Seiten und das Layout Ihrem Design entsprechen und dass die Logikfunktionen der Anwendung wie gedacht funktionieren. Testen Sie die App mit einem Mobilgerät und der Pega Mobile Preview App. So erhalten Sie eine Vorschau des mobilen Channels, den Sie für eine Anwendung konfigurieren.

Mit Pega Mobile Preview müssen Sie keine Zertifikate anfordern oder ausführbare Dateien erzeugen, bevor Sie auf die Inhalte Ihrer mobilen App zugreifen können.
Bevor Sie anfangen: Vorschau einer mobilen App vorbereiten:
  • Konfigurieren Sie den mobilen Channel. Weitere Informationen finden Sie unter Mobile Apps einrichten.
  • Laden Sie Pega Mobile Preview aus dem App Store oder von Google Play auf Ihr Mobilgerät und installieren Sie die App.

Wenn Sie eine mobile App für eine Anwendung entwickeln, sollten Sie die App nach jeder Änderung, die sich auf die Anwendung auswirkt, in der Vorschau für den mobilen Channel mit einem Mobilgerät kontrollieren. Zum Beispiel: Nachdem Sie eine Seite hinzugefügt, das Layout geändert oder den Flow abgeändert haben, sollten Sie eine Vorschau erzeugen.

Hinweis: Verwenden Sie Pega Mobile Preview nicht für Produktionszwecke.

Pega Mobile Preview zeigt eine Annäherung an die Benutzererfahrung. Das kann Ihnen bei der Entwicklung und beim Testen Ihrer mobilen App helfen, bevor Sie eine ausführbare Datei erzeugen. Pega Mobile Preview unterstützt bestimmte Funktionen nicht, wie z. B. Push-Benachrichtigungen.

Mobile Channels, die Sie zu Pega Mobile Preview hinzufügen, laufen nach 30 Tagen ab.

  1. Klicken Sie im Navigationspanel von App Studio auf Channels.

  2. Klicken Sie im Bereich Aktuelle Channel-Schnittstellen auf die Kachel, die dem mobilen Channel entspricht, den Sie ändern möchten.

  3. Klicken Sie oben rechts auf der Konfigurationsseite des mobilen Channels auf das Icon Pega Mobile Preview.

    Icon von Pega Mobile Preview auf der Konfigurationsseite des mobilen Channels
    Hinweis: Der Bereich Preview your application mit einem QR-Code wird angezeigt.
  4. Öffnen Sie auf Ihrem Mobilgerät Pega Mobile Preview und tippen Sie auf Start configuring.

  5. Fügen Sie im Fenster „Channel Definition“ Ihren mobilen Channel zur Liste der verfügbaren mobilen Kanäle hinzu:

    Auswahlmöglichkeiten Aktionen
    QR-Code scannen Tippen Sie auf Scan the QR code, richten Sie die Kamera auf den QR-Code im Bereich Preview your application und warten Sie, bis der Code erkannt wird.
    URL des mobilen Channels eingeben
    1. Klicken Sie in App Studio auf der Konfigurationsseite des mobilen Channels auf den Bereich Preview your application auf Email me instructions.

      Hinweis: In Ihrem E-Mail-Standardprogramm wird eine E-Mail geöffnet.
    2. Schicken Sie diese E-Mail von Ihrem E-Mail-Programm an eine E-Mail-Adresse, auf die Sie von Ihrem Mobilgerät aus zugreifen können.

    3. Öffnen Sie die E-Mail auf Ihrem Mobilgerät und kopieren Sie die URL des mobilen Channels.

    4. Tippen Sie in Pega Mobile Preview auf Enter URL manually und fügen Sie die Adresse des mobilen Channels ein.

    Sie können der Liste Active weitere Channels hinzufügen, indem Sie auf das Icon Add tippen oder durch Swipen nach links oder rechts Channels entfernen.
  6. Tippen Sie in der Liste Active auf den Channel, auf den Sie zugreifen möchten.

  7. Melden Sie sich im Authentifizierungs-Fenster beim Channel an.

  8. Testen Sie den mobilen Channel, um sicherzustellen, dass das Layout und die Funktionalität der mobilen App die Anforderungen erfüllt.

  9. Optional:

    Um den mobilen Channel zu aktualisieren, nachdem Sie die mobile App auf der Pega-Plattform geändert haben, aktualisieren Sie den Channel.

    Auswahlmöglichkeiten Aktionen
    Aktuelles Fenster aktualisieren
    1. Inhalte des Fensters nach unten wischen

    Mobilen Channel aktualisieren
    1. Tippen Sie in einem beliebigen Fenster des aktuellen mobilen Channels auf das Icon Back.

    2. Tippen Sie in der Liste Active auf den Namen des Channels.

    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