Komma igång med Edge Delivery Services för AEM Forms med Universal Editor

1. Öppna AEM Forms-mallen för mallar

   • Gå till https://github.com/adobe-rnd/aem-boilerplate-forms

   
   Bild: AEM Forms-standarddatabas med förkonfigurerat adaptivt Forms-block

2. Skapa din databas

   • Klicka på Använd mallen > Skapa en ny databas

   
   Figur: Använda mallen för att skapa en ny databas

3. Konfigurera databasinställningar

   • Ägare: Välj ditt GitHub-konto eller din organisation
   • Databasnamn: Välj ett beskrivande namn (till exempel my-forms-project)
   • Synlighet: Välj Offentlig (rekommenderas för Edge Delivery Services)
   • Klicka på Skapa databas

   
   Bild: Konfigurera din nya databas med synlighet

Validering: Bekräfta att du har en ny GitHub-databas som är baserad på AEM Forms-mallen Boilerplate.

AEM Code Sync synkroniserar automatiskt innehållsändringar mellan din AEM-redigeringsmiljö och din GitHub-databas.

1. Installera GitHub App

   • Gå till https://github.com/apps/aem-code-sync/installations/new

2. Konfigurera åtkomstbehörigheter

   • Välj Välj bara databaser
   • Välj din nya databas
   • Klicka på Spara

   
   Bild: Installerar AEM Code Sync med databasspecifika behörigheter

Kontrollpunkt: AEM Code Sync är nu installerat och har åtkomst till din databas.

Filen fstab.yaml ansluter din GitHub-databas till AEM-redigeringsmiljö för innehållssynkronisering.

1. Navigera till din databas

   • Gå till din nya GitHub-databas
   • Du bör se AEM Forms-mallfilerna

2. Skapa filen fstab.yaml

   • Klicka på Lägg till fil > Skapa ny fil i rotkatalogen
   • Namnge filen fstab.yaml

   
   Figur: Skapar konfigurationsfilen fstab.yaml

3. Lägg till din AEM-anslutningsinformation

   Kopiera och klistra in följande konfiguration och ersätt platshållarna:

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

   Ersätt:

   • <aem-author>: Din URL för AEM as a Cloud Service-författare (t.ex. author-p12345-e67890.adobeaemcloud.com)
   • <owner>: ditt GitHub-användarnamn eller din organisation
   • <repository>: Ditt databasnamn

   Exempel:

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

   
   Bild: Konfigurerar monteringspunkten för AEM-integrering

4. Bekräfta konfigurationen

   • Lägg till ett implementeringsmeddelande: "Add AEM integration configuration"
   • Klicka på Genomför ny fil

   
   Bild: Bekräftar fstab.yaml-konfigurationen

Validering: Bekräfta din GitHub-databasanslutning till AEM.

1. Öppna AEM Sites-konsolen

   • Logga in i din AEM as a Cloud Service-instans
   • Navigera till Webbplatser

   
   Bild: Åtkomst till AEM Sites-konsolen

2. Börja skapa webbplats

   • Klicka på Skapa > Plats från mall

   
   Figur: Skapa en ny webbplats från mallen

3. Välj Edge Delivery Services-mallen

   • Välj mallen Edge Delivery Services Site
   • Klicka på Nästa

   
   Bild: Välja Edge Delivery Services-webbplatsmall

   note note
   NOTE
   Mallen är inte tillgänglig? Om du inte ser Edge Delivery Services-mallen:
   Klicka på Importera för att överföra mallen Hämta mallar från GitHub-versioner

4. Konfigurera din plats

   Ange följande information:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Fält	Värde	Exempel
   Platstitel	Beskrivande namn för webbplatsen	"Mitt Forms-projekt"
   Platsnamn	URL-vänligt namn	"my-forms-project"
   GitHub-URL	Din databas-URL	https://github.com/mycompany/my-forms-project

   
   Bild: Konfigurera din nya AEM-webbplats med GitHub-integrering

5. Slutför webbplatsskapandet

   • Granska dina inställningar
   • Klicka på Skapa

   
   Bild: Bekräfta skapande av webbplats

   Klart! Din AEM-webbplats har nu skapats och är ansluten till GitHub.

6. Öppna i Universal Editor

   • Leta reda på din nya plats i webbplatskonsolen
   • Välj sidan index
   • Klicka på Redigera

   
   Bild: Öppnar webbplatsen för redigering

   Universal Editor öppnas på en ny flik med funktioner för WYSIWYG-redigering.

   
   Bild: Din webbplats har öppnats i Universal Editor för WYSIWYG-redigering

Verifiering: Bekräfta att din AEM-webbplats är klar för formulärredigering.

Med publicering blir din webbplats tillgänglig på Edge Delivery Services för global åtkomst.

1. Snabbpublicering från webbplatskonsolen

   • Återgå till AEM Sites Console
   • Markera dina webbplatssidor (eller markera alla med Ctrl+A)
   • Klicka på Snabbpublicering

   
   Figur: Välja sidor för snabb publicering

2. Bekräfta publicering

   • Klicka på Publicera i bekräftelsedialogrutan

   
   Bild: Bekräfta publiceringsåtgärden

   Alternativ: Du kan även publicera direkt från Universal Editor med knappen Publicera.

   
   Figur: Publicera direkt från Universal Editor

3. Åtkomst till din aktiva webbplats

   Webbplatsen finns nu på:

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

   URL-strukturen förklaras:

   • <branch>: GitHub-gren (vanligen main)
   • <repo>: Ditt databasnamn
   • <owner>: ditt GitHub-användarnamn eller din organisation
   • <site-name>: Ditt AEM-webbplatsnamn

   Exempel:

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

Verifiering: Bekräfta att din webbplats är publicerad på Edge Delivery Services.

Nästa: Skapa ditt första formulär

1. Navigera till ditt lokala projekt

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

2. Hämta nödvändiga filer från AEM Forms-standardmallen

   Kopiera de här filerna från AEM Forms-databasen:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Source	Mål	Syfte
   blocks/form/	blocks/form/	Kärnfunktioner
   scripts/form-editor-support.js	scripts/form-editor-support.js	Integrering med Universal Editor
   scripts/form-editor-support.css	scripts/form-editor-support.css	Redigerarens format

3. Stöd för uppdateringsredigerare

   • Ersätt din /scripts/editor-support.js-fil med editor-support.js från AEM Forms Boilerplate

Verifiering: Bekräfta att formulärblocksfiler finns i ditt projekt.

1. Uppdatera avsnittsmodell

   Öppna /models/_section.json och lägg till formulärkomponenter i filtren:

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

   Vad detta gör: Aktiverar formulärkomponenter i komponentväljaren för Universal Editor.

Verifiering: Bekräfta formulärkomponenter visas i Universell redigerare.

Varför det här steget: Förhindrar lintingfel från formulärspecifika filer och konfigurerar korrekta valideringsregler.

1. Uppdatera .eslintignore

   Lägg till de här raderna i /.eslintignore:

   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. Uppdatera .eslintrc.js

   Lägg till de här reglerna i objektet rules i /.eslintrc.js:

   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' } }

Validering: Bekräfta ESLint fungerar med formulärkomponenter.

1. Installera beroenden och bygg

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

   Vad detta gör:

   • Uppdaterar component-definition.json med formulärkomponenter
   • Skapar component-models.json med formulärmodeller
   • Skapar component-filters.json med filtreringsregler

2. Verifiera genererade filer

   Kontrollera att de här filerna i projektroten innehåller formulärrelaterade objekt:

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

3. Verkställ och skicka ändringar

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

Validering: Bekräfta att ditt projekt innehåller formulärfunktioner.

1. Öppna sidan i Universal Editor

   • Navigera till konsolen Platser i AEM
   • Markera sidan där du vill lägga till ett formulär (t.ex. index)
   • Klicka på Redigera

   Sidan öppnas i Universal Editor för WYSIWYG-redigering.

2. Lägg till komponenten Adaptivt formulär

   • Öppna panelen Innehållsträd (vänster sidospalt)
   • Navigera till ett avsnitt där du vill lägga till formuläret
   • Klicka på ikonen Lägg till (+)
   • Välj Adaptivt formulär i komponentlistan

   
   Bild: Lägga till ett adaptivt formulärblock på sidan

Verifiering: Bekräfta att du har en tom formulärbehållare.

1. Navigera till ditt formulärblock

   • Leta reda på ditt nya adaptiva formuläravsnitt i innehållsträdet

   
   Figur: Adaptivt formulärblock i innehållsträdet

2. Lägg till formulärkomponenter

   Du kan lägga till komponenter på två sätt:

   Metod A: Klicka för att lägga till

   • Klicka på ikonen Lägg till (+) i formuläravsnittet
   • Välj komponenter i listan Adaptiva formulärkomponenter

   Metod B: Dra och släpp

   • Dra komponenter direkt från komponentpanelen till formuläret

   
   Figur: Lägga till komponenter i formuläret

   Rekommenderade startkomponenter:

   • Textindata (för namn, e-post)
   • Textområde (för meddelanden)
   • Skicka-knapp

3. Konfigurera komponentegenskaper

   • Markera en formulärkomponent

   • Använd panelen Egenskaper (höger sidofält) för att konfigurera:

     • Etiketter och platshållare
     • Valideringsregler
     • Obligatoriska fältinställningar

   
   Figur: Konfigurera komponentegenskaper

4. Förhandsgranska formuläret

   Formuläret ser ut ungefär så här:

   
   Figur: Exempelformulär som har skapats med den universella redigeraren

Verifiering: Bekräfta att formuläret är klart för publicering.

1. Publicera från universell redigerare

   • Klicka på knappen Publicera i Universell redigerare

   
   Figur: Publicera formuläret från den universella redigeraren

2. Bekräfta publicering

   • Klicka på Publicera i bekräftelsedialogrutan

   
   Bild: Bekräfta publiceringsåtgärden

   Ett meddelande som bekräftar publiceringen visas.

   
   Figur: Publiceringsbekräftelse lyckades

3. Visa ditt live-formulär

   Ditt formulär finns nu på:

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

   Exempel-URL:

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

   
   Figur: Din publicerade formulärsida på Edge Delivery Services

Grattis! Ditt formulär är nu öppet och kan samla in inskickade svar.

1. Installera AEM CLI

   AEM CLI förenklar lokala utvecklingsuppgifter:

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

2. Klona din databas

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

   Ersätt <owner> och <repo> med dina faktiska GitHub-uppgifter.

3. Starta den lokala utvecklingsservern

   code language-bash
   aem up

   Detta startar en lokal server med funktioner för att ladda upp filer under drift.

4. Gör anpassningar

   • Redigera filer i katalogen blocks/form/ för formulärformat och -beteende
   • Ändra form.css för formatering
   • Uppdatera form.js för beteende

   Se ändringarna direkt i webbläsaren på http://localhost:3000

5. Distribuera dina ändringar

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

   Ändringarna finns på:

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

Problem: Fel vid skapande eller lintingfel

Lösning 1: Hantera lintingfel

Om det uppstår lintingfel:

1. Öppna package.json i projektets rot

2. Hitta skriptet lint:

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

3. Inaktivera linting tillfälligt:

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

4. Verkställ och skicka ändringarna

Lösning 2: Sökvägsfel för modul

Om du ser"Det går inte att matcha sökvägen till modulen '/scripts/lib-franklin.js'":

1. Navigera till blocks/form/form.js

2. Uppdatera importsatsen:

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

Problem: Formuläröverföringar fungerar inte

Lösningar:

• Kontrollera att du har en komponent för Skicka-knapp
• Kontrollera URL-konfiguration för formuläråtgärd
• Verifiera formulärverifieringsregler
• Testa i förhandsgranskningsläge först

Problem: Formateringsproblem

Lösningar:

• Kontrollera CSS-filsökvägar i blocks/form/
• Rensa webbläsarcache
• Verifiera CSS-syntax
• Testa i den lokala utvecklingsmiljön

Problem: Formulärkomponenter visas inte i den universella redigeraren

Lösningar:

• Kontrollera att AEM Code Sync är installerat och körs
• Kontrollera att fstab.yaml har rätt URL för AEM-författare
• Kontrollera att tidig åtkomst är aktiverat för din AEM-instans
• Bekräfta att component-definition.json innehåller formulärkomponenter

Problem: Ändringar som inte visas efter publicering

Lösningar:

• Vänta på CDN-cacheuppdatering
• Kontrollera webbläsarens cacheminne (prova incognito/private mode)
• Kontrollera att rätt URL-format används