Native mobile Steuerelemente in Jitterbit App Builder
Übersicht
App Builder kann auf einem Mobilgerät bestimmte Steuerelementtypen entweder mit der eigenen Benutzeroberfläche anzeigen, die mit dem Rest Ihrer Anwendung konsistent ist, oder mit den nativen Benutzeroberflächenelementen des Mobilgeräts, wie z. B. seiner integrierten scrollbaren Listenauswahl.
Dieses Verhalten lässt sich auf zwei Ebenen konfigurieren. Konfigurieren Sie es einmalig auf Anwendungsebene, um einen Standard festzulegen, der für jedes Steuerelement gilt, das dies unterstützt, oder konfigurieren Sie ein bestimmtes Steuerelement einzeln, um diesen Standard nur dafür zu überschreiben.
Mobile Rendering auf Anwendungsebene konfigurieren
Die Konfiguration auf Anwendungsebene legt die Standard-Benutzeroberfläche fest, die für jedes Steuerelement verwendet wird, das dies unterstützt, es sei denn, ein bestimmtes Steuerelement überschreibt es einzeln. So konfigurieren Sie es:
- Melden Sie sich als Benutzer in der Gruppe Developers an.
- Suchen Sie Ihre Anwendung im Site Menu und klicken Sie auf das Symbol Stift.
- Wählen Sie Mehr > Edge Case.
- Klicken Sie auf die Schaltfläche Mobile Settings.
Dies zeigt den Abschnitt Control Settings mit den folgenden Umschaltern an, die standardmäßig alle deaktiviert sind:
- Use Native Date: Wenn aktiviert, verwendet die native Benutzeroberfläche des Mobilgeräts zur Anzeige von Datumsfeldern statt der eigenen Benutzeroberfläche von App Builder.
- Use Native Date/Time: Wenn aktiviert, verwendet die native Benutzeroberfläche des Mobilgeräts zur Anzeige von Datums-/Uhrzeitfeldern statt der eigenen Benutzeroberfläche von App Builder.
- Use Native Time: Wenn aktiviert, verwendet die native Benutzeroberfläche des Mobilgeräts zur Anzeige von Uhrzeitfeldern statt der eigenen Benutzeroberfläche von App Builder.
- Use Native List: Wenn aktiviert, verwendet die native Benutzeroberfläche des Mobilgeräts zur Anzeige von Listenfeldern statt der eigenen Benutzeroberfläche von App Builder.
- Use Native Text: Wenn aktiviert, verwendet die native Benutzeroberfläche des Mobilgeräts zur Anzeige von Textfeldern statt der eigenen Benutzeroberfläche von App Builder.
Mobile Rendering auf Steuerelementebene konfigurieren
Um stattdessen den Standard auf Anwendungsebene für ein bestimmtes Steuerelement zu überschreiben, konfigurieren Sie diese Einstellung am Steuerelement selbst. Nur einige Steuerelementtypen, einschließlich List, Date und Text, zeigen auf ihrer Registerkarte Edge Case ein Akkordeon Mobile Settings. So konfigurieren Sie es:
- Wählen Sie Action Drawer > Live Designer für das Panel mit dem Steuerelement, das Sie konfigurieren möchten.
- Wählen Sie das Steuerelement aus der Seitenansicht aus.
- Klicken Sie auf die Registerkarte Edge Case.
- Erweitern Sie Mobile Settings.
Dies zeigt ein Feld Use Mobile Native Control mit den folgenden Optionen an:
- Application Default: (Standard.) Folgt immer der Einstellung „Application" unter Mobile Settings.
- Native: Verwendet die nativen Steuerelemente auf dem Mobilgerät, wie z. B. scrollbare Popup-Listen. Diese Listen berücksichtigen Gruppentitel, zeigen aber keine Untertitel an.
- Vinyl: Zwingt das Mobilgerät, die eigene Version des Steuerelements von App Builder zu rendern, z. B. den Dropdown-Stil des Listenfelds mit Untertiteln.
Einige Steuerelementtypen, wie z. B. Text, zeigen auch ein Feld Mobile Render Type in demselben Akkordeon an, mit dem Sie einen mobil optimierten Eingabetyp wählen können: Email, Phone Number oder URL.
Beispiele
Die folgenden Beispiele vergleichen, wie ein Steuerelement List mit Native ausgewählt gegenüber Vinyl (oder Application Default, wenn die Einstellung auf Anwendungsebene die eigene Benutzeroberfläche von App Builder verwendet) gerendert wird.
Native Beispiele
Mit Native ausgewählt behalten gruppierte Werte ihre Gruppentitel, zeigen aber keine Untertitel an:
Wenn Sie einen Wert auswählen, öffnet sich die scrollbare Auswahl des Mobilgeräts:
App Builder Beispiel
Mit Vinyl ausgewählt stattdessen wird die Liste als Dropdown-Feld angezeigt, das den Beschreibungstitel und Untertitel jeder Option anzeigt:
