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

Layouttypen

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

Bedienfeldlayout steuert, wie Elemente oder Komponenten in einem Bedienfeld auf einem Gerät angezeigt werden.

Mobiles Layout steuert die Navigation eines Formulars auf einem Mobilgerä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.

Symbolleistenlayout Steuert die Platzierung der Aktionsschaltflächen in der Symbolleiste oder Bereichssymbolleiste eines Formulars.

Alle diese Bedienfeldlayouts werden in den folgenden Verzeichnissen definiert:

/libs/fd/af/layouts.

Hinweis

Um das Layout eines adaptiven Formulars zu ändern, verwenden Sie den Bearbeitungsmodus in AEM.

Speicherort von Layouts im CRX-Repository

Bereichslayout

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

The Panel layouts are available at /libs/fd/af/layouts/panel location.

Liste der Bereichslayouts für den Stammbereich eines adaptiven Formulars​Abbildung: Liste von Bereichslayouts in adaptiven Formularen

Reaktionsschnell – alles auf einer Seite ohne Navigation

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

Using this layout, you can place multiple Panel adaptive form components one after another inside the panel.

Formular mit einem reaktionsfähigem Layout auf einem kleinen Bildschirm

Abbildung: Ein Formular mit reaktionsfähigem Layout, wie auf einem kleinen Bildschirm dargestellt

Formular mit einem reaktionsfähigem Layout auf einem großen Bildschirm

Abbildung: Ein Formular mit reaktionsfähigem Layout, wie auf einem großen Bildschirm dargestellt

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

Verwenden Sie dieses Bedienfeldlayout, um in einem Formular 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.

Use the Panel adaptive form component to provide step-by-step navigation inside a panel. 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)

Ausdruck für das Abschließen von Schritten im Assistentenlayout für ein Mehrstufenformular

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

Ein Formular, das den Assistentenlayout verwendet

Abbildung: Ein Formular mit Assistenten

Layout für Akkordeon-Design

Using this layout, you can place the Panel adaptive form component in a panel with accordion style navigation. Mit diesem Layout können Sie außerdem wiederholbare Bedienfelder erstellen. Mit wiederholbaren Bedienfeldern können Sie Bedienfelder nach Bedarf hinzuzufügen oder entfernen. Sie können dabei die minimale und maximale Anzahl der Wiederholungen eines Bedienfelds festlegen. Außerdem kann auf Basis der in den Bedienfeldelementen bereitgestellten Informationen der Titel des Bedienfelds dynamisch festgelegt werden.

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

Wiederholbare Bedienfelder mit Akkordeonlayout in adaptiven Formularen

Abbildung: Mit dem Akkordeon-Layout erstellte wiederholbare Bedienfelder

Layout mit Registerkarten – Registerkarten werden auf der linken Seite angezeigt

Using this layout, you can place the Panel adaptive form component in a panel with tab navigation. Die Registerkarten befinden sich auf der linken Seite der Bedienfeldinhalte.

Im Layout mit Registerkarten werden die Registerkarten links angezeigt

Abbildung: Registerkarten links neben einem Bedienfeld

Layout mit Registerkarten – Registerkarten werden oben angezeigt

Using this layout, you can place the Panel adaptive form Component in a panel with tab navigation. Die Registerkarten befinden sich oberhalb der Bedienfeldinhalte.

Layout mit Registerkarten in adaptiven Formen mit Registerkarten am oberen Rand

Abbildung: Registerkarten oben in einem Bedienfeld

Layout 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ü. The navigation bar shows < and > icon to indicate next and previous navigation steps in the form.

The Mobile Layouts are available at /libs/fd/af/layouts/mobile/ location. Die folgenden Layouts für Mobilgeräte stehen in adaptiven Formularen standardmäßig zur Verfügung.

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

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

When using a mobile layout, the form menu, to access various form panels, is available by tapping aem6forms_form_menu icon.

Layout mit Bedienfeldtiteln 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.

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

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

Layout ohne Bedienfeldtitel 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.

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

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

Symbolleistenlayouts

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

Liste der Symbolleistenlayouts in adaptiven Formularen zur Steuerung des Schaltflächenlayouts

Abbildung: Eine Liste von Symbolleistenlayouts in adaptiven Formularen

Toolbar layouts are available at /libs/fd/af/layouts/toolbar location. 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.

Standardansicht für Symbolleiste

Abbildung: Standardmäßige Ansicht für die Symbolleiste

Mobiles festes Layout 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.

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

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

Auf dieser Seite