Zusätzliche Aufgaben für die Gestaltung mobiler Apps

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

Sie können zum Beispiel eine eigene Listenseite erstellen, die alle Ausgaben in der „Lodging“-Kategorie anzeigt. Ein Manager, der Ihre App nutzt, kann nach einem bestimmten Mitarbeiternamen suchen und erhält Ergebnisse, die alle Unterkunftskosten dieses Mitarbeiters enthalten.

Bevor Sie beginnen: 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 benutzerdefinierte Swipe-Aktionen für die Benutzer zu Listenelementen hinzufügen möchten, konfigurieren Sie zunächst eine Aktion, die für den gesamten Case gilt. Weitere Informationen finden Sie unter Optionale Aktionen zu Cases hinzufügen.

Beim präskriptiven Low-Code-Authoring für Listenseiten können Sie einfach die Case-Typen aus Ihrer Pega-Anwendung verwenden. Anschließend können Sie anpassen, wie Ihre App die Daten des Case-Typs auf mobilen Geräten anzeigt. Tipp: 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 der Offline-Unterstützung für Case-Typen in Ihrer App finden Sie unter Case-Bearbeitung für mobile Apps im Offline-Modus aktivieren.

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 „Mobile 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 von Ihnen gewünschte Icon aus.
6. Wählen Sie in der Liste Case type den Case-Typ 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 Befüllen des Seitenbildschirms verwenden 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. Im Abschnitt List item information konfigurieren Sie, wie die Seite die Arbeitsaufgaben anzeigt:

   Auswahlmöglichkeiten	Aktionen
   Ein Feld zum Arbeitselement hinzufügen	Klicken Sie im Abschnitt List item information auf Add field und wählen Sie dann einen Feldtyp aus. Wählen Sie in der Liste neben dem Feld die Eigenschaft aus, die Sie verwenden möchten, um das Feld zur Laufzeit zu befüllen.
   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 löschen.

   Beispiel: Sie können die folgende Feld- und Eigenschaftskonfiguration nutzen, um die Seite mit Spesenberichten anzuzeigen:
   • Wählen Sie im Feld Primary die Eigenschaft Label aus, die den Berichtnamen definiert.
   • Wählen Sie für das Feld Secondary die Eigenschaft Amount aus, die den Gesamtbetrag der Ausgabe definiert.
   • Wählen Sie für das nächste Feld Secondary die Eigenschaft Create Date/Time aus, die den Tag und die Uhrzeit der Ausgabeneinreichung definiert.
   • Für das nächste Feld Secondary fügen Sie eine benutzerdefinierte Eigenschaft hinzu, die die Kategorie der Ausgabe definiert, z. B. „Lodging“.
   • Wählen Sie für das Feld Status die Eigenschaft Work status, die den Status des Berichts definiert.
9. Im Abschnitt Swipe actions legen Sie fest, was passiert, wenn Benutzer zur Laufzeit über ausgewählte Arbeitselement wischen:

   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 Aktion aus, die Sie hinzufügen möchten.
   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 Aktion aus, die Sie hinzufügen möchten.
   Eine Swipe-Aktion entfernen	Klicken Sie neben der Aktion, die Sie entfernen möchten, auf das Remove-Icon.
   Den Namen der Swipe-Aktion ändern	Klicken Sie neben der Aktion, deren Namen Sie ändern möchten, auf das Icon Click to edit configuration. Geben Sie im Feld Name einen neuen Namen für die Aktion ein. Klicken Sie auf Submit.
   Das Icon einer Swipe-Aktion ändern	Klicken Sie neben der Aktion, deren Icon Sie ändern möchten, auf das Icon Click to edit configuration. Klicken Sie im Abschnitt Icon auf Change. Wählen Sie im Fenster Icon class picker das von Ihnen gewünschte Icon aus. Klicken Sie auf Submit.
   Die Swipe-Richtung für die Aktion ändern	Ziehen Sie die ausgewählte Aktion in die entsprechende Kategorie der Swipe-Richtung. Um zum Beispiel die Swipe-Richtung von rechts nach links zu ändern, ziehen Sie die Aktion in die 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 der Swipe-Richtungen nach oben oder unten.Tipp: 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 mit einem Swipe nach links ausgewählte Spesenberichte 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, wie eine Rechnung.
   • Fügen Sie in der Kategorie Left side actions eine Follow-Aktion hinzu, sodass Benutzer beginnen können, Benachrichtigungen über eine ausgewählte Spesenabrechnung zu erhalten, indem sie nach rechts wischen.
10.  
    Die schwebende Aktionsschaltfläche ist eine Schaltfläche, die in der mobilen App unten auf der Seite erscheint.
    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.

Nächste Schritte: Fügen Sie Ihre mobile Listenseite zur Menüleiste hinzu und überprüfen Sie dann die Änderungen bei Ihrer mobilen App. Weitere Informationen finden Sie unter Elemente zur Menüleiste hinzufügen und Vorschau bei mobilen Apps.

Passen Sie die Icons 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 beginnen: 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:

• andere Icons für die Apps für iOS und Android festlegen wollen
• Icon-Bilder in einem anderen Format als im Standardformat SVG hochladen wollen, z. B. .png.
• Icon-Bilder in einer anderen Auflösung als 512 x 512 Pixel (empfohlen) hochladen wollen
• für Android-Apps eigene Benachrichtigungs-Icons für die Statusleiste Ihrer mobilen App hochladen wollen

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.

Wichtig: 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)	Ersetzen Sie im Ordner common_assets die Datei icon.svg durch Ihre gewünschte 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)	Ersetzen Sie im Ordner common_assets die Datei icon.svg durch Ihre gewünschte Grafikdatei. Ersetzen Sie im Ordner android die Datei icon_round.svg durch Ihre gewählte 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 file als App-Icon. Ersetzen Sie im Ordner android die Datei notification_icon.svg mit der von Ihnen gewünschten Bilddatei. 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) 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 von Ihnen gewünschten Bilddateien. Weitere Informationen über adaptive Icons im Android-Betriebssystem finden Sie im Artikel Adaptive Icons auf der Website Android Developers.
   Splashscreen-Logo (iOS und Android)	Ersetzen Sie im Ordner common_assets die Datei splashlogo.svg durch Ihre gewünschte Bilddatei.

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 im Tab Layout auf der Seite „Mobile Channel“ auf Branding.
7.  
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.

Ergebnis: In der Laufzeit verwendet Ihre mobile App nun Ihre Grafiken aus der .zip-Datei, die Sie im mobilen Channel hochgeladen haben.Nächste Schritte: 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.

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 beginnen: 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.

Achtung: 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 Features 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 Current channel interfaces 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.

   

   

   Ergebnis: 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	Klicken Sie in App Studio auf der Konfigurationsseite des mobilen Channels auf den Bereich Preview your application auf Email me instructions. Ergebnis: In Ihrem E-Mail-Standardprogramm wird eine E-Mail geöffnet. 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. Öffnen Sie die E-Mail auf Ihrem Mobilgerät und kopieren Sie die URL des mobilen Channels. 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üllen.
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	Inhalte des Fensters nach unten wischen
   Mobilen Channel aktualisieren	Tippen Sie in einem beliebigen Fenster des aktuellen mobilen Channels auf das Icon Back. Tippen Sie in der Liste Active auf den Namen des mobilen Channels.