Trennzeichenkomponenten in adaptiven Formularen

Adobe empfiehlt die Verwendung der modernen und erweiterbaren Kernkomponenten zur Datenerfassung für das Erstellen neuer adaptiver Formulare oder das Hinzufügen von adaptiven Formularen zu AEM Sites-Seiten. Diese Komponenten stellen einen bedeutenden Fortschritt bei der Erstellung adaptiver Formulare dar und sorgen für beeindruckende Benutzererlebnisse. In diesem Artikel wird ein älterer Ansatz zum Erstellen von Adaptive Forms mithilfe von Foundation-Komponenten beschrieben.

Sie können die Trennzeichenkomponente verwenden, um Bereiche eines Formulars visuell zu trennen. Sie können die Gesamtdarstellung und den Stil einer Trennzeichenkomponente definieren, indem Sie die folgenden Eigenschaften der Trennzeichenkomponente angeben:

• Elementname: Gibt den Namen der Komponente an. Die SOM-Ausdrücke adressieren die Komponente mit einem Wert, der im Feld "Elementname"angegeben ist.

• Stärke: Gibt die Stärke der Trennzeichenkomponente in Pixel an.

• CSS-Klasse: Gibt die benutzerdefinierte CSS-Klasse für die Trennzeichenkomponente an.

• Inline-Stile: Mit AEM Forms können Sie jetzt CSS-Inline-Stile auf individuelle adaptive Formularkomponenten anwenden und eine Vorschau der Änderungen in Echtzeit anzeigen.

Im Layout-Modus können Sie die Anzahl der Spalten festlegen, die die Trennzeichenkomponente umfasst. Weitere Informationen finden Sie unter Verwenden des Layout-Modus, um die Größe von Komponenten anzupassen.

So legen Sie die Eigenschaften einer Trennzeichenkomponente fest:

1. Wählen Sie eine Trennzeichenkomponente aus und wählen Sie . Die Eigenschaften werden in der Seitenleiste geöffnet.
2. Klicken Sie auf eine Registerkarte im Abschnitt Inline-CSS-Eigenschaften , damit Sie CSS-Eigenschaften angeben können. Beispiel: a. Klicken Sie auf der Registerkarte Feld auf Element hinzufügen. Eine Zeile mit zwei Feldern wird hinzugefügt.
3. Geben Sie im ersten Feld links eine CSS3-Eigenschaft an, die Sie anwenden möchten. Beispiel: border. Sie können auch eine Eigenschaft auswählen, indem Sie auf die Nach-unten-Taste klicken. Die Dropdown-Liste ist nicht vollständig und Sie können einen beliebigen unterstützten CSS3-Eigenschaftennamen in dieses Feld eingeben.
4. Geben Sie im angrenzenden Feld einen gültigen Wert für die angegebene CSS3-Eigenschaft an. Beispiel: 3-px-Vollschwarz.
5. Klicken Sie auf Element hinzufügen, um eine andere Eigenschaft und deren Wert anzugeben.
6. Klicks Vorschau sodass Sie eine Vorschau der Änderungen im Formular anzeigen können.
7. Klicks OK wenn Sie die Änderungen bestätigen möchten oder Abbrechen , um das Dialogfeld ohne Änderungen zu schließen.