Layout-Möglichkeiten für adaptive Formulare

Mit Adobe Experience Manager (AEM) können Sie benutzerfreundliche adaptive Formulare erstellen, den Endbenutzern eine dynamische Erfahrung bietet. Mit dem Formular-Layout wird gesteuert, wie Elemente bzw. Komponenten auf einem adaptiven Formular angezeigt werden.

Vorausgesetztes Wissen

Bevor Sie die verschiedenen Layoutfunktionen adaptiver Formulare kennenlernen, lesen Sie die folgenden Artikel, um mehr über adaptive Formulare zu erfahren.

Einführung in AEM Forms

Einführung in die Erstellung von Formularen

Typen von Layouts

In adaptiven Formularen stehen Ihnen die folgenden Layouttypen zur Verfügung:

Bereichslayout Steuert, wie in einem Bereich befindliche Elemente oder Komponenten auf einem Gerät angezeigt werden.

Layout für Mobilgeräte Steuert die Navigation eines Formulars auf einem mobilen Gerät. Wenn das Gerät eine Breite von mindestens 768 Pixel aufweist, wird das Layout als Layout für Mobilgeräte betrachtet und für Mobilgeräte optimiert.

Symbolleisten-Layout Steuert die Platzierung von Aktionsschaltflächen in der Symbolleiste bzw. in der Bereichssymbolleiste in einem Formular.

Alle diese Bedienfeldlayouts werden in den folgenden Verzeichnissen definiert:

/libs/fd/af/layouts.

Bereichslayout

Formularersteller können jedem Bedienfeld eines adaptiven Formulars ein Layout zuordnen, einschließlich des Stammbedienfelds.

Die Bereichslayouts stehen unter /libs/fd/af/layouts/panel zur Verfügung.

Abbildung: Liste der Bereichslayouts in adaptiven Formularen

Responsiv – alles auf einer Seite ohne Navigation

Verwenden Sie dieses Bereichslayout, um ein responsives Layout zu erstellen, das sich ohne spezielle Navigation an die Bildschirmgröße Ihres Geräts anpasst.

Mit diesem Layout können Sie mehrere Adaptives Bedienfeldformular Komponenten nacheinander innerhalb des Bedienfelds.

Abbildung: Ein Formular mit einem responsiven Layout, wie auf einem kleinen Bildschirm dargestellt

Abbildung: Ein Formular, das ein responsives Layout verwendet, wie es auf einem großen Bildschirm angezeigt wird

Assistent – ein Mehrstufenformular, bei dem jeder einzelne Schritt genau angezeigt wird

Verwenden Sie dieses Bereichslayout, um innerhalb eines Formulars eine geführte Navigation anzubieten. Beispielsweise können Sie dieses Layout verwenden, wenn Sie in einem Formular obligatorische Informationen erfassen und dabei die Benutzer Schritt für Schritt anleiten möchten.

Verwenden Sie die Panel adaptive form -Komponente, um eine schrittweise Navigation innerhalb eines Bedienfelds bereitzustellen. Wenn Sie dieses Layout verwenden, gehen Benutzer erst dann zum nächsten Schritt über, wenn der aktuelle Schritt abgeschlossen ist.

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

Abbildung: Ausdruck zum Abschluss von Schritten im Assistentenlayout für ein mehrstufiges Formular

Abbildung: Ein Formular mit dem Assistenten

Layout für Akkordeon-Design

Mit diesem Layout können Sie die Panel adaptive form -Komponente in einem Bedienfeld mit Akkordeon-Stil-Navigation. Mit diesem Layout können Sie außerdem wiederholbare Bereiche erstellen. Wiederholbare Bereiche ermöglichen es Ihnen, Bereiche nach Bedarf hinzuzufügen oder zu entfernen. Sie können dabei festlegen, wie oft sich ein Bereich mindestens oder maximal wiederholen darf. Außerdem kann anhand der in den Bereichselementen angegebenen Informationen der Titel des Bereichs dynamisch festgelegt werden.

Ein Zusammenfassungsausdruck kann verwendet werden, um im Titel des minimierten Bereichs die vom Endbenutzer eingegebenen Werte anzuzeigen.

Abbildung: Mit dem Akkordeon-Layout erstellte wiederholbare Bedienfelder

Layout mit Registerkarten – Registerkarten werden auf der linken Seite angezeigt

Mit diesem Layout können Sie die Panel adaptive form in einem Bedienfeld mit Registerkartennavigation. Die Registerkarten befinden sich auf der linken Seite der Bereichsinhalte.

Abbildung: Registerkarten links von einem Bedienfeld

Layout mit Registerkarten – Registerkarten werden oben angezeigt

Mit diesem Layout können Sie die Panel adaptive form Komponente in einem Bedienfeld mit Registerkartennavigation. Die Registerkarten befinden sich oberhalb der Bereichsinhalte.

Abbildung: Registerkarten, die oben in einem Bedienfeld angezeigt werden

Layouts für Mobilgeräte

Layouts für Mobilgeräte ermöglichen eine benutzerfreundliche Navigation auf mobilen Geräten mit relativ kleinen Bildschirmen. Bei Layouts für Mobilgeräte werden für die Formularnavigation entweder Registerkarten oder Assistenten verwendet. Durch die Anwendung eines Layouts für Mobilgeräte wird für das gesamte Formular ein einziges Layout zur Verfügung gestellt.

Dieses Layout steuert die Navigation mit einer Navigationsleiste und einem Hauptnavigationsmenü. In der Navigationsleiste befinden sich die Symbole < und >, um den nächsten und den vorigen Navigationsschritt im Formular anzuzeigen.

Die Layouts für Mobilgeräte sind unter /libs/fd/af/layouts/mobile/ verfügbar. Die folgenden Layouts für Mobilgeräte sind in adaptiven Formularen standardmäßig verfügbar.

Abbildung: Liste der Layouts für Mobilgeräte in adaptiven Formularen

Wenn Sie ein Layout für Mobilgeräte verwenden, ist das Formularmenü für den Zugriff auf verschiedene Formularbedienfelder verfügbar, indem Sie auf Symbol.

Layout mit Bereichstiteln in der Formularkopfzeile

Wie der Name schon sagt, werden bei diesem Layout neben dem Navigationsmenü und der Navigationsleiste Bedienfeldtitel angezeigt. Außerdem enthält dieses Layout Symbole für „Nächste“ und „Vorherige“ zur Navigation.

Abbildung: Layouts für Mobilgeräte mit Bedienfeldtiteln in den Formularkopfzeilen

Layout ohne Bereichstitel in der Formularkopfzeile

Wie der Name schon sagt, werden bei diesem Layout nur das Navigationsmenü und die Navigationsleiste ohne Bedienfeldtitel angezeigt. Außerdem enthält dieses Layout Symbole für „Nächste“ und „Vorherige“ zur Navigation.

Abbildung: Layouts für Mobilgeräte ohne Bedienfeldtitel in den Formularkopfzeilen

Symbolleistenlayouts

Ein Symbolleistenlayout steuert die Positionierung und Anzeige aller Aktionsschaltflächen, die Sie zu Ihren adaptiven Formularen hinzufügen. Das Layout kann auf Formular- oder Bedienfeldebene hinzugefügt werden.

Abbildung: Liste der Symbolleistenlayouts in adaptiven Formularen

Symbolleistenlayouts: /libs/fd/af/layouts/toolbar Standort. Adaptive Formulare stehen in den folgenden Symbolleistenlayouts standardmäßig zur Verfügung.

Standardlayout für Symbolleiste

Dieses Layout wird als Standardlayout ausgewählt, wenn Sie einem adaptiven Formular Aktionsschaltflächen hinzufügen. Bei Auswahl dieses Layouts wird sowohl bei Desktop- als auch bei Mobilgeräten dasselbe Layout angezeigt.

Außerdem können Sie mehrere Symbolleisten mit Aktionsschaltflächen hinzufügen, die mit diesem Layout konfiguriert wurden. Eine Aktionsschaltfläche ist mit einem Formularsteuerelement verknüpft. Sie können die Werkzeugleisten so konfigurieren, dass sie sich vor oder nach einem Bedienfeld befinden.

Abbildung: Standardansicht der Symbolleiste

Festes Layout für Mobilgeräte für Symbolleiste

Wählen Sie dieses Layout aus, um für Desktop- und Mobilgeräte alternative Layouts zur Verfügung zu stellen.

Für das Desktoplayout können Sie mithilfe bestimmter Beschriftungen Aktionsschaltflächen hinzufügen. Mit diesem Layout kann nur eine Symbolleiste konfiguriert werden. Wenn mit diesem Layout mehr als eine Symbolleiste konfiguriert wird, gibt es bei mobilen Geräten Überlagerungen und es ist nur eine Symbolleiste sichtbar. Sie können beispielsweise eine Symbolleiste am oberen oder unteren Rand des Formulars oder vor oder nach den Bedienfeldern im Formular einfügen.

Beim Layout für Mobilgeräte können Sie mithilfe von Symbolen Aktionsschaltflächen hinzufügen.

Abbildung: Festes mobiles Layout für Symbolleiste

Business.Adobe.com - Ressourcen

Style System Targeted Content Theme Editor Dynamic Forms Digital Asset Management Digital Signage