DokumentationAEM 6.4Forms-Anleitung

Erstellen eines benutzerdefinierten Profils für HTML5-Formulare creating-a-custom-profile-for-html-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • User
CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

Ein Profil ist ein Ressourcenknoten in Apache Sling. Es enthält eine benutzerdefinierte Version des HTML5-Formularen-Render-Dienstes. Sie können den Render-Service für HTML5-Formulare verwenden, um Erscheinungsbild, Verhalten und Interaktionen von HTML5-Formularen anzupassen. Ein Profilknoten ist im Ordner /content im JCR-Repository vorhanden. Sie können den Knoten direkt im Ordner /content oder in einem beliebigen Unterordner des Ordners /content platzieren.

Der Profilknoten hat die sling:resourceSuperType-Eigenschaft und der Standardwert ist xfaforms/profile. Das Render-Skript für den Knoten ist unter /libs/xfaforms/profile verfügbar.

Die Sling-Skripte sind JSP-Skripte. Diese JSP-Skripte dienen als Container für die Zusammenstellung des HTML für das angeforderte Formular und der erforderlichen JS-/CSS-Artefakte. Die Sling-Skripte werden auch als Profil-Renderer-Skripte bezeichnet. Der Profil-Renderer ruft den Forms-OSGi-Service auf, um das angeforderte Formular zu rendern.

Das Profilskript für GET- und POST-Anfragen befindet sich in „html.jsp“ und „html.POST.jsp“. Sie können eine oder mehrere Dateien kopieren und verändern, um Ihre Anpassungen zu überschreiben. Nehmen Sie keine Änderungen an Ort und Stelle vor, denn die Aktualisierung des Patches überschreibt solche Änderungen.

Ein Profil enthält verschiedenen Module. Die Module sind formRuntime.jsp, config.jsp, toolbar.jsp, formBody.jsp, nav_footer.jsp und footer.jsp.

formRuntime.jsp formruntime-jsp-br

Die „formRuntime.jsp“-Module enthalten Verweise auf die Client-Bibliotheken. Sie stellen außerdem Methoden dar, um Gebietsschema-Informationen von einer Anforderung zu extrahieren und lokalisierte Nachrichten in die Anforderung einzufügen. Sie können eigene benutzerdefinierte JavaScript-Bibliotheken oder -Stile in die formRuntime.jsp aufnehmen.

config.jsp config-jsp

Das config.jsp-Modul enthält verschiedene Konfigurationen wie Protokollierung, Proxy-Dienste und Verhaltensversion. Sie können Ihre eigene Konfiguration und Widget-Anpassung zum config.jsp-Modul hinzufügen. Sie können auch Konfigurationen wie beispielsweise benutzerdefinierte Widget-Registrierung zum „config.jsp“-Modul hinzufügen.

toolbar.jsp toolbar-jsp

Die Datei „toolbar.jsp“ enthält den Code zur Erstellung von farbigen Symbolleisten. Um die Symbolleiste zu entfernen, entfernen Sie toolbar.jsp aus der HTML.jsp

formBody.jsp formbody-jsp

Das Modul „formBody.jsp“ dient zur HTML-Darstellung des XFA-Formulars.

Zunächst gibt das HTML5-Formular nur die erste Formularseite wieder. Wenn ein Benutzer einen Bildlauf im Formular durchführt, wird der Rest der Formulare geladen. Dadurch wird das Laden schneller. Die Komponente „nav_footer.jsp“ enthält alle Stile und erforderlichen Elemente, um das schrittweise Laden der Seiten beim Scrollen zu erleichtern.

footer.jsp footer-jsp

Das Modul footer.jsp ist leer. Damit können Sie Skripte hinzufügen, die ausschließlich für die Interaktion mit dem Benutzer dienen.

Erstellen von benutzerdefinierten Profilen creating-custom-profiles

Um ein benutzerdefiniertes Profil zu erstellen, führen Sie die folgenden Schritte aus:

Profilknoten erstellen create-profile-node

  1. Navigieren Sie zur CRX DE-Schnittstelle unter der URL https://[server]:[port]/crx/de und melden Sie sich mit Administratorberechtigungen an.

  2. Im linken Fensterbereich navigieren Sie zum Speicherort: /content/xfaforms/profiles.

  3. Kopieren Sie „node default“ und fügen Sie den Knoten in einen anderen Ordner (/content/profiles) mit dem Namen hrform ein.

  4. Wählen Sie den neuen Knoten hrform und fügen Sie eine String-Eigenschaft hinzu: sling:resourceType mit dem Wert: hrform/demo.

  5. Klicken Sie im Symbolleistenmenü auf Alle speichern, um die Änderungen zu speichern.

Erstellen Sie das Profil-Renderer-Skript create-the-profile-renderer-script

Nachdem Sie ein benutzerdefiniertes Profil erstellt haben, fügen Sie diesem Profil Renderinformationen hinzu. Nach Erhalt einer Anfrage für das neue Profil überprüft CRX, ob der Ordner /apps vorhanden ist, damit die JSP-Seite gerendert werden kann. Erstellen Sie die JSP-Seite im Ordner /apps .

  1. Navigieren Sie im linken Fensterbereich zum Ordner /apps.

  2. Klicken Sie mit der rechten Maustaste auf den Ordner /apps und wählen Sie die Erstellung eines Ordners mit dem Namen hrform.

  3. Erstellen Sie innerhalb des Ordners hrform einen Ordner namens demo.

  4. Klicken Sie auf die Schaltfläche Alle speichern.

  5. Navigieren Sie zu /libs/xfaforms/profile/html.jsp und kopieren Sie den Knoten html.jsp.

  6. Fügen Sie den Knoten html.jsp in den oben erstellten Ordner /apps/hrform/demo mit demselben Namen html.jsp ein und klicken Sie auf Speichern.

  7. Wenn Sie andere Profil-Skript-Komponenten haben, führen Sie die Schritte 1-6 aus, um die Komponenten in den Ordner „/apps/hrform/demo“ zu kopieren.

  8. Um zu überprüfen, dass das Profil erstellt wurde, rufen Sie die URL https://[server]:[port]/content/xfaforms/profiles/hrform.html auf.

Um Ihre Formulare zu überprüfen, Importieren Sie Ihre Formulareaus Ihrem lokalen Dateisystem in AEM Forms und zeigen Sie eine Vorschau des Formulars in der Autoreninstanz des AEM-Servers an.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da