Anpassen von Kernkomponenten für adaptive Formulare

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:

• Erhalten Sie Informationen zur Architektur von Kernkomponenten und gehen Sie die offizielle Dokumentation zu Adobe Experience Manager-Kernkomponenten durch. Diese umfangreichen Ressourcen dienen während des gesamten Anpassungsprozesses als Leitfaden für Sie.

• Einrichten der Entwicklungsumgebung – Dies gewährleistet einen reibungslosen Arbeitsablauf für Änderungen an den Kernkomponenten. Verwenden Sie beim Einrichten der Entwicklungsumgebung ein AEM-Archetyp-Projekt, das auf dem neuesten AEM-Archetyp-Projekt basiert. Je nach Umgebung haben Sie folgende Möglichkeiten:

  • Einrichten einer lokalen Entwicklungsumgebung für Forms as a Cloud Service.
  • Einrichten einer lokalen Entwicklungsumgebung für AEM 6.5 Forms

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.