Bedienfeld-Container

Letzte Aktualisierung: 2023-11-23
  • Erstellt für:
  • Developer
    Admin
    User

In einem adaptiven Formular ist ein Bedienfeld ein Container-Element, das zum Gruppieren verwandter Formularelemente verwendet werden kann. So können Sie verschiedene Formularelemente logisch und sinnvoll gruppieren und organisieren. Dies kann die Gesamtstruktur und Lesbarkeit des Formulars verbessern, sodass Benutzende es einfacher verstehen und leichter darin navigieren können.

Sie können Bedienfelder auch verwenden, um ausblendbare Abschnitte zu erstellen. Damit können komplexe oder weniger häufig verwendete Formularfelder ausgeblendet werden, sodass das Formular übersichtlich bleibt und leicht zu verwenden ist. Sie können auch andere Komponenten wie Text, Kontrollkästchen und Schaltflächen einbeziehen.

Sie können auch verschiedene regelbasierte Aktionen festlegen, z. B. ein Formular senden, eine Website öffnen, Komponenten ein-/ausblenden oder eine Instanz eines Bedienfelds hinzufügen.

Beispiel

Beispiel

Verwendung

Es gibt verschiedene Gründe für die Verwendung eines Bedienfelds in einem Formular, darunter:

  • Organisieren von Formularelementen: Sie können ein Bedienfeld verwenden, um verwandte Formularelemente zusammenzufassen, sodass das Formular für Benutzende übersichtlicher und leichter zu navigieren ist.

  • Verbessern der Formularstruktur: Sie können durch die Gruppierung von Formularelementen in Bedienfelder die Gesamtstruktur und Lesbarkeit des Formulars verbessern und es Benutzenden dadurch leichter verständlich machen.

  • Erstellen ausblendbarer Abschnitte: Sie können Bedienfelder verwenden, um ausblendbare Abschnitte zu erstellen. Diese können für das Ausblenden komplexer oder seltener verwendeter Formularfelder nützlich sein, sodass das Formular übersichtlich bleibt und einfach zu verwenden ist.

  • Verbesserte Benutzerfreundlichkeit: Sie können durch Verwendung von Bedienfeldern zur Organisation von Formularelementen das Formular benutzerfreundlicher und einfacher gestalten, was dazu führen kann, dass mehr Formulare ausgefüllt werden.

Version und Kompatibilität

Die Kernkomponente „Bedienfeld-Container“ für adaptive Formulare wurde im Februar 2023 als Teil der Kernkomponenten 2.0.4 veröffentlicht. Hier finden Sie eine Tabelle mit allen unterstützten Versionen, Informationen zur AEM-Kompatibilität und Links zur entsprechenden Dokumentation:
Komponentenversion AEM as a Cloud Service
— —
v1 Kompatibel mit
Version 2.0.4 und höher

Informationen zu Versionen und Freigaben der Kernkomponente finden Sie im Dokument Kernkomponenten-Versionen.

Technische Details

Die neuesten Informationen zur Kernkomponente „Bedienfeld-Container“ für adaptive Formulare finden Sie in der technischen Dokumentation auf GitHub. Sie finden weitere Informationen zur Entwicklung von Kernkomponenten in der Entwicklerdokumentation für Kernkomponenten.

Dialogfeld „Konfigurieren“

Mit dem Dialogfeld „Konfigurieren“ können Sie Bedienfeld-Container mühelos für Besuchende anpassen. Sie können auch Optionen für Bedienfeld-Container definieren, um das Benutzererlebnis zu verbessern.

Registerkarte „Allgemein“

Registerkarte „Allgemein“

  • Name: Sie können eine Formularkomponente sowohl im Formular als auch im Regel-Editor leicht mit ihrem eindeutigen Namen identifizieren. Der Name darf jedoch keine Leerzeichen oder Sonderzeichen enthalten.

  • Titel: Sie können mit dem Titel leicht eine Komponente in einem Formular identifizieren. Standardmäßig wird der Titel über der Komponente angezeigt. Wenn Sie keinen Titel hinzufügen, wird der Name der Komponente anstelle des Titeltexts angezeigt.

  • Titel ausblenden: Wählen Sie die Option aus, um den Titel der Komponente auszublenden.

  • Daten untergeordneter Komponenten bei Formularübermittlung gruppieren (Daten in Objekt einschließen) – Wenn die Option ausgewählt ist, werden die Daten aus den untergeordneten Komponenten innerhalb des JSON-Objekts der übergeordneten Komponente verschachtelt. Wenn jedoch die Option nicht ausgewählt ist, weisen die gesendeten JSON-Daten eine flache Struktur auf, ohne dass ein Objekt für die übergeordnete Komponente vorhanden ist. Zum Beispiel:

    • Wenn die Option ausgewählt ist, werden die Daten aus den untergeordneten Komponenten (z. B. Straße, Stadt und Postleitzahl) innerhalb der übergeordneten Komponente (Adresse) als JSON-Objekt verschachtelt. Dadurch wird eine hierarchische Struktur erstellt, und die Daten werden unter der übergeordneten Komponente angeordnet.

      Struktur der übermittelten Daten:

      { "Address":

{ "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }

}

    • Wenn die Option nicht ausgewählt ist, weisen die gesendeten JSON-Daten eine flache Struktur auf, ohne dass ein Objekt für die übergeordnete Komponente (Adresse) vorhanden ist. Alle Daten befinden sich auf derselben Ebene ohne hierarchische Organisation.

      Struktur der übermittelten Daten:

         { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }

  • Verbindungsreferenz: Eine Verbindungsreferenz ist ein Verweis auf ein Datenelement, das in einer externen Datenquelle gespeichert ist und in einem Formular verwendet wird. Sie können mit dem Bindungsverweis Daten dynamisch an Formularfelder binden, sodass das Formular die aktuellsten Daten aus der Datenquelle anzeigen kann. Beispielsweise kann ein Bindungsverweis verwendet werden, um den Namen und die Adresse von Kundinnen und Kunden in einem Formular anzuzeigen, basierend auf der im Formular eingegebenen Kunden-ID. Der Bindungsverweis kann auch verwendet werden, um die Datenquelle mit den im Formular eingegebenen Daten zu aktualisieren. Auf diese Weise können Sie mit AEM Forms Formulare erstellen, die mit externen Datenquellen interagieren und so eine nahtlose Benutzererfahrung bei der Datenerfassung und Datenverwaltung bieten.

  • Komponente ausblenden: Wählen Sie die Option, um die Komponente aus dem Formular auszublenden. Die Komponente bleibt für andere Zwecke verfügbar, z. B. für Berechnungen im Regel-Editor. Dies ist nützlich, wenn Sie Informationen speichern müssen, die Benutzende nicht sehen oder direkt ändern müssen.

  • Komponente deaktivieren: Wählen Sie die Option zum Deaktivieren der Komponente aus. Die deaktivierte Komponente ist nicht aktiv und Endbenutzende können sie nicht bearbeiten. Benutzende können den Wert des Felds anzeigen, ihn jedoch nicht ändern. Die Komponente bleibt für andere Zwecke verfügbar, z. B. für Berechnungen im Regel-Editor.

Registerkarte „Bedienfeld wiederholen“

Registerkarte „Wiederholen“

Sie können die Wiederholungsoptionen verwenden, um den Bedienfeld-Container und seine untergeordneten Komponenten zu duplizieren, eine minimale und maximale Wiederholungsanzahl zu definieren und die Replikation ähnlicher Abschnitte innerhalb eines Formulars zu erleichtern. Bei der Interaktion mit der Bedienfeld-Container-Komponente und dem Zugriff auf ihre Einstellungen werden die folgenden Optionen angezeigt:

  • Assistenten wiederholbar machen: Eine Umschalter-Funktion, mit der Benutzende die Wiederholungsfunktion aktivieren oder deaktivieren können.
  • Mindestwiederholungen: Legt fest, wie oft der Bedienfeld-Container mindestens wiederholt werden kann. Der Wert null zeigt an, dass das Bedienfeld „Assistent“ nicht wiederholt wird. Der Standardwert ist null.
  • Maximale Wiederholungen: Legt fest, wie oft der Bedienfeld-Container maximal wiederholt werden kann. Standardmäßig ist dieser Wert unbegrenzt.

Um wiederholbare Abschnitte innerhalb des Bedienfeld-Containers effektiv zu verwalten, folgen Sie den Schritten, die im Artikel Erstellen von Formularen mit wiederholbaren Abschnitten beschrieben sind.

Registerkarte „Hilfe-Inhalt“

Registerkarte „Hilfe-Inhalt“

  • Kurzbeschreibung: Eine Kurzbeschreibung ist eine kurze Erklärung, die zusätzliche Informationen oder Klarstellungen über den Zweck eines Formularfelds bietet. Es hilft Benutzenden zu verstehen, welcher Datentyp in das Feld eingegeben werden soll, und kann Richtlinien oder Beispiele bereitstellen, um sicherzustellen, dass die eingegebenen Informationen gültig sind und die gewünschten Kriterien erfüllen. Standardmäßig bleiben kurze Beschreibungen ausgeblendet. Aktivieren Sie die Option Kurzbeschreibung immer anzeigen, um sie unterhalb der Komponente anzuzeigen.

  • Kurzbeschreibung immer anzeigen: Aktivieren Sie diese Option, um die Kurzbeschreibung unterhalb der Komponente anzuzeigen.

  • Hilfetext: Hilfetext bezieht sich auf zusätzliche Informationen oder Anleitungen, die den Benutzenden bereitgestellt werden, um sie beim korrekten Ausfüllen eines Formularfelds zu unterstützen. Er erscheint, wenn Benutzende auf das Hilfesymbol (i) neben der Komponente klicken. Hilfetext enthält detailliertere Informationen als die Beschriftung oder der Platzhaltertext eines Formularfelds und soll den Benutzenden dabei helfen, die Anforderungen oder Einschränkungen des Felds zu verstehen. Er kann auch Vorschläge oder Beispiele anbieten, um das Ausfüllen des Formulars einfacher und genauer zu gestalten.

Registerkarte „Barrierefreiheit“

Registerkarte „Barrierefreiheit“

  • Text für Bildschirmlesehilfen – Das ist zusätzlicher Text, der von Hilfstechnologien wie etwa Bildschirmlesehilfen für sehbehinderte Personen vorgelesen wird. Dieser Text enthält eine Audiobeschreibung des Zwecks des Formularfelds und kann Informationen über den Titel, die Beschreibung, den Namen und alle relevanten Nachrichten (benutzerdefinierten Text) des Felds enthalten. Der Text der Bildschirmlesehilfe hilft sicherzustellen, dass das Formular allen Benutzenden zugänglich ist, auch Personen mit Sehschwäche, und bietet ihnen ein umfassendes Verständnis des Formularfelds und seiner Anforderungen.

  • HTML-Rolle für die Ankündigung durch die Bildschirmlesehilfe – Die HTML-Rolle ist ein Attribut, mit dem der Zweck eines HTML-Elements für Hilfstechnologien wie Bildschirmlesehilfen spezifiziert wird. Rollenattribute werden verwendet, um für ein Element zusätzlichen Kontext und eine semantische Bedeutung bereitzustellen, wodurch es für Bildschirmlesehilfen einfacher wird, den Inhalt zu interpretieren und ihn Benutzenden mitzuteilen. In AEM Forms kann beispielsweise die Beschriftung eines Formularfelds die Rolle „Beschriftung“ haben und sein Eingabefeld die Rolle „Textfeld“. Dadurch kann die Bildschirmlesehilfe die Beziehung zwischen Beschrfitung und Eingabefeld verstehen und diese Informationen den Benutzenden korrekt mitteilen.

Dialogfeld „Design“

Das Dialogfeld "Design"wird verwendet, um CSS-Stile für die Formularcontainer-Komponente zu definieren und zu verwalten.

Registerkarte „Zugelassene Komponenten“

Registerkarte "Design Dialog allowed"

Die Zugelassene Komponenten -Tab ermöglicht es dem Vorlageneditor, die Komponenten festzulegen, die den Bedienfeldern in der Komponente im Editor für adaptive Forms als Elemente hinzugefügt werden können.

Registerkarte „Standardkomponenten“

Registerkarte "Standardkomponente"im Dialogfeld "Design"

Die Standardkomponenten -Tab ermöglicht es dem Vorlageneditor, die Komponenten anzugeben, die standardmäßig als Elemente in der Formularcontainer-Komponente im adaptiven Forms-Editor sichtbar sind.

Registerkarte „Responsive Einstellungen“

Registerkarte "Responsive Einstellungen"im Dialogfeld "Design"

Die Responsive Einstellungen -Tab ermöglicht es dem Vorlageneditor, die Anzahl der Spalten im Raster innerhalb der Formularcontainer-Komponente im adaptiven Forms-Editor anzugeben.

Registerkarte "Container Settings"

Registerkarte "Container Settings"

  • Layout: Sie können für Ihren Assistenten entweder ein festes Layout (einfach) oder ein flexibles Layout (responsives Raster) verwenden. Das einfache Layout behält alles fest an der Stelle, während Sie mit dem responsiven Raster die Position der Komponenten an Ihre Bedürfnisse anpassen können. Verwenden Sie beispielsweise das responsive Raster, um „Vorname“, „Mittelname“ und „Nachname“ in einem Formular in einer einzigen Zeile auszurichten.

  • Layout deaktivieren: Wählen Sie diese Option, um die Layoutauswahl im Dialogfeld "Bearbeiten"einer Komponente zu deaktivieren.

  • Hintergrundbild aktivieren: Diese Option ermöglicht es dem Benutzer, die Einstellungen des Bedienfelds so zu konfigurieren, dass ein visueller Hintergrund zur Verbesserung der visuellen Darstellung angezeigt wird.

  • Hintergrundfarbe aktivieren: Mit dieser Option können Sie die Hintergrundfarbe des Bedienfelds festlegen oder ändern. Diese Funktion wird in der Benutzeroberfläche häufig verwendet, um das Erscheinungsbild von Bedienfeldern in einer größeren Oberfläche anzupassen. Wenn Sie die Hintergrundfarbe aktivieren die Option Nur Farbfelder angezeigt. Die Nur Farbfelder Mit dieser Option können Sie Farben für Hintergrund, Text oder andere visuelle Elemente innerhalb des Bedienfelds mithilfe der Hinzufügen button

Registerkarte „Stile“

Die Kernkomponente „Dateianhänge“ für adaptive Formulare unterstützt das AEM-Stilsystem.

Dialogfeld „Design“

  • Standard-CSS-Klassen: Sie können eine standardmäßige CSS-Klasse für die Kernkomponente für adaptive Formulare – Kontrollkästchen-Gruppe bereitstellen.

  • Zulässige Stile: Sie können Stile definieren, indem Sie einen Namen und die CSS-Klasse angeben, die den Stil darstellen. Sie können beispielsweise einen Stil mit dem Namen „Fettschrift“ erstellen und die CSS-Klasse „Schriftbreite: Fett“ bereitstellen. Sie können diese Stile bei einem adaptiven Formular im adaptiven Formular-Editor anwenden. Um einen Stil anzuwenden, wählen Sie im Editor für adaptive Formulare die Komponente aus, auf die Sie den Stil anwenden möchten, navigieren Sie zum Eigenschaften-Dialog und wählen Sie den gewünschten Stil aus der Dropdown-Liste Stile. Wenn Sie die Stile aktualisieren oder ändern müssen, kehren Sie einfach zum Dialogfeld „Design“ zurück, aktualisieren die Stile auf der Registerkarte „Stile“ und speichern die Änderungen.

Registerkarte "Benutzerdefinierte Eigenschaften"

Dialogfeld "Benutzerdefinierte Eigenschaften"

Mit benutzerdefinierten Eigenschaften können Sie benutzerdefinierte Attribute (Schlüssel-Wert-Paare) mithilfe der Formularvorlage mit einer Kernkomponente des adaptiven Formulars verknüpfen. Die benutzerdefinierten Eigenschaften werden im Abschnitt "Eigenschaften"der Headless-Ausgabe der Komponente angezeigt. Dies ermöglicht das Erstellen eines dynamischen Formularverhaltens, das sich basierend auf den benutzerdefinierten Attributwerten anpasst. Beispielsweise können Entwickler verschiedene Ausgabeformate einer Headless-Forms-Komponente für mobile, Desktop- oder Webplattformen entwerfen, wodurch das Benutzererlebnis auf einer Vielzahl von Geräten erheblich verbessert wird.

  • Gruppenname: Sie können einen Namen angeben, um die benutzerdefinierte Eigenschaftsgruppe zu identifizieren. Sie können mehrere benutzerdefinierte Eigenschaftsgruppen hinzufügen, löschen oder neu anordnen. Nachdem Sie die benutzerdefinierte Eigenschaftsgruppe hinzugefügt haben, sehen Sie die folgenden Optionen:

    • Schlüssel-Wert-Paare: Sie können mehrere benutzerdefinierte Eigenschaftsnamen und benutzerdefinierte Eigenschaftswerte hinzufügen, indem Sie auf das Hinzufügen -Schaltfläche für jede benutzerdefinierte Eigenschaftsgruppe.

    • Löschen: Tippen oder klicken Sie auf , um den benutzerdefinierten Eigenschaftsnamen und den benutzerdefinierten Eigenschaftswert zu löschen.

    • Neu anordnen: Tippen oder klicken und ziehen Sie, um die Reihenfolge des benutzerdefinierten Eigenschaftsnamens und des benutzerdefinierten Eigenschaftswerts neu anzuordnen.

Siehe auch

Vorherige Seite
Next page

Auf dieser Seite