Mobiles Design in Jitterbit App Builder erstellen

App Builder konvertiert jede App automatisch so, dass sie mobilfreundlich ist. Es ist jedoch möglich, die mobile Darstellung einer App präziser zu steuern. Wie bei Standard-Designs in App Builder kann ein mobiles Design siteübergreifend oder spezifisch auf einer Seite in einer App angewendet werden. Diese Seite enthält Informationen darüber, wie mobile Designs in App Builder funktionieren, und zeigt die grundlegende Konfiguration zum Erstellen eines mobilen Designs für eine App.

Hinweis

Seit App Builder 4.67 enthalten die vordefinierten Designs Light, Dark, Shapes, Violet, Gradient, Light - Modern und Login Base Theme jeweils ein vorgefertigtes, für Mobilgeräte optimiertes Design mit berührungsfreundlichen Schaltflächen, mobil skalierter Typografie, kompaktem Abstand und einspaltigem Stacking von Formularfeldern. Dies wird automatisch nur auf Apps angewendet, die eines dieser Systemdesigns direkt verwenden, und wird nicht auf ein benutzerdefiniertes Design basierend auf einem dieser Designs übertragen. Informationen zur Verwendung eines dieser mobilen Designs mit einem vorhandenen benutzerdefinierten Design finden Sie unter Vordefiniertes mobiles Design mit benutzerdefinertem Basisdesign verwenden.

So funktionieren mobile Designs in App Builder

Mobile Designs sind Designs, die aufgerufen werden, wenn App Builder erkennt, dass ein Mobilgerät verwendet wird (beachten Sie, dass sie nur auf Mobilgeräten gelten, nicht auf iPad oder Tablet-Geräten).
Mobile Designs werden auf die gleiche Weise eingerichtet wie Standard-Designs. Sie haben vor allem ein Basisdesign, und das Basisdesign bestimmt, wann und wo ein mobiles Design aufgerufen und angewendet wird. Ein mobiles Design benötigt ein Basisdesign, um zu funktionieren. Überall dort, wo dieses Basisdesign verwendet wird (entweder als anwendungsweites Design oder nur als Design auf Seitenebene), wird das mobile Design zusätzlich aufgerufen.
Mobile Designs werden „auf" andere bereits vorhandene Designs angewendet; sie ersetzen diese nicht. Damit Formatierungen aus einem mobilen Design angewendet werden, müssen diese spezifischer sein als bereits auf der Seite angewendete Formatierungen aus anderen Designs.

Hinweis

Weitere Informationen zur Reihenfolge, in der CSS angewendet wird, finden Sie im W3Schools-Artikel zu CSS Specificity.

Siteübergreifende mobile Designs

Eine App namens Budget Calculator hat ihr Basisdesign auf App Base Theme eingestellt, was bedeutet, dass dieses Design in der gesamten Anwendung gilt. Darüber hinaus gibt es ein mobiles Design namens Mobile Theme, und das Basisdesign für dieses mobile Design ist auf App Base Theme eingestellt. In diesem Szenario ist das mobile Design in der gesamten Anwendung aktiv, da jede Seite App Base Theme verwendet.

Seitenbezogene mobile Designs

Eine App namens Budget Calculator hat eine Seite namens Home, auf die ein Design auf Seitenebene namens Home Page Theme angewendet wird, was bedeutet, dass dieses Design nur auf der Seite Home gilt. Darüber hinaus gibt es ein mobiles Design namens Home Page Mobile Theme, und das Basisdesign für dieses mobile Design ist auf Home Page Theme eingestellt. In diesem Szenario ist das mobile Design nur auf der Seite Home der Anwendung aktiv, da es nur auf Seiten aufgerufen wird, die Home Page Theme verwenden, in diesem Fall nur auf der Seite Home.

Mobiles Design erstellen

Ein Beispiel für die Verwendung eines mobilen Designs ist das Hinzufügen von Innenabständen zu äußeren Containern auf Mobilgeräten, damit alle App-Seiten etwas mehr Platz zum Atmen haben.

Schritt 1: Mobiles Design erstellen

Wenn die Erstellung eines mobilen Designs für eine App beginnt, wird davon ausgegangen, dass bereits ein vorhandenes App-Design konfiguriert wurde. Dieses App-Design sollte als Basisdesign für das mobile Design verwendet werden.

Navigiere zu Look & Feel für die App.
Wähle Mobile aus Design Type.
Klicke auf die Schaltfläche + Design.
Ordne einen Design-Namen zu. Beispiel: Theme Mobile.
Lege den Wert Basisdesign auf das Hauptdesign fest, das die App verwendet. Beispiel: Themes Exercise.
Bestätige oder lege die Collection auf eine Collection fest, auf die die App Zugriff hat. Beispiel: NorthwindsTraining.
Lege Type auf Mobile fest.
Klicke auf Speichern.
Füge alle erforderlichen mobilspezifischen Formatierungen hinzu. Beispiel:
Wählen Sie Panel als Komponente aus.
Klicken Sie in der Styles-Leiste auf + Style.
Setzen Sie Area auf Container.
Setzen Sie Style Type auf Spacing.
Setzen Sie unter Values die Option 3-Padding auf die gewünschte Einstellung. Beispiel: 2em.
Klicken Sie auf Save.

Schritt 2: Mobiles Theme mit App verknüpfen

In diesem Schritt verknüpfen Sie das mobile Theme mit der App. In diesem Beispiel soll das mobile Theme siteübergreifend angezeigt werden. Daher stellen Sie sicher, dass das Basis-Theme das mit Ihrer App verknüpfte Theme ist.

Navigieren Sie zur App Workbench.
Überprüfen Sie unter App Settings, dass der Theme-Wert auf das Basis-Theme gesetzt ist, das von Ihrem in Schritt 1 erstellten mobilen Theme verwendet wird.
Kehren Sie zur Anwendungsansicht zurück, aktualisieren Sie den Webbrowser und testen Sie.

Hinweis

Zusätzliche Einstellungen für Mobilgeräte sind auf der Registerkarte App Settings der App Workbench unter More > Edge Case verfügbar.

Vordefiniertes mobiles Theme mit benutzerdefiniertem Basis-Theme verwenden

Vordefinierte mobile Themes werden automatisch nur auf Apps angewendet, die eines der Standard-Systemthemes direkt verwenden. Wenn Ihre App ein benutzerdefiniertes Theme verwendet, das auf einem Systemtheme basiert, führen Sie diese Schritte aus, um das vordefinierte mobile Theme dieses Systemthemes zu verwenden, anstatt ein neues von Grund auf zu erstellen:

Navigieren Sie zu Look & Feel für Ihre App.
Suchen Sie das vordefinierte mobile Theme für das Systemtheme, auf dem Ihr benutzerdefiniertes Theme basiert.
Klicken Sie auf Copy, um das mobile Theme zu Ihrer Sammlung hinzuzufügen.
Setzen Sie das Base Theme der Kopie auf Ihr benutzerdefiniertes Theme.

Das kopierte mobile Theme wird überall dort angewendet, wo Ihr benutzerdefiniertes Theme verwendet wird – genauso wie jedes andere mobile Theme auch.