Kernkomponenten für adaptive Formulare adaptive-forms-core-components-introduction

Mithilfe der Kernkomponenten für adaptive Formulare können Sie in Adobe Experience Manager überzeugende Erlebnisse bei der Registrierung schaffen.

Kernkomponenten overview

In Adobe Experience Manager (AEM) sind Komponenten die Bausteine, die zum Erstellen von Seiten und Formularen verwendet werden. Sie bieten Autoren und Autorinnen eine einfache und leistungsstarke Möglichkeit, Inhalte zu erstellen und zu verwalten und bieten Entwickelnden die Flexibilität und Erweiterbarkeit, die zum Erstellen benutzerdefinierter Komponenten erforderlich sind. Die Kernkomponenten sind so konzipiert, dass sie die Entwicklungszeit verkürzen und die Wartungskosten für Websites und Formulare senken, flexibel sind und einfach an die spezifischen Anforderungen einer Website und eines Formulars angepasst werden können.

Außerdem sind die Kernkomponenten responsiv und unterstützen eine breite Palette von Geräten, einschließlich Desktops, Tablets und Smartphones. Darüber hinaus entsprechen sie den neuesten Web-Standards und Best Practices und bilden eine robuste und zuverlässige Lösung für die Erstellung von Web-Inhalten.

Insgesamt sind die Kernkomponenten ein wesentliches Tool für die Erstellung und Verwaltung von Web-Inhalten in AEM und bieten eine leistungsstarke und flexible Lösung, die dazu beiträgt, die Entwicklungszeit und die Wartungskosten zu reduzieren und den Besuchern und Besucherinnen der Website ein großartiges Benutzererlebnis zu bieten.

Kernkomponenten für adaptive Formulare

Die Kernkomponenten für adaptive Formulare bestehen aus 29 BEM-kompatiblen Open-Source-Komponenten, die auf der Grundlage der Adobe Experience Manager-WCM-Kernkomponenten basieren. Sie wurden speziell für die Erstellung von adaptiven Formularen entwickelt. Hierbei handelt es sich um Formulare, die sich an die Geräte-, Browser- und Bildschirmgröße der Benutzenden anpassen.

Diese Komponenten können verwendet werden, um außergewöhnliche Datenerfassungs- und Registrierungserlebnisse zu schaffen, indem sie eine breite Palette von Formularfeldoptionen bereitstellen, darunter Textfelder, Kontrollkästchen, Dropdown-Menüs und mehr. Sie beinhalten auch Funktionen wie Validierung, konditionelle Logik und responsives Design, die zum Erstellen benutzerfreundlicher Formulare verwendet werden können.

Da es sich bei diesen Komponenten um Open-Source-Elemente handelt, können Entwickler und Entwicklerinnen die Komponenten einfach erweitern und an die spezifischen Anforderungen ihrer Organisation anpassen. Zusätzlich basieren diese Komponenten auf der BEM-Methode, was sicherstellt, dass sie skalierbar und wartbar sind.

Adaptives Formular – Bild

Funktionen features

Produktionsbereit
Die Kernkomponenten für adaptive Formulare umfassen 24 zuverlässige WCM-Komponenten.
Cloud-fähig
Verfügbar für AEM Forms as a Cloud Service.
Vielseitig
Die Komponenten bieten allgemeine Konzepte, mit denen Autoren und Autorinnen von Formularen nahezu jedes beliebige Layout zusammenstellen können.
Konfigurierbar
Die Inhaltsrichtlinien auf Vorlagenebene definieren, welche Funktionen verwendet oder nicht verwendet werden dürfen.
Barrierefrei
Sie bieten ARIA-Attribute, unterstützen die Tastaturnavigation und Text für Hilfstechnologien wie Bildschirmlesehilfen.
Designbar
Die Komponenten implementieren das Stilsystem und das Markup folgt den BEM-CSS-Konventionen.
Anpassbar
Verschiedene Muster ermöglichen eine einfache Anpassung, von der Bearbeitung des HTML-Codes bis hin zur Wiederverwendung erweiterter Funktionen.
Versionierung
Die Versionierungsrichtlinie stellt sicher, dass die Kernkomponenten Ihre Website nicht beschädigen, wenn Funktionen verbessert werden, die sich auf Sie auswirken könnten.
Open Source
Wenn etwas nicht so ist, wie es sein sollte, verbessern Sie es.

Vorteile benefits

Die Datenerfassung ist für die Lead-Generierung und die Registrierung von entscheidender Bedeutung, und die Kernkomponenten von Adaptive Forms bieten eine leistungsstarke Lösung für die Erstellung von Formularen, die für die Datenerfassung optimiert sind. Einige der Gründe für die Verwendung von Kernkomponenten zum Erstellen dieser Customer Experiences sind:

  • Verfügbarkeit auf GitHub: Die Kernkomponenten für adaptive Formulare in AEM sind Open-Source-Komponenten und auf GitHub verfügbar. Darüber hinaus steht eine umfassende Dokumentation bereit. Dies hilft Entwicklern, die Komponenten und ihre Funktionsweise zu verstehen, und unterstützt sie bei der Entwicklung. Die Website aemcomponents.dev ist auch eine wertvolle Ressource, über die Entwickler die Komponenten in Verwendung sehen und auf die Dokumentation zugreifen können.

  • BEM-Modell für die Stilgestaltung: Für die Stilgestaltung der Kernkomponenten wird das BEM-Modell (Block Element Modifier) verwendet, bei dem es sich um eine bewährte und häufig verwendete Methode für die Organisation von CSS handelt. Dadurch wird es für Entwickler und Entwicklerinnen einfacher, die Organisation der Stile zu verstehen und diese an ihre spezifischen Anforderungen anzupassen.

  • Keine Abhängigkeit von Bibliotheken von Drittanbietern: Einer der Vorteile der Kernkomponenten besteht darin, dass sie keine Abhängigkeit von JavaScript-Bibliotheken von Drittanbietern, einschließlich JQuery und Underscore, aufweisen. Dadurch können die Komponenten mit weniger Aufwand schneller erstellt und einfacher in eine vorhandene AEM-Implementierung integriert werden.

  • Fokus auf Leistung und Barrierefreiheit: Die Kernkomponenten werden unter Berücksichtigung von Leistung und Barrierefreiheit erstellt, was sich in ihren hohen Google Lighthouse- und Web-Vitalwerten widerspiegelt. Dies erleichtert Entwicklern und Entwicklerinnen das Erstellen barrierefreier und leistungsstarker Web-Seiten, die in der heutigen digitalen Landschaft immer wichtiger werden.

  • Formularkomponenten in Sites 30-Vorlage und Designs: Die Kernkomponenten bieten Unterstützung für Formularkomponenten in der Sites 30-Vorlage und den Designs, wodurch Entwickende Formulare in AEM einfacher erstellen und anpassen können.

  • Einfachere Gestaltung: Die Kernkomponenten sind einfacher zu gestalten als ihre Gegenstücke, die Foundation-Komponenten. Der Design-Erstellungsprozess ähnelt jenem von Sites und bietet die Möglichkeit, das Design/die CSS der übergeordneten Sites-Seite zu übernehmen. Darüber hinaus vereinfacht das BEM-Modell die Gestaltung und Veränderung von Stilen.

  • Barrierefreiheit: Kernkomponenten in adaptiven Formularen unterstützen Standards und Richtlinien für die Barrierefreiheit, um sicherzustellen, dass Formulare von Menschen mit Behinderungen verwendet werden können, einschließlich solcher, die Hilfstechnologien wie Bildschirmlesehilfen verwenden.

  • Versionierung: Sie können mehrere Versionen eines adaptiven Formulars auf der Basis von Kernkomponenten erstellen und verwalten, an kollaborativen Diskussionen teilnehmen, indem Sie Kommentare abgeben, und Anmerkungen zu bestimmten Formularkomponenten hinzufügen, um die Erfahrung bei der Formularerstellung insgesamt zu verbessern.

Verfügbare Komponenten: Aufschlüsselung nach Komponententyp

Die aktuelle Version von AEM Forms enthält die folgenden Kernkomponenten: Foundation-Komponenten und Formularblock-Komponenten (Edge Delivery Services).

Komponenten
Foundation-Komponenten
Kernkomponenten
Formularblock-Komponenten
Zusätzliche Informationen
Adobe Sign Block
✔️
Die Adobe Sign-Integration ist nur für Foundation-Komponenten verfügbar.
Akkordeon
✔️
✔️
Für Foundation-Komponenten können Sie das Akkordeon-Layout in den Eigenschaften der Bedienfeldkomponenten konfigurieren.
Adaptives Formularfragment
✔️
✔️
Für Foundation-Komponenten können Sie aus dem Asset-Browser ein Fragment hinzufügen.
Adaptives Formular – reCAPTCHA
✔️
✔️
✔️
Verwenden Sie für Foundation-Komponenten die Captcha-Komponente, um Google reCaptcha zu einem Formular hinzuzufügen.
Schaltfläche
✔️
✔️
✔️
Diagramm
✔️
Kontrollkästchen
✔️
✔️
Kontrollkästchengruppe
✔️
✔️
✔️
Verwenden Sie für Foundation-Komponenten die Kontrollkästchen-Komponente, um mehrere Kontrollkästchen hinzuzufügen
Feld zur Datumseingabe
✔️
Für Kernkomponenten verwenden Sie die Komponente Datumsauswahl. Sie können auch die separaten Komponenten Textfeld oder numerisches Feld hinzufügen, um den Tag, den Monat und das Jahr zu erfassen.
Datumsauswahl
✔️
✔️
✔️
Dropdown-Liste
✔️
✔️
✔️
E-Mail
✔️
✔️
✔️
Dateianhang
✔️
✔️
✔️
Auflistung der Dateianhänge
✔️
Fußzeile
✔️
✔️
✔️
Fußnoten-Platzhalter
✔️
Formular-Container
✔️
✔️
✔️
Verwenden Sie für Foundation-Komponenten die Stamm-Bedienfeld-Komponente.
Formulartitel
✔️
✔️
Verwenden Sie für Foundation-Komponenten die Titelkomponente.
hCaptcha
✔️
✔️
Kopfzeile
✔️
✔️
✔️
Horizontale Registerkarten
✔️
✔️
Für Foundation-Komponenten können Sie das Layout der Registerkarten oben (horizontale Registerkarten) in den Eigenschaften der Bedienfeldkomponenten konfigurieren.
Bild
✔️
✔️
✔️
Bildauswahl
✔️
Schaltfläche „Weiter“
✔️
✔️
Verwenden Sie die Assistentenkomponente für die Schaltflächen „Weiter“ und „Zurück“, um zwischen mehreren Bedienfeldern zu wechseln.
Numerisches Feld
✔️
✔️
✔️
Numerische Schritte
✔️
Panel
✔️
✔️
✔️
Kennwortfeld
✔️
✔️
Telefon / Mobiltelefon
✔️
✔️
✔️
Schaltfläche „Zurück“
✔️
✔️
Verwenden Sie die Assistentenkomponente für die Schaltflächen „Weiter“ und „Zurück“, um zwischen mehreren Bedienfeldern zu wechseln.
Optionsfeldgruppe
✔️
✔️
✔️
Schaltfläche „Zurücksetzen“
✔️
✔️
✔️
Freihändige Unterschrift
✔️
Trennzeichen
✔️
Verwenden Sie die WCM-Trennzeichenkomponente.
Schaltfläche „Senden“
✔️
✔️
✔️
Zusammenfassungsschritt
✔️
Schalter
✔️
✔️
Tabelle
✔️
Geschäftsbedingungen
✔️
✔️
Text
✔️
✔️
✔️
Textfeld
✔️
✔️
✔️
Turnstile Captcha
✔️
Turnstile Captcha ist nur für Foundation-Komponenten verfügbar.
Vertikale Registerkarten
✔️
✔️
Für Foundation-Komponenten können Sie das Layout der Registerkarten links (vertikale Registerkarten) in den Eigenschaften der Bedienfeldkomponenten konfigurieren
Assistent
✔️
✔️
✔️
Für Foundation-Komponenten können Sie das Assistenten-Layout in den Eigenschaften der Bedienfeldkomponenten konfigurieren
NOTE
  • Zusätzlich zu den oben aufgeführten Komponenten unterstützt der Formularbaustein alle gültigen HTML5-Eingabetypen und Textbereiche als Komponenten.
  • Benötigen Sie eine Komponente, die oben nicht aufgeführt ist? Fordern Sie sie per E-Mail an aem-forms-ea@adobe.com von Ihrer offiziellen Adresse an.

Bedienfreundlicher Formular-Editor

Der Editor für adaptive Formulare, die auf Kernkomponenten basieren, ähnelt dem Editor, den Sie bereits für die Erstellung von AEM Sites-Seiten verwenden. Folgendes erhalten Sie:

  • Vertraute Benutzeroberflächen-Elemente und -Einstellungen: Beim Konfigurieren von Eigenschaften für Formularkomponenten werden Sie feststellen, dass das Dialogfeld „Eigenschaften“ genauso aussieht wie das Dialogfeld, das Sie für WCM-Kernkomponenten verwenden. Dadurch können Sie die gewünschten Optionen schneller finden. Wie bei den WCM-Kernkomponenten wird auch bei den Formularkomponenten das Dialogfeld „Eigenschaften“ in der Mitte des Editors angezeigt, mit klaren Registerkarten, die grundlegende und erweiterte Optionen, Hilfetext und Informationen zur Barrierefreiheit voneinander trennen – alles in einem Registerkartenformat zur einfachen Navigation.

  • Regeleditor: Sie können Ihren Formularen Logik und dynamische Funktionen hinzufügen, ohne Code zu schreiben. Mit dem integrierten Regeleditor können Sie Folgendes:

    • Felder basierend auf Benutzerentscheidungen ein- oder ausblenden
    • Ein Objekt aktivieren oder deaktivieren
    • Einen Wert für ein Objekt festlegen
    • Berechnungen durchführen
    • Eine Eigenschaft eines Objekts festlegen
    • Dateneingaben überprüfen
    • Einen Dienst aufrufen (externe Funktionalität aufrufen)
    • Integrierte Funktionen verwenden (vordefinierte Funktionen für häufige Aufgaben)
    • Benutzerdefinierte Funktionen verwenden (Ihren eigenen Code für bestimmte Anforderungen)
    • Felder und Bedienfelder validieren (sicherstellen, dass die Daten die Anforderungen erfüllen)
    • Den Wert eines Objekts validieren
    • Funktionen zur Berechnung des Werts eines Objekts ausführen
    • Einen Formulardatenmodelldienst aufrufen und einen Vorgang durchführen
    • Dynamische Stile hinzufügen (die Darstellung basierend auf Bedingungen ändern)
    • Andere Regeln erstellen (Kettenaktionen und Logik)
    • und mehr!

    Der Regeleditor verfügt nicht über den Code-Editor. Sie können benutzerdefinierte Funktionen verwenden, um Ihren eigenen Code für bestimmte Anforderungen zum Regeleditor hinzuzufügen.

  • Vorbefüllen von Formularen: Sie können bestimmte Felder in einem Formular automatisch mit vorhandenen Daten füllen, wenn eine Benutzerin oder ein Benutzer es öffnet. Dadurch sparen Benutzende Zeit und Mühe, da die manuelle Eingabe bereits verfügbarer Informationen entfällt. Der Editor für Kernkomponenten bietet einen vorkonfigurierten Vorbefüllungsdienst, um Formularfelder mithilfe eines Formulardatenmodells auszufüllen. Sie können auch benutzerdefinierte Vorbefüllungsdienste für komplexere Szenarien erstellen.

  • Datensatzdokument (DoR): Ein Datensatzdokument (Document of Record – DoR) bezieht sich auf eine formale, druckbare Darstellung der Daten, die über das Formular übermittelt werden. Es dient als permanenter Datensatz der von der Benutzerin oder vom Benutzer eingegebenen Informationen und liefert eine Momentaufnahme der gesendeten Daten in einem benutzerfreundlichen Format. Dies ist normalerweise ein PDF-Dokument. Sie können den Editor verwenden, um eine benutzerdefinierte Vorlage zu konfigurieren oder eine vorkonfigurierte Vorlage zu verwenden, um ein DoR zu generieren.

  • Formulardatenmodell: Ein adaptives Formulardatenmodell (Forms Date Model – FDM) dient als Brücke zwischen Ihren adaptiven Formularen und Ihren Datenquellen. Es definiert im Wesentlichen die Struktur und Organisation der Daten, die Ihre Formulare erfassen und mit denen Sie interagieren. Sie können den Editor verwenden, um Ihr Formular einfach mit einem Formulardatenmodell (FDM) zu verbinden.

  • Formulareinreichungen: Eine Formulareinreichung bezieht sich auf den Prozess, bei dem Benutzende ihre Formulare ausfüllen und senden. Dadurch wird eine Reihe von Aktionen ausgelöst, die in der Formularkonfiguration definiert sind und letztendlich zur Speicherung oder Verarbeitung der gesendeten Daten führen. Der Editor für adaptive Formulare bietet eine Vielzahl von Optionen zum Konfigurieren von Formulareinreichungen. Einige der gängigen Sendeaktionen sind:

  • Kernkomponenten für adaptive Formulare im Sites-Seiteneditor: Sie können Kernkomponenten für adaptive Formulare im AEM-Seiteneditor und in AEM Experience Fragments aktivieren und verwenden, um Datenerfassungserlebnisse direkt bei der Erstellung einer Sites-Seite zu erstellen.

    embed

    https://video.tv.adobe.com/v/3419284?quality=12&learn=on

Aktivieren der Kernkomponenten für adaptive Formulare

Durch die Aktivierung der Kernkomponenten für adaptive Formulare in AEM Forms as a Cloud Service können Sie mit der Erstellung, Veröffentlichung und Bereitstellung von auf Kernkomponenten basierenden adaptiven Formularen und Headless-Formularen beginnen, und zwar für mehrere Kanäle mithilfe der Instanzen von AEM Forms as a Cloud Service. Detaillierte Anweisungen zum Aktivieren der Kernkomponenten für adaptive Formulare finden Sie unter Aktivieren der Kernkomponenten für adaptive Formulare in AEM Forms as a Cloud Service und lokaler Entwicklungsumgebung.

Die Kernkomponenten für adaptive Formulare haben die folgenden Anforderungen.

AEM-Version
AEM Forms-Add-on
Kernkomponenten für adaptive Formulare
AEM as a Cloud Service
Forms – Digitale Registrierung
Version 2.0.10+
AEM 6.5
Forms-Add-on
Version 1.1.12+

Wenn Ihre Version des AEM Cloud Service SDK älter als 2023.02.0 ist, stellen Sie sicher, dass das prerelease-Flag in Ihrer Umgebung aktiviert ist, da Kernkomponenten für adaptive Formulare Teil der Vorabversion vor der Version 2023.02.0 waren.

Erstellen eines auf Kernkomponenten basierenden adaptiven Formulars

Sie können die folgenden Aktionen sowohl in Umgebungen von AEM Forms as a Cloud Service als auch von AEM 6.5 Forms ausführen:

Aktion
AEM Forms-Version
Erstellen eines eigenständigen adaptiven Formulars
AEM Forms as Cloud Service
Erstellen eines adaptiven Formulars in einer AEM Sites-Seite
AEM 6.5 Forms, AEM Forms as Cloud Service
Erstellen eines adaptiven Formulars in einem AEM Experience Fragment
AEM 6.5 Forms, AEM Forms as Cloud Service
Konvertieren eines adaptiven Formulars in ein Experience Fragment
AEM 6.5 Forms, AEM Forms as Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c