Schaltflächenkomponente button-component-adaptive-forms-core-component

Dieser Artikel enthält Inhalte zumRich-Text für Titel zulassen-Funktion, einer Funktion vor der Veröffentlichung. Die Vorabversion-Funktion ist nur über unsere Pre-Release-Kanal.

Eine Schaltfläche in einem adaptiven Formular ist ein Benutzeroberflächen-Element, mit dem Benutzende eine Aktion auslösen können, wenn sie darauf klicken. Mit dem Schaltflächenelement können Sie ein Formular senden, ein Formular zurücksetzen oder andere Aktionen durchführen, z. B. zu einer anderen Seite navigieren oder einen benutzerdefinierten Code auslösen. Die Schaltfläche kann mit der Schaltflächen-Kernkomponente erstellt werden.

Benutzende können mit dem Regel-Editor für adaptive Formulare verschiedene Aktionen für die Schaltflächen-Komponente festlegen. Dazu gehören das Öffnen einer Website, das Anzeigen oder Ausblenden von Formularkomponenten, das Hinzufügen einer Instanz eines Bedienfelds oder einer Komponente, das Senden oder Zurücksetzen eines Formulars und mehr.

Adaptive Formulare verfügen über separate Komponenten für die Schaltflächen Senden und Zurücksetzen, sodass Benutzerinnen und Benutzer ein Formular bequem senden oder zurücksetzen können. Die Schaltflächenkomponente kann flexibel so konfiguriert werden, dass sie diese Aktionen je nach spezifischen Anforderungen ausführt.

Benutzende können auf die vollständige Liste der für die Schaltflächen-Komponente unterstützten Aktionen über den Regel-Editor für Adaptive Formulare zugreifen. Mit dem Regel-Editor können Benutzende Regeln erstellen, die von verschiedenen Ereignissen ausgelöst werden, z. B. durch Klicken auf eine Schaltfläche, beim Laden eines Formulars oder Ändern eines Feldwerts. Diese Regeln können dann für verschiedene Aktionen verwendet werden, z. B. zum Anzeigen oder Ausblenden von Komponenten, Festlegen von Feldwerten oder Senden des Formulars.

Beispiel

Schaltflächenbeispiel

Verwendung reasons-to-use-button

Es gibt verschiedene Gründe, warum es sinnvoll ist, eine Schaltfläche in ein adaptives Formular einzuschließen, darunter:

  • Formularübermittlung: Normalerweise verwenden Sie eine Schaltfläche zum Senden eines Formulars, sodass Benutzende die eingegebenen Daten zur Verarbeitung an den Server senden können.

  • Formularzurücksetzung: Sie können Schaltflächen auch dazu verwenden, um ein Formular zurückzusetzen und alle von Benutzenden eingegebenen Daten zu löschen.

  • Navigation: Sie können Schaltflächen verwenden, um zwischen verschiedenen Abschnitten eines Formulars oder verschiedenen Seiten auf einer Website zu navigieren.

  • Ereignisverarbeitung: Sie können Schaltflächen verwenden, um verschiedene Ereignisse wie das Öffnen einer Website, das Anzeigen/Ausblenden von Komponenten oder das Hinzufügen einer Instanz eines Bedienfelds oder einer Komponente zur Schaltfläche auszulösen.

  • Interaktivität: Schaltflächen können zum Erstellen interaktiver Formulare verwendet werden. Sie können beispielsweise eine Schaltfläche zum Öffnen eines modalen Dialogfelds oder zum Ein-/Ausschalten eines Bereichs des Formulars verwenden.

Version und Kompatibilität version-and-compatibility

Die Kernkomponente „Akkordeon“ für adaptive Formulare wurde im Februar 2023 als Teil der Kernkomponenten 2.0.4 für Cloud Service und der Kernkomponenten 1.1.12 für AEM 6.5.16.0 Forms oder höher veröffentlicht. Hier finden Sie eine Tabelle mit allen unterstützten Versionen, AEM-Kompatibilität und Links zur entsprechenden Dokumentation:

Komponentenversion
AEM as a Cloud Service
AEM 6.5.16.0 Forms oder höher
v1
Kompatibel mit
Version 2.0.4 und höher
Kompatibel mit
Version 1.1.12 und höher (aber nur bis Version 2.0.0).

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

Technische Details technical-details

Aktuelle Informationen zur Schaltflächen-Kernkomponente 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“ configure-dialog

Sie können Ihr Schaltflächen-Erlebnis für Besuchende im Dialogfeld „Konfigurieren“ einfach anpassen. Sie können auch mühelos Schaltflächen-Eigenschaften für ein nahtloses Benutzererlebnis definieren.

Registerkarte „Allgemein“ basic-tab

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.

  • Rich-Text für Titel zulassen - Diese Funktionen ermöglichen es Benutzern, einfache Texttitel zu formatieren, die Funktionen wie fett, kursiv, unterstrichen Text, verschiedene Schriftarten, Schriftgrößen, Farben und zusätzliche Optionen enthalten, um die visuelle Präsentation und Anpassung zu verbessern. Es bietet mehr Flexibilität und kreative Kontrolle, damit Titel in Dokumenten, Websites oder Anwendungen hervorgehoben werden.
    Nach Auswahl des Kontrollkästchens für Rich-Text für Titel zulassen , werden Formatierungsoptionen angezeigt, um den Titel der Komponente zu formatieren. Um auf alle verfügbaren Formatierungsoptionen zuzugreifen, können Sie auf die Symbol Vollbild Registerkarte.

    Rich-Text-Unterstützung

  • 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.

  • Als ungebundenes Formularelement markieren: Mit dieser Option können Sie Formularfelder konfigurieren, die mit keinem Schema verbunden sind. Mit dieser Option können Sie Daten speichern, ohne die Datenquelle zu aktualisieren. Außerdem können Sie damit Daten auf eine benutzerdefinierte Art und Weise verarbeiten, getrennt von der standardmäßigen Datenbankintegration.
  • Komponente ausblenden: Wählen Sie diese 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 „Hilfe-Inhalt“ help-content

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.

Barrierefreiheit accessibility

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.

Dialogfeld „Design“ design-dialog

Verwenden Sie das Dialogfeld „Design“, um CSS-Stile für die Schaltflächen-Komponente zu definieren und zu verwalten.

Registerkarte „Stile“ styles-tab

Die Schaltflächen-Kernkomponente 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 Schaltflächen-Kernkomponente für adaptive Formulare bereitstellen.

  • Zulässige Stile: Sie können Stile definieren, indem Sie einen Namen und die CSS-Klasse bereitstellen, die den Stil darstellt. 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.

Benutzerdefinierte Eigenschaften

Dialogfeld „Benutzerdefinierte Eigenschaften“

Mit der Option „Benutzerdefinierte Eigenschaften“ können Sie mithilfe der Formularvorlage benutzerdefinierte Attribute (Schlüsselwertpaare) mit einer Kernkomponente eines adaptiven Formulars verknüpfen. Die benutzerdefinierten Eigenschaften werden im Eigenschaftenbereich der Headless-Ausgabedarstellung der Komponente angezeigt. So kann ein dynamisches Formularverhalten erzeugt werden, das sich je nach den benutzerdefinierten Attributwerten anpasst. Beispielsweise können Entwickelnde verschiedene Ausgabedarstellungen einer Headless-Formularkomponente für Mobile-, Desktop- oder Web-Plattformen entwerfen und so das Benutzererlebnis auf einer Vielzahl von Geräten erheblich verbessern.

  • Gruppenname: Sie können einen Namen angeben, um die Gruppe der benutzerdefinierten Eigenschaften zu kennzeichnen. Sie können mehrere Gruppen benutzerdefinierter Eigenschaften hinzufügen, löschen oder neu anordnen. Nach dem Hinzufügen der Gruppe benutzerdefinierter Eigenschaften werden folgende Optionen angezeigt:

    • Schlüssel-Wert-Paare: Sie können mehrere Namen und Werte benutzerdefinierter Eigenschaften hinzufügen, indem Sie für jede Gruppe benutzerdefinierter Eigenschaften auf Hinzufügen klicken.

    • Löschen: Tippen oder klicken Sie auf diese Option, um den Namen und den Wert der benutzerdefinierten Eigenschaft zu löschen.

    • Neu anordnen: Ordnen Sie den Namen und Wert der benutzerdefinierten Eigenschaft Antippen oder Klicken und Ziehen neu an.

Ähnliche Artikel related-articles

Siehe auch see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c