So erstellen Sie ein mobiles Design in Jitterbit App Builder

App Builder kann jede App automatisch mobilfreundlich gestalten. Möglicherweise möchten Sie jedoch eine präzisere Kontrolle über die mobile Darstellung einer App haben. Wie Standard-Designs in App Builder funktionieren, kann ein mobiles Design websiteübergreifend oder spezifischer auf einer Seite in einer App angewendet werden. Diese Seite enthält Informationen darüber, wie mobile Designs in App Builder funktionieren, und führt durch die grundlegende Konfiguration zum Erstellen eines mobilen Designs für eine App.

So funktionieren mobile Designs in App Builder

• Mobile Designs sind Designs, die aufgerufen werden, wenn App Builder erkennt, dass Sie ein Mobilgerät verwenden (beachten Sie, dass sie nur auf Mobilgeräten gelten, nicht auf iPad oder Tablet-Geräten).
• Mobile Designs werden auf die gleiche Weise wie Standard-Designs eingerichtet. Sie haben vor allem ein Basisdesign, und das Basisdesign bestimmt, wann und wo ein mobiles Design aufgerufen und angewendet wird. Ein mobiles Design muss ein Basisdesign haben, 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 „über" andere bereits vorhandene Designs angewendet. Sie ersetzen diese nicht. Damit Stile aus einem mobilen Design angewendet werden, müssen sie spezifischer sein als alle bereits vorhandenen Stile, die von anderen Designs auf der Seite angewendet werden.
  

Websiteü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 der 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, was in diesem Fall nur die Seite Home ist.

So erstellen Sie ein mobiles Design

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

Schritt 1: Erstellen Sie ein mobiles Design

Wenn Sie bereit sind, ein mobiles Design für eine App zu erstellen, gehen wir davon aus, dass Sie bereits ein vorhandenes App-Design konfiguriert haben. Dieses App-Design sollte als Basisdesign für Ihr mobiles Design verwendet werden.

1. Navigieren Sie zu Look & Feel für Ihre App.
2. Wählen Sie Mobile aus Theme Type.
3. Klicken Sie auf die Schaltfläche + Theme.
4. Weisen Sie einen Theme Name zu. Beispiel: Theme Mobile.
5. Legen Sie den Wert Base Theme auf das Hauptdesign fest, das die App verwendet. Beispiel: Themes Exercise.
6. Bestätigen oder legen Sie die Collection auf eine Sammlung fest, auf die Ihre App Zugriff hat. Beispiel: NorthwindsTraining.
7. Legen Sie den Type auf Mobile fest.
8. Klicken Sie auf Save.

9. Fügen Sie alle erforderlichen mobilen Stile hinzu. Beispiel:

10. Wählen Sie Panel als Komponente aus.

11. Klicken Sie auf + Style im Panel Styles.
12. Setzen Sie Area auf Container.
13. Setzen Sie Value Type auf Spacing.
14. Setzen Sie unter Values die Option 3-Padding auf die gewünschte Einstellung. Beispiel: 2em.
15. Klicken Sie auf Save.

Schritt 2: Mobiles Design mit App verknüpfen

In diesem Schritt verknüpfen Sie das mobile Design mit der App. In diesem Beispiel soll das mobile Design siteübergreifend angezeigt werden. Daher bestätigen wir, dass das Basis-Design das Design ist, das mit unserer App verknüpft ist.

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

Vordefiniertes mobiles Design mit benutzerdefiniertem Basis-Design verwenden

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

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

Das kopierte mobile Design wird nun überall dort angewendet, wo Ihr benutzerdefiniertes Design verwendet wird, genauso wie jedes andere mobile Design.