So erstellen Sie ein mobiles Design im Jitterbit App Builder

App Builder macht einen tollen Job, jede App automatisch so umzuwandeln, dass sie mobilfreundlich ist. Allerdings kann es Fälle geben, in denen Sie eine genauere Kontrolle über die mobile Darstellung einer App wünschen. Wie Standarddesigns funktionieren in App Builder kann ein Mobile Theme auf der gesamten Site oder speziell auf einer Seite in einer App angewendet werden. Dieser Artikel enthält Informationen zur Funktionsweise von Mobile Themes in App Builder sowie schrittweise Anleitung zur Grundkonfiguration zum Erstellen eines mobilen Designs für eine App.

Wie mobile Themen funktionieren in App Builder

• Mobile Themen sind Themen, die aufgerufen werden, wenn App Builder erkennt, dass Sie ein Mobilgerät verwenden (beachten Sie, dass dies nur für Mobilgeräte gilt - nicht für iPad- oder Tablet-Geräte).
• Mobile Designs werden auf die gleiche Weise wie Standarddesigns eingerichtet - insbesondere haben sie 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, und wo immer dieses Basisdesign verwendet wird (entweder als anwendungsweites Design oder nur als bestimmtes Design auf Seitenebene), wird das mobile Design zusätzlich aufgerufen.
• Mobile Designs werden „über“ andere bereits vorhandene Designs angewendet, sie ersetzen sie nicht. Damit also Stile eines mobilen Designs angewendet werden können, müssen sie spezifischer sein als alle bereits vorhandenen Stile, die von anderen Designs angewendet werden, die sich bereits auf der Seite befinden.
  

Websiteweite mobile Themen

Bei einer App namens „Budget Calculator“ ist das Basisdesign als „App-Basisdesign“ festgelegt, was bedeutet, dass dieses Design für die gesamte Anwendung gilt. Darüber hinaus gibt es ein Mobildesign namens „Mobile Theme“ - und das Basisdesign für dieses Mobildesign ist als „App-Basisdesign“ festgelegt. In diesem Szenario ist das Mobildesign für die gesamte Anwendung aktiv, da jede Seite das „App-Basisdesign“ verwendet.

Seitenspezifische mobile Themen

Eine App namens „Budget Calculator“ hat eine Seite namens „Home“, auf die ein seitenspezifisches Design namens „Homepage-Design“ angewendet wird - das heißt, dieses Design gilt nur für die „Home“-Seite. Darüber hinaus gibt es ein mobiles Design namens „Homepage-Mobildesign“ - und das Basisdesign für dieses mobile Design ist als „Homepage-Design“ festgelegt. In diesem Szenario ist das mobile Design nur auf der „Home“-Seite der Anwendung aktiv, da es nur auf Seiten aufgerufen wird, die das „Homepage-Design“ verwenden, was in diesem Fall nur die „Home“-Seite ist.

So erstellen Sie ein mobiles Design

Ein Beispiel dafür, wann Sie ein mobiles Design verwenden möchten, ist das Hinzufügen von Polsterungen zu äußeren Containern auf Mobilgeräten, damit alle App-Seiten etwas mehr Platz zum Atmen haben.

Schritt 1: Ein mobiles Design erstellen

Wenn Sie bereit sind, ein Mobile-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 Mobile-Design verwendet werden.

1. Navigieren Sie zu Look & Feel für Ihre App
2. Wählen Sie Mobile unter Designtyp
3. Klicken Sie auf die Schaltfläche +Design
4. Weisen Sie einen Designnamen zu. Beispiel: Design Mobile
5. Legen Sie den Wert Basisdesign auf das Hauptdesign fest, das die App verwendet. Beispiel: Designs Übung
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 erforderlichen mobilen Stile hinzu. Beispiel:

   • Wählen Sie Panel als Komponente
   • Klicken Sie im Styles-Panel auf + Style
   • Setzen Sie Area auf Container
   • Setzen Sie Style Type auf Spacing
   • Setzen Sie unter Values 3-Padding auf die gewünschte Einstellung. Beispiel: 2em
   • 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 auf der gesamten Site angezeigt werden. Daher bestätigen wir, dass das Basisdesign das mit unserer App verknüpfte Design ist.

1. Navigieren Sie zur App Workbench
2. Überprüfen Sie unter App-Einstellungen, ob der Wert Design auf das Basisdesign eingestellt ist, das von Ihrem in Schritt 1 erstellten Mobile-Design verwendet wird
3. Kehren Sie zur Anwendungsansicht zurück, aktualisieren Sie den Webbrowser und testen Sie