DokumentationAEMAnleitung zu den Hauptkomponenten

Anpassen von Kernkomponenten für adaptive Formulare

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Entwickler
  • Admin

Durch das Anpassen der Kernkomponenten für adaptive Formulare können Sie die vordefinierten Funktionen an Ihre spezifischen Anforderungen anpassen. Dieses Handbuch führt Sie durch den Prozess der Anpassung dieser Komponenten, um ein stärker personalisiertes Erlebnis zu schaffen.

Voraussetzung

Bevor Sie sich mit der Anpassung der Kernkomponenten für adaptive Formulare befassen:

Anpassen einer Kernkomponente für adaptive Formulare

Gehen Sie wie folgt vor, um das Erscheinungsbild, das Verhalten und die Funktionalität einer Kernkomponente für adaptive Formulare zu ändern.

  1. Identifizieren und Duplizieren der Kernkomponente

    Beim Konfigurieren der Entwicklungsumgebung haben Sie ein auf Archetypen basierendes Projekt erstellt. Identifizieren Sie im AEM-Archetyp-Projekt die spezifische Kernkomponente, die Sie anpassen möchten. Erstellen Sie nach der Identifizierung ein Duplikat der Komponente in Ihrem AEM-Archetyp-basierten Projekt. Halten Sie sie parallel zu anderen Kernkomponenten für adaptive Formulare. Dieser Schritt stellt sicher, dass Ihre Anpassungsbemühungen keine Auswirkungen auf die Originalkomponente haben, sodass Sie frei experimentieren können.

  2. Anpassen der kopierten Komponente

    Öffnen Sie die duplizierte Komponente und nehmen Sie die erforderlichen Änderungen entsprechend Ihren Anforderungen vor:

    • HTML-Struktur anpassen: Passen Sie die HTML-Struktur an Ihre Design-Anforderungen an, während Sie Stilpraktiken des BEM (Block Element Modifier) für wartungsfähigen und skalierbaren Code verwenden.
    • Titel aktualisieren: Aktualisieren Sie die Beschriftung der Komponente, um einen klaren und beschreibenden Namen für die angepasste Version bereitzustellen. Halten Sie sich an die bereitgestellte OOTB-Beschriftungsvorlage (vorkonfiguriert), um Konsistenz zu gewährleisten.
    • Widget anpassen: Passen Sie das in der Komponente verwendete Widget (Dropdown-Listen, Kontrollkästchen) an Ihren spezifischen Anwendungsfall an. Nehmen die Beispiel-Widget-Implementierung als Referenz.
    • Hilfetext und Tooltips: Personalisieren Sie den Hilfetext oder die mit der Komponente verknüpften QuickInfos, um Benutzerinnen und Benutzern Kontext und Anleitung anzubieten. Verwenden Sie die OOTB-Hilfetextvorlage als Ausgangspunkt.
    • Datenattribute: Schließen Sie alle erforderlichen Datenattribute in die HTML-Elemente der Komponente ein. Diese Attribute sind für das ordnungsgemäße Funktionieren der Komponente zur Laufzeit von entscheidender Bedeutung. Lesen Sie die Dokumentation, um die Rolle von Datenattributen in den Kernkomponenten für adaptive Formulare zu verstehen.

  3. Implementieren der Backend-Logik

    Wenn Ihre Anpassung Backend-Logik erfordert, können Sie vorhandene Sling-Modelle erweitern. Siehe das bereitgestellte Beispiel, um die gewünschte Funktion nahtlos in Ihre angepasste Komponente zu integrieren.

  4. Konfigurieren des Dialogfelds der Komponente

    Konfigurieren Sie das Dialogfeld, das mit Ihrer angepassten Komponente verknüpft ist. Verwenden Sie das Beispiel für ein Komponentendialogfeld, das in der Dokumentation gegeben wird, um sicherzustellen, dass Benutzerinteraktionen und -einstellungen ordnungsgemäß verwaltet werden.

  5. Bereitstellen und Testen der Komponente in Ihrer lokalen Entwicklungsumgebung

    Verwenden Sie Maven zum Erstellen und Bereitstellen der Komponente in Ihrer lokalen Entwicklungsumgebung. Nachdem die Komponente bereitgestellt wurde, erstellen Sie ein adaptives Formular, um die benutzerdefinierte Komponente zu testen.

  6. Bereitstellen der benutzerdefinierten Komponente in Ihrer Produktionsumgebung

    Stellen Sie die Komponente nach dem Testen in Ihrer lokalen Entwicklungsumgebung in Ihren Produktionsumgebungen bereit.

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