Erste Schritte mit Edge Delivery Services für AEM Forms mithilfe des universellen Editors

1. Zugriff auf die AEM Forms-Bausteinvorlage

   • Navigieren Sie zu https://github.com/adobe-rnd/aem-boilerplate-forms.

   
   Abbildung: AEM Forms-Baustein-Repository mit vorkonfiguriertem adaptiven Formularblock

2. Erstellen Ihres Repositorys

   • Klicken Sie auf Diese Vorlage verwenden > Neues Repository erstellen.

   
   Abbildung: Verwenden der Vorlage zum Erstellen eines neuen Repositorys

3. Konfigurieren der Repository-Einstellungen

   • Inhaber: Wählen Sie Ihr GitHub-Konto oder Ihre Organisation aus.
   • Repository-Name: Wählen Sie einen beschreibenden Namen aus (z. B. my-forms-project).
   • Sichtbarkeit: Wählen Sie Öffentlich (für Edge Delivery Services empfohlen).
   • Klicken Sie auf Repository erstellen.

   
   Abbildung: Konfigurieren des neuen Repositorys mit öffentlicher Sichtbarkeit

Validierung Vergewissern Sie sich, dass Sie ein neues GitHub-Repository haben, das auf der Bausteinvorlage von AEM Forms basiert.

AEM Code Sync sorgt für eine automatische Synchronisierung von Inhaltsänderungen zwischen Ihrer AEM-Authoring-Umgebung und Ihrem GitHub-Repository.

1. Installieren der GitHub-App

   • Navigieren Sie zu https://github.com/apps/aem-code-sync/installations/new.

2. Konfigurieren von Zugriffsberechtigungen

   • Wählen Sie Nur bestimmte Repositorys.
   • Wählen Sie Ihr neu erstelltes Repository aus.
   • Klicken Sie auf Speichern.

   
   Abbildung: Installieren von AEM Code Sync mit Repository-spezifischen Berechtigungen

Checkpoint: AEM Code Sync ist jetzt installiert und hat Zugriff auf Ihr Repository.

Die fstab.yaml-Datei verbindet Ihr GitHub-Repository für die Inhaltssynchronisierung mit der AEM-Authoring-Umgebung.

1. Navigieren Sie zu Ihrem Repository.

   • Wechseln Sie zu Ihrem neu erstellten GitHub-Repository.
   • Sie sollten die Bausteindateien von AEM Forms sehen.

2. Erstellen der Datei „fstab.yaml“

   • Klicken Sie im Stammverzeichnis auf Datei hinzufügen > Neue Datei erstellen.
   • Suchen Sie die Datei fstab.yaml.

   
   Abbildung: Erstellen der Konfigurationsdatei „fstab.yaml“

3. Fügen Sie Ihre AEM-Verbindungsdetails hinzu.

   Kopieren Sie die folgende Konfiguration und fügen Sie sie ein. Ersetzen Sie dabei die Platzhalter:

   code language-yaml
   mountpoints: /: url: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main type: "markup" suffix: ".html"

   Ersetzen Sie:

   • <aem-author>: Ihre AEM as a Cloud Service-Autoren-URL (z. B. author-p12345-e67890.adobeaemcloud.com)
   • <owner>: Ihren GitHub-Benutzernamen oder Ihre Organisation
   • <repository>: Ihren Repository-Name

   Beispiel:

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   Abbildung: Konfigurieren des Bereitstellungspunkts für die AEM-Integration

4. Übermitteln Sie die Konfiguration.

   • Fügen Sie eine Commit-Nachricht hinzu: „Konfiguration für AEM-Integration hinzufügen“.
   • Klicken Sie auf Neue Datei übermitteln.

   
   Abbildung: Übermitteln der fstab.yaml-Konfiguration

Validierung: Prüfen Sie die Verbindung zwischen Ihrem GitHub-Repository und AEM.

1. Zugriff auf die AEM Sites-Konsole

   • Melden Sie sich bei Ihrer Authoring-Instanz in AEM as a Cloud Service an.
   • Navigieren Sie zu Sites.

   
   Abbildung: Aufrufen der AEM Sites-Konsole

2. Starten der Site-Erstellung

   • Klicken Sie auf Erstellen > Site aus Vorlage.

   
   Abbildung: Erstellen einer neuen Site aus einer Vorlage

3. Auswählen der Edge Delivery Services-Vorlage

   • Wählen Sie die Vorlage Edge Delivery Services-Site aus.
   • Klicken Sie auf Weiter.

   
   Abbildung: Auswählen der Site-Vorlage für Edge Delivery Services

   note note
   NOTE
   Vorlage nicht verfügbar? Wenn die Edge Delivery Services-Vorlage nicht angezeigt wird:
   Klicken Sie auf Importieren, um die Vorlage hochzuladen. Herunterladen von Vorlagen aus GitHub-Versionen

4. Konfigurieren Sie Ihre Site

   Geben Sie folgende Informationen ein:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Feld	Wert	Beispiel
   Site-Titel	Beschreibender Name für Site	„Mein Formularprojekt“
   Site-Name	URL-freundlicher Name	„my-forms-project“
   GitHub-URL	Ihre Repository-URL	https://github.com/mycompany/my-forms-project

   
   Abbildung: Konfigurieren Ihrer neuen AEM-Site mit GitHub-Integration

5. Vollständige Site-Erstellung

   • Prüfen Sie Ihre Einstellungen.
   • Klicken Sie auf Erstellen.

   
   Abbildung: Bestätigen der Site-Erstellung

   Sie waren erfolgreich! Ihre AEM-Site ist jetzt eingerichtet und mit GitHub verbunden.

6. Öffnen im universellen Editor

   • Suchen Sie in der Sites-Konsole Ihre neue Site.
   • Wählen Sie die Seite index
   • Klicken Sie auf Bearbeiten.

   
   Abbildung: Öffnen Ihrer Site zum Bearbeiten

   Der universelle Editor wird auf einer neuen Registerkarte geöffnet und bietet WYSIWYG-Authoring-Funktionen.

   
   Abbildung: Ihre Site wurde im universellen Editor zur WYSIWYG-Bearbeitung geöffnet

Validierung: Vergewissern Sie sich, dass Ihre AEM-Site zum Erstellen von Formularen bereit ist.

Durch das Veröffentlichen wird Ihre Site in Edge Delivery Services für globalen Zugriff verfügbar.

1. Quick Publish über die Sites-Konsole

   • Kehren Sie zur AEM Sites-Konsole zurück.
   • Wählen Sie die Seiten Ihrer Site aus (oder wählen mit Strg+A alles aus).
   • Klicken Sie auf Quick Publish.

   
   Abbildung: Auswählen von Seiten für Quick Publish

2. Bestätigen der Veröffentlichung

   • Klicken Sie im Bestätigungsdialogfeld auf Veröffentlichen.

   
   Abbildung: Bestätigen der Veröffentlichungsaktion

   Alternative Sie können mit der Schaltfläche „Veröffentlichen“ auch direkt im universellen Editor veröffentlichen.

   
   Abbildung: Direktes Veröffentlichen im universellen Editor

3. Zugreifen auf Ihre Live-Site

   Ihre Website ist jetzt live unter:

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   Erläuterung der URL-Struktur:

   • <branch>: GitHub-Verzweigung (normalerweise main)
   • <repo>: Ihr Repository-Name
   • <owner>: Ihr GitHub-Benutzername oder Ihre Organisation
   • <site-name>: Der Name Ihrer AEM-Site

   Beispiel:

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

Validierung: Vergewissern Sie sich, dass Ihre Site in Edge Delivery Services live ist.

Weiter:  Erstellen Ihres ersten Formulars

1. Navigieren Sie zu Ihrem lokalen Projekt.

   code language-bash
   cd /path/to/your/aem-project

2. Laden Sie erforderliche Dateien aus dem AEM Forms-Baustein herunter.

   Kopieren Sie diese Dateien aus dem AEM Forms-Baustein-Repository:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Quelle	Ziel	Zweck
   blocks/form/	blocks/form/	Zentrale Formularfunktionalität
   scripts/form-editor-support.js	scripts/form-editor-support.js	Integration des universellen Editors
   scripts/form-editor-support.css	scripts/form-editor-support.css	Editor-Formatierung

3. Editor-Unterstützung aktualisieren

   • Ersetzen Sie Ihre /scripts/editor-support.js-Datei durch die Datei editor-support.js aus dem AEM Forms-Baustein.

Validierung: Vergewissern Sie sich, dass sich Formularblockdateien in Ihrem Projekt befinden.

1. Aktualisieren von Abschnittsmodell

   Öffnen Sie /models/_section.json und fügen Sie den Filtern Formularkomponenten hinzu:

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   Ergebnis: Aktiviert Formularkomponenten in der Komponentenauswahl des universellen Editors.

Validierung: Vergewissern Sie sich, dass im universellen Editor Formularkomponenten angezeigt werden.

Wozu dient dieser Schritt: Verhindert Linting-Fehler aus formularspezifischen Dateien und konfiguriert korrekte Validierungsregeln.

1. Aktualisieren von .eslintignore

   Fügen Sie diese Zeilen zu /.eslintignore hinzu:

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. Aktualisieren von .eslintrc.js

   Fügen Sie diese Regeln zum rules-Objekt in /.eslintrc.js hinzu:

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

Validierung: Vergewissern Sie sich, dass ESLint mit Formularkomponenten funktioniert.

1. Installieren von Abhängigkeiten und Aufbauen

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   Ergebnis:

   • Aktualisiert component-definition.json mit Formularkomponenten
   • Erzeugt component-models.json mit Formularmodellen
   • Erstellt component-filters.json mit Filterregeln

2. Überprüfen der generierten Dateien

   Vergewissern Sie sich, dass diese Dateien im Projektstamm formularbezogene Objekte enthalten:

   • component-definition.json
   • component-models.json
   • component-filters.json

3. Übermitteln und Übertragen von Änderungen

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

Validierung: Vergewissern Sie sich, dass Ihr Projekt Formularfunktionen enthält.

1. Öffnen Ihrer Seite im universellen Editor

   • Navigieren Sie zur Sites-Konsole in AEM.
   • Wählen Sie die Seite aus, auf der Sie ein Formular hinzufügen möchten (z. B. index).
   • Klicken Sie auf Bearbeiten.

   Ihre Seite wird im universellen Editor zur WYSIWYG-Bearbeitung geöffnet.

2. Hinzufügen der adaptiven Formularkomponente

   • Öffnen Sie das Bedienfeld Inhaltsstruktur (linke Seitenleiste).
   • Navigieren Sie zu einem Abschnitt, in dem Sie Ihr Formular hinzufügen möchten.
   • Klicken Sie auf das Symbol Hinzufügen (+).
   • Wählen Sie Adaptives Formular in der Komponentenliste aus.

   
   Abbildung: Hinzufügen eines adaptiven Formularblocks zu Ihrer Seite

Validierung Vergewissern Sie sich, dass Sie einen leeren Formular-Container haben.

1. Navigieren zu Ihrem Formularblock

   • Suchen Sie in der Inhaltsstruktur den Abschnitt mit dem neu hinzugefügten adaptiven Formular.

   
   Abbildung: Adaptiver Formularblock in der Inhaltsstruktur

2. Hinzufügen von Formularkomponenten

   Es gibt zwei Möglichkeiten, um Komponenten hinzuzufügen:

   Methode A: Zum Hinzufügen klicken

   • Klicken Sie in Ihrem Formularabschnitt auf das Symbol Hinzufügen (+).
   • Wählen Sie Komponenten aus der Liste Adaptive Formularkomponenten.

   Methode B: Drag-and-Drop

   • Ziehen Sie Komponenten direkt aus dem Komponentenfeld in das Formular.

   
   Abbildung: Hinzufügen von Komponenten zu Ihrem Formular

   Empfohlene Anfangskomponenten:

   • Texteingabe (für Name, E-Mail)
   • Textbereich (für Nachrichten)
   • Schaltfläche „Senden“

3. Konfigurieren von Komponenteneigenschaften

   • Wählen Sie eine beliebige Formularkomponente aus.

   • Verwenden Sie das Bedienfeld Eigenschaften (rechte Seitenleiste) zum Konfigurieren von:

     • Beschriftungen und Platzhaltern
     • Validierungsregeln
     • Erforderlichen Feldeinstellungen

   
   Abbildung: Konfigurieren von Komponenteneigenschaften

4. Anzeigen einer Vorschau Ihres Formulars

   Ihr Formular wird in etwa so aussehen:

   
   Abbildung: Beispielformular, das mit dem universellen Editor erstellt wurde

Validierung: Vergewissern Sie sich, dass das Formular zur Veröffentlichung bereit ist.

1. Veröffentlichen im universellen Editor

   • Klicken Sie im universellen Editor auf die Schaltfläche Veröffentlichen.

   
   Abbildung: Veröffentlichen Ihres Formulars im universellen Editor

2. Bestätigen der Veröffentlichung

   • Klicken Sie im Bestätigungsdialogfeld auf Veröffentlichen.

   
   Abbildung: Bestätigen der Veröffentlichungsaktion

   Sie sehen eine Erfolgsmeldung, in der die Veröffentlichung bestätigt wird.

   
   Abbildung: Bestätigung der erfolgreichen Veröffentlichung

3. Anzeigen Ihres Live-Formulars

   Ihr Formular ist jetzt live unter:

   code language-none
   https://<branch>--<repo>--<owner>.aem.live/content/<site-name>/

   Beispiel-URL:

   code language-none
   https://main--my-forms-project--mycompany.aem.live/content/my-forms-project/

   
   Abbildung: Ihre veröffentlichte Formularseite in Edge Delivery Services

Herzlichen Glückwunsch! Ihr Formular ist jetzt live und bereit, ausgefüllt und übermittelt zu werden.

1. Installieren der AEM-CLI

   Die AEM-CLI vereinfacht lokale Entwicklungsaufgaben:

   code language-bash
   npm install -g @adobe/aem-cli

2. Klonen Ihres Repositorys

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   Ersetzen Sie <owner> und <repo> durch Ihre tatsächlichen GitHub-Details.

3. Starten des lokalen Entwicklungs-Servers

   code language-bash
   aem up

   Dadurch wird ein lokaler Server mit Hot-Reload-Funktionen gestartet.

4. Vornehmen von Anpassungen

   • Bearbeiten Sie Dateien im Verzeichnis blocks/form/ für Formularstile und -verhalten.
   • Ändern Sie form.css für Stile.
   • Aktualisieren Sie form.js für das Verhalten.

   Sofortiges Anzeigen von Änderungen in Ihrem Browser unter http://localhost:3000

5. Bereitstellen Ihrer Änderungen

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   Ihre Änderungen sind verfügbar unter:

   • Vorschau:  https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • Produktion: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Problem: Build-Fehler oder Verknüpfungsfehler

Lösung 1: Beheben von Linting-Fehlern

Wenn Sie auf Linting-Fehler stoßen:

1. Öffnen Sie package.json in Ihrem Projektstamm.

2. Suchen Sie das lint-Skript:

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. Deaktivieren Sie Linting vorübergehend:

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. Bestätigen und übermitteln Sie die Änderungen.

Lösung 2: Fehler im Modulpfad

Wenn „Der Pfad zum Modul "/scripts/lib-franklin.js" kann nicht aufgelöst werden“ angezeigt wird:

1. Navigieren Sie zu blocks/form/form.js

2. Aktualisieren Sie die import-Anweisung:

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

Problem: Formularübermittlungen funktionieren nicht

Lösungen:

• Stellen Sie sicher, dass Sie über eine Schaltflächenkomponente zum Senden verfügen.
• Überprüfen Sie die Konfiguration der Formularaktions-URL.
• Überprüfen Sie die Formularvalidierungsregeln.
• Testen Sie zuerst im Vorschaumodus.

Problem: Formatierungsprobleme

Lösungen:

• Überprüfen Sie CSS-Dateipfade in blocks/form/.
• Löschen Sie den Browsercache.
• Überprüfen Sie die CSS-Syntax.
• Testen Sie in der lokalen Entwicklungsumgebung.

Problem: Formularkomponenten werden im universellen Editor nicht angezeigt

Lösungen:

• Überprüfen Sie, ob AEM Code Sync installiert ist und ausgeführt wird.
• Vergewissern Sie sich, dass fstab.yaml über die richtige AEM-Autoren-URL verfügt.
• Stellen Sie sicher, dass für Ihre AEM-Instanz der frühzeitige Zugriff aktiviert ist.
• Vergewissern Sie sich, dass component-definition.json Formularkomponenten enthält.

Problem: Änderungen nach der Veröffentlichung nicht sichtbar

Lösungen:

• Warten Sie auf die CDN-Cache-Aktualisierung.
• Prüfen Sie den Browsercache (versuchen Sie es im Inkognito-/privaten Modus).
• Überprüfen Sie, ob das richtige URL-Format verwendet wird.