Erstellen und Veröffentlichen von adaptiven Formularen mit Edge Delivery Services
Dieses Dokument enthält schrittweise Anweisungen zum Erstellen, Konfigurieren und Veröffentlichen von adaptivem Forms mithilfe von Edge Delivery Services-Vorlagen in AEM. Sie umfasst den gesamten Workflow von der Formularerstellung bis zur Produktionsbereitstellung.
Am Ende dieses Handbuchs werden Sie Folgendes gelernt haben:
- Erstellen von Formularen mit Edge Delivery Services-Vorlagen
- Erstellen von Formularen mit dem universellen Editor
- Konfigurieren und Veröffentlichen von Formularen in Edge Delivery Services
- Zugreifen auf veröffentlichte Formulare und Überprüfen der Bereitstellung
Voraussetzungen
Stellen Sie sicher, dass folgende Voraussetzungen erfüllt sind, bevor Sie fortfahren:
-
AEM Forms as a Cloud Service: Eine aktive Autoreninstanz mit einer Forms-Lizenz.
-
GitHub-Konto: Persönliches oder geschäftliches Konto für die Repository-Verwaltung.
-
Repository-Setup: Wählen Sie eine der folgenden Optionen:
- Neues Projekt: Erstellen Sie ein neues AEM-Projekt mit dem adaptiven Formularblock. Das Repository ist für Edge Delivery Services vorkonfiguriert.
- Vorhandenes Projekt: Fügen Sie einen adaptiven Formularblock zu einem vorhandenen Repository hinzu und aktualisieren Sie die Konfiguration.
-
AEM-GitHub-Verbindung: Stellen Sie eine Verbindung zwischen Ihrer AEM-Instanz und dem GitHub-Repository her.
-
Edge Delivery Services: Stellen Sie sicher, dass das Repository für die automatische Bereitstellung konfiguriert ist.
-
Berechtigungen: Vergewissern Sie sich, dass Sie über die erforderlichen Zugriffsrechte für die Erstellung und Veröffentlichung von Formularen verfügen.
-
Überprüfen Sie, ob das GitHub-Repository den adaptiven Formularblock enthält.
Workflow zur Erstellung und Veröffentlichung von Formularen
Der Prozess umfasst drei Hauptphasen:
- Phase 1: Formularerstellung
- Phase 2: Formularerstellung und -gestaltung
- Phase 3: Konfiguration und Veröffentlichung
Jede Phase umfasst Validierungsschritte zur Bestätigung der korrekten Einrichtung.
Schritt 1: Formularerstellung
-
Aufrufen der Formulareinrichtung
- Melden Sie sich bei Ihrer AEM Forms as a Cloud Service-Autoreninstanz an.
- Gehen Sie zu Adobe Experience Manager > Formulare > Formulare und Dokumente.
- Klicken Sie auf Erstellen > Adaptive Formulare.
-
Auswählen der Vorlage
-
Wählen Sie auf der Registerkarte Quelle eine Edge Delivery Services-basierte Vorlage aus.
-
Die Schaltfläche Erstellen wird aktiviert.
-
-
Konfigurieren von Optionen (optional)
- Registerkarte „Datenquelle“: Wählen Sie bei Bedarf Datenintegration aus.
- Registerkarte „Übermittlung“: Wählen Sie eine Übermittlungsaktion aus (kann später konfiguriert werden).
- Registerkarte „Bereitstellung“: Legen Sie einen Zeitplan für die Veröffentlichung/das Aufheben der Veröffentlichung fest.
-
Abschließen der Formulareinrichtung
-
Klicken Sie auf Erstellen, um den Assistenten für die Formularerstellung zu öffnen.
-
Geben Sie Folgendes ein:
- Name: Interne Kennung (keine Leerzeichen, stattdessen Bindestriche verwenden).
- Titel: Der Anzeigename für Ihr Formular.
- GitHub-URL: Repository-URL (z. B.
https://github.com/your-org/your-repo).
-
-
Validierung
-
Nachdem Sie auf Erstellen geklickt haben, überprüfen Sie folgende Aspekte:
- Das Formular lässt sich im universellen Editor öffnen.
- Die GitHub-URL ist korrekt verknüpft.
- Die Komponentenpalette ist verfügbar.
- Die Arbeitsfläche des Formulars ist sichtbar.
-
Ergebnis: Das Formular ist für das Authoring im universellen Editor bereit.
Schritt 2: Erstellen und Gestalten von Formularen
-
Aufrufen der Komponentenbibliothek
- Öffnen Sie den Inhalts-Browser im universellen Editor.
- Navigieren Sie in der Inhaltsstruktur zur Komponente Adaptives Formular.
-
Hinzufügen von Formularfeldern
- Klicken Sie auf das Symbol Hinzufügen, um die Komponentenbibliothek zu öffnen.
- Wählen Sie Komponenten aus der Liste Adaptive Formularkomponenten.
- Ziehen Sie Komponenten per Drag-and-Drop auf die Arbeitsfläche des Formulars.
-
Gestalten des Formulars
- Konfigurieren Sie die Feldeigenschaften im Bedienfeld „Eigenschaften“.
- Legen Sie Validierungsregeln und -verhalten fest.
- Passen Sie Stil und Layout nach Bedarf an.
Validierung
- Alle erforderlichen Felder sind vorhanden.
- Feldeigenschaften sind korrekt konfiguriert.
- Layout ist responsiv und zugänglich.
- Validierungsregeln funktionieren erwartungsgemäß.
Nächste Schritte
- Konfigurieren von Übermittlungsaktionen für die Datenverarbeitung.
- Handbuch zum universellen Editor für erweiterte Funktionen.
Schritt 3: Konfiguration und Veröffentlichung
Konfigurieren Sie Edge Delivery Services und veröffentlichen Sie Ihr Formular.
Konfiguration: automatisch (kein manuelles Setup erforderlich).
- Die Verbindung zum GitHub-Repository sowie die Edge Delivery Services-Konfiguration werden während der Formularerstellung eingerichtet.
- Veröffentlichungsendpunkte werden automatisch konfiguriert.
Verifizierung:
- Vergewissern Sie sich, dass die Konfiguration in den Formulareinstellungen angezeigt wird.
- Stellen Sie sicher, dass die GitHub-URL korrekt verlinkt ist.
Veröffentlichen des Formulars
-
Klicken Sie im universellen Editor auf die Schaltfläche Veröffentlichen (oben rechts).
-
Vergewissern Sie sich im Dialogfeld, dass die Veröffentlichung erfolgreich war.
-
Beachten Sie die generierten URLs für Staging- und Live-Versionen.
Formular-URLs
Veröffentlichte Formulare sind über Edge Delivery Services-URLs aufrufbar.
URL-Struktur
-
Gestaffelt (Vorschau/Test):
code language-none https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name> -
Live (Produktion):
code language-none https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>
URL-Parameter
<branch>: Name der GitHub-Verzweigung (z. B.main,develop)<repo>: Name des GitHub-Repositorys (z. B.my-forms-project)<owner>: GitHub-Organisation oder -Benutzername (z. B.company-name)<form_name>: Formularkennung, wie in AEM definiert (z. B.contact-us)
Beispiel
Beispiel für Formular contact-us in Repository forms-project unter Organisation acme-corp:
- Gestaffelt:
https://main--forms-project--acme-corp.aem.page/content/forms/af/contact-us - Live:
https://main--forms-project--acme-corp.aem.live/content/forms/af/contact-us
Umgebungsunterschiede
- Gestaffelt (.page): Neueste Änderungen zum Testen.
- Live (.live): Veröffentlichte Inhalte für die Produktion.
Aufschlüsselung der URL-Struktur von Edge Delivery Services-Formularen
Visuelle Beispiele
Edge Delivery Services-Vorlage:
- Gestaffelt:
- Live:
Fehlerbehebung
Im Folgenden finden Sie häufige Probleme und Lösungen für AEM Forms mit Edge Delivery Services.
Problem: Formular-URL gibt 404 oder eine leere Seite zurück.
Auflösung:
- Entfernen Sie die Erweiterung
.htmlaus URLs. - Überprüfen Sie, ob das Formular veröffentlicht wurde.
- Prüfen Sie das GitHub-Repository auf den adaptiven Formularblock.
- Stellen Sie sicher, dass der Formularname mit der URL übereinstimmt (Groß-/Kleinschreibung beachten).
Problem: Edge Delivery Services-Konfiguration funktioniert nicht.
Auflösung:
- Stellen Sie sicher, dass die GitHub-URL im Format
https://github.com/owner/repositoryvorliegt. - Verwenden Sie den richtigen Verzweigungsnamen in der Konfiguration.
- Überprüfen Sie den Repository-Zugriff (öffentlich oder authentifiziert).
- Prüfen Sie
fstab.yamlauf korrekte GitHub-Details.
Problem Änderungen werden nicht auf der Live-Site angezeigt.
Auflösung:
- Warten Sie 2-3 Minuten, bis der CDN-Cache aktualisiert wurde.
- Vergewissern Sie sich, dass der Veröffentlichungs-Workflow abgeschlossen wurde.
- Testen Sie zuerst in der gestaffelten Umgebung (.page).
- Stellen Sie sicher, dass das GitHub-Repository aktualisiert wurde.
Problem: Formular kann nicht bearbeitet werden oder Komponenten werden nicht geladen.
Auflösung:
- Verwenden Sie einen unterstützten Browser (Chrome, Firefox, Safari).
- Leeren Sie den Browsercache und löschen Sie Cookies.
- Überprüfen Sie die Netzwerkverbindung.
- Überprüfen Sie Autorenberechtigungen.
Problem: Formularübermittlungen funktionieren nicht.
Auflösung:
- Konfigurieren Sie die Übermittlungsaktion in den Formulareigenschaften.
- Testen Sie Übermittlungsendpunkte manuell.
- Überprüfen Sie die CORS-Einstellungen, wenn Sie Formulare einbetten.
- Überprüfen Sie, ob die erforderlichen Felder konfiguriert sind.
Problem: Langsames Laden von Formularen oder mangelhafte Leistung.
Auflösung:
- Optimieren Sie Bilder.
- Entfernen Sie unnötige Komponenten.
- Nutzen Sie das Edge Delivery Services-CDN.
- Minimieren Sie benutzerdefiniertes JavaScript/CSS.
Wenn die Probleme bestehen bleiben:
- Überprüfen Sie den Dienststatus von Adobe Experience Cloud.
- Lesen Sie die Dokumentation zu Edge Delivery Services.
- Besuchen Sie die Adobe Experience League-Community.
- Wenden Sie sich an die Adobe-Kundenunterstützung.
Nächste Schritte
Beachten Sie nach Abschluss der Formularerstellung und -veröffentlichung folgende Aspekte:
- Konfigurieren von Übermittlungsaktionen: Einrichten von Datenverarbeitung und Integrationen.
- Formulardatenmodelle: Verbinden von Formularen mit Backend-Datenquellen.
- Best Practices für Edge Delivery Services: Maximieren der Leistung.
- Formularanalyse: Verfolgen der Formularleistung und des Benutzerverhaltens.