Layout-Möglichkeiten für adaptive Formulare layout-capabilities-of-adaptive-forms

Adobe empfiehlt, die modernen und erweiterbaren Kernkomponentenzur Datenerfassung zu verwenden, um neue adaptive Formulare zu erstellenoder adaptive Formulare zu AEM Sites-Seiten hinzuzufügen. Diese Komponenten stellen einen bedeutenden Fortschritt bei der Erstellung adaptiver Formulare dar und sorgen für beeindruckende Anwendererlebnisse. In diesem Artikel wird der ältere Ansatz zum Erstellen adaptiver Formulare mithilfe von Foundation-Komponenten beschrieben.

Version
Artikel-Link
AEM 6.5
Hier klicken
AEM as a Cloud Service
Dieser Artikel

Mit Adobe Experience Manager können Sie adaptive Formulare erstellen, die für Endbenutzer einfach und dynamisch zu verwenden sind. Das Formular-Layout steuert, wie Elemente oder Komponenten in einem adaptiven Formular angezeigt werden.

Layout-Typen types-of-layouts

In einem adaptiven Formular stehen Ihnen die folgenden Typen von Layouts 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 Bildschirmbreite von mindestens 768 Pixel hat, 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 Bereichslayouts sind unter /libs/fd/af/layouts definiert.

Um das Layout eines adaptiven Formulars zu ändern, verwenden Sie den Autorenmodus in Experience Manager.

Bedienfeld-Layout panel-layout

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

Die Bereichslayouts stehen unter /libs/fd/af/layouts/panel zur Verfügung. Wählen Sie den Bereich und wählen Sie dann cmppr1 , um die Eigenschaften des Bereichs anzuzeigen.

Liste der Bereichs-Layouts für den Stammbereich eines adaptiven Formulars

Responsiv – alles auf einer Seite ohne Navigation responsive-everything-on-one-page-without-navigation-br

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

Mithilfe dieses Layouts können Sie auch mehrere Komponenten vom Typ Bereich für adaptive Formulare nacheinander in einen Bereich einfügen.

So sieht ein Formular mit einem responsiven Layout auf einem kleinen Bildschirm aus

Assistent wizard

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 Komponente Bereich für adaptive Formulare, um in einem Bereich eine schrittweise Navigation zur Verfügung zu stellen. 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)

Ein Formular mit dem Assistentenlayout

Akkordeon layout-for-accordion-design

Mit diesem Layout können Sie die Komponente Bereich für adaptive Formulare in einen Bereich mit Navigation im Akkordeonstil einfügen. 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.

Der Zusammenfassungsausdruck kann verwendet werden, um im Titel des minimierten Bedienfelds die von der Benutzerin oder dem Benutzer eingegebenen Werte anzuzeigen.

Wiederholbare Bereiche mit Akkordeonlayout in adaptiven Formularen

Layout mit Registerkarten – Registerkarten werden auf der linken Seite angezeigt tabbed-layout-tabs-appear-on-the-left

Mithilfe dieses Layouts können Sie die Komponente Bereich für adaptive Formulare in einen Bereich mit Registerkartennavigation einfügen. Die Registerkarten befinden sich auf der linken Seite der Bereichsinhalte.

Im Layout mit Registerkarten werden die Registerkarten links angezeigt

Registerkarten auf der linken Seite eines Bereichs

Layout mit Registerkarten – Registerkarten werden oben angezeigt tabbed-layout-tabs-appear-on-the-top

Mithilfe dieses Layouts können Sie die Komponente Bereich für adaptive Formulare in einen Bereich mit Registerkartennavigation einfügen. Die Registerkarten befinden sich oberhalb der Bereichsinhalte.

Layout mit Registerkarten in adaptiven Formularen, mit Registerkarten am oberen Rand

Layouts für Mobilgeräte mobile-layouts

Layouts für Mobilgeräte ermöglichen eine benutzerfreundliche Navigation auf Mobilgerä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 über eine Navigationsleiste und ein 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 stehen in adaptiven Formularen standardmäßig zur Verfügung.

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

Wählen Sie die Option Navigierbare Elemente des responsiven Layouts zum Mobilmenü hinzufügen aus, um die Navigationsmöglichkeiten anzuzeigen, die für einen Bereich im Layout für Mobilgeräte verfügbar sind. Die Navigationsoptionen werden nur angezeigt, wenn Sie für einen Bereich das responsive Layout auswählen.

Bei einem Layout für Mobilgeräte ist das Formularmenü (über das auf verschiedene Formularbereiche zugegriffen werden kann) per Klick auf das Symbol aem6forms_form_menu verfügbar.

Layout mit Bedienfeldtiteln in der Formularkopfzeile layout-with-panel-titles-in-the-form-header

Wie der Name schon sagt, werden bei diesem Layout neben dem Navigationsmenü und der Navigationsleiste Bedienfeldtitel angezeigt. Außerdem umfasst dieses Layout Weiter- und Zurück-Symbole für die Navigation.

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

Layout ohne Bereichstitel in der Formularkopfzeile layout-without-panel-titles-in-the-form-header

Wie der Name schon sagt, werden bei diesem Layout nur das Navigationsmenü und die Navigationsleiste ohne Bedienfeldtitel angezeigt. Außerdem umfasst dieses Layout Weiter- und Zurück-Symbole für die Navigation.

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

Siehe auch see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab