So erstellen Sie ein mobiles Design im Jitterbit App Builder

App Builder konvertiert jede App automatisch für Mobilgeräte. Dennoch kann es vorkommen, dass Sie die mobile Darstellung einer App genauer steuern möchten. Ähnlich wie Standarddesigns im App Builder kann ein mobiles Design siteweit oder gezielter auf eine Seite einer App angewendet werden. Dieser Artikel erläutert die Funktionsweise von mobilen Designs im App Builder und führt Sie Schritt für Schritt durch die grundlegende Konfiguration zur Erstellung eines mobilen Designs für eine App.

So funktionieren mobile Designs im App Builder

• Mobile Designs sind Designs, die aufgerufen werden, wenn App Builder erkennt, dass Sie ein mobiles Gerät verwenden (beachten Sie, dass sie nur für Mobilgeräte gelten - nicht für iPad- oder Tablet-Geräte). Mobile Themes werden wie Standard-Themes eingerichtet - sie verfügen über ein Basis-Theme. Dieses bestimmt, wann und wo ein Mobile Theme aufgerufen und angewendet wird. Ein Mobile Theme benötigt ein Basis-Theme, um zu funktionieren. Wo immer dieses Basis-Theme verwendet wird (entweder als anwendungsweites Theme oder als Theme auf Seitenebene), wird zusätzlich das Mobile Theme aufgerufen.
• Mobile Designs werden „über“ andere, bereits vorhandene Designs angewendet, sie ersetzen diese nicht. Damit Stile eines mobilen Designs angewendet werden können, müssen sie spezifischer sein als alle bereits vorhandenen Stile, die von anderen, bereits auf der Seite vorhandenen Designs angewendet werden.
  

Hinweis

Siehe den W3 Schools-Artikel zur CSS-Spezifität für weitere Informationen zur Reihenfolge, in der CSS angewendet wird.

Siteweite mobile Themen

Für die App „Budgetrechner“ ist das Basisdesign als „App-Basisdesign“ festgelegt. Dieses Design gilt für die gesamte Anwendung. Zusätzlich gibt es ein mobiles Design namens „Mobile Theme“, dessen Basisdesign als „App-Basisdesign“ festgelegt ist. In diesem Szenario ist das mobile Design in der gesamten Anwendung aktiv, da jede Seite das „App-Basisdesign“ verwendet.

Seitenspezifische mobile Themen

Die App „Budgetrechner“ verfügt über eine Startseite mit dem Seitendesign „Startseite“. Dieses Design gilt nur für die Startseite. Zusätzlich gibt es ein mobiles Design „Startseite Mobiles Design“, dessen Basisdesign als „Startseite Design“ festgelegt ist. In diesem Szenario ist das mobile Design nur auf der Startseite der Anwendung aktiv, da es nur auf Seiten aufgerufen wird, die das „Startseite Design“ verwenden - in diesem Fall also nur auf der Startseite.

So erstellen Sie ein mobiles Design

Ein Beispiel für den Einsatz eines Mobile-Themes ist das Hinzufügen von Paddings zu äußeren Containern auf Mobilgeräten, um allen App-Seiten mehr Platz zum Atmen zu geben.

Schritt 1: Erstellen Sie ein mobiles Design

Wenn Sie ein Mobile-Theme für eine App erstellen möchten, setzen wir voraus, dass Sie bereits ein App-Theme konfiguriert haben. Dieses App-Theme sollte als Basis-Theme für Ihr Mobile-Theme verwendet werden.

1. Navigieren Sie zu Look & Feel Ihrer App.
2. Wählen Sie Mobil unter Theme-Typ.
3. Klicken Sie auf die Schaltfläche +Theme.
4. Weisen Sie einen Theme-Namen zu. Beispiel: Theme Mobile.
5. Legen Sie als Basis-Theme das Haupt-Theme der App fest. Beispiel: Themes Exercise.
6. Bestätigen Sie die Sammlung oder legen Sie sie auf eine Sammlung fest, auf die Ihre App Zugriff hat. Beispiel: NorthwindsTraining.
7. Legen Sie den Typ auf Mobile fest.
8. Klicken Sie auf Speichern.

9. Fügen Sie alle benötigten mobilen Stile hinzu. Beispiel:

   • Panel als Komponente auswählen
   • Im Stil-Bereich auf + Stil klicken
   • Bereich auf Container setzen
   • Stiltyp auf Abstand setzen
   • Unter Werte 3-Padding auf die gewünschte Einstellung setzen. Beispiel: 2em
   • Speichern klicken

Schritt 2: Mobiles Design mit App verknüpfen

In diesem Schritt verknüpfen Sie das Mobile-Theme mit der App. In diesem Beispiel soll das Mobile-Theme websiteweit angezeigt werden. Daher stellen wir sicher, dass das Basis-Theme mit unserer App verknüpft ist.

1. Navigieren Sie zur App Workbench.
2. Überprüfen Sie unter App-Einstellungen, ob der Wert für Theme auf das Basis-Theme Ihres in Schritt 1 erstellten Mobile-Themes eingestellt ist.
3. Kehren Sie zur Anwendungsansicht zurück, aktualisieren Sie den Webbrowser und testen Sie.

Hinweis

Zusätzliche mobile Einstellungen können unter „App Workbench > Mehr > Sonderfall“ konfiguriert werden.