Aan de slag met Edge Delivery Services for AEM Forms met de Universal Editor

1. heb toegang tot het malplaatje van AEM Forms Boilerplate

   • Ga naar https://github.com/adobe-rnd/aem-boilerplate-forms

   
   Cijfer: AEM Forms Boilerplate bewaarplaats met vooraf gevormd Adaptief Blok van Forms

2. creeer uw bewaarplaats

   • Klik Gebruik dit malplaatje > creeer een nieuwe bewaarplaats

   
   Cijfer: Gebruikend het malplaatje om een nieuwe bewaarplaats tot stand te brengen

3. vorm bewaarplaats montages

   • Eigenaar: Selecteer uw rekening GitHub of organisatie
   • Naam van de Bewaarplaats: Kies een beschrijvende naam (b.v., my-forms-project)
   • Zichtbaarheid: Selecteer Openbaar (geadviseerd voor Edge Delivery Services)
   • Klik creeer Bewaarplaats

   
   Cijfer: Het vormen van uw nieuwe bewaarplaats met openbaar zicht

Bevestiging: bevestig u een nieuwe bewaarplaats GitHub hebt die op het malplaatje van AEM Forms wordt gebaseerd Boilerplate.

Met AEM Code Sync worden wijzigingen in de inhoud automatisch gesynchroniseerd tussen uw AEM-ontwerpomgeving en uw GitHub-opslagplaats.

1. installeer de App GitHub

   • Ga naar https://github.com/apps/aem-code-sync/installations/new

2. vorm toegangstoestemmingen

   • Selecteer slechts uitgezochte bewaarplaatsen
   • Kies uw nieuwe opslagplaats
   • Klik sparen

   
   Cijfer: Het installeren van de Synchronisatie van de Code van AEM met bewaarplaats-specifieke toestemmingen

Controlepunt: de Synchronisatie van de Code van AEM is nu geïnstalleerd en heeft toegang tot uw bewaarplaats.

Het bestand fstab.yaml verbindt de GitHub-opslagplaats met de AEM-ontwerpomgeving voor inhoudssynchronisatie.

1. navigeer aan uw bewaarplaats

   • Ga naar uw nieuwe GitHub-opslagplaats
   • De AEM Forms Boilerplate-bestanden worden weergegeven

2. creeer het fstab.yaml- dossier

   • Klik voeg dossier toe > creeer nieuw dossier in de wortelfolder
   • Geef het bestand een naam fstab.yaml

   
   Cijfer: Creërend het fstab.yaml configuratiedossier

3. voeg uw de verbindingsdetails van AEM toe

   Kopieer en plak de volgende configuratie, waarbij u de plaatsaanduidingen vervangt:

   code language-yaml
   mountpoints: /: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   vervang:

   • <aem-author>: De URL van uw AEM as a Cloud Service-auteur (bijvoorbeeld author-p12345-e67890.adobeaemcloud.com )
   • <owner>: Uw GitHub-gebruikersnaam of -organisatie
   • <repository>: De naam van uw gegevensopslagruimte

   Voorbeeld:

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

   
   Cijfer: Het vormen van het bergpunt voor de integratie van AEM

4. zet de configuratie vast

   • Voeg een commit message toe: "Add AEM integration configuration"
   • Klik nieuw dossier vastleggen

   
   Cijfer: Het vastmaken van de configuratie fstab.yaml

Bevestig Bevestiging: bevestig uw verbinding van de bewaarplaats GitHub aan AEM.

<div class="extension note">
<div>NOTE</div>
<div>
<p>Hebt u problemen opgebouwd? Zie <a href="#troubleshooting-github-build-issues"> het oplossen van problemen GitHub bouwt kwesties </a>.</p>
</div>
</div>

1. heb toegang tot de console van AEM Sites

   • Aanmelden bij uw AEM as a Cloud Service-ontwerpinstantie
   • Ga aan Plaatsen

   
   Cijfer: Toegang tot de console van AEM Sites

2. de plaatsverwezenlijking van het Begin

   • Klik creëren > Plaats van malplaatje

   
   Cijfer: Creërend een nieuwe plaats van malplaatje

3. selecteer het malplaatje van Edge Delivery Services

   • Kies het malplaatje van de Plaats van Edge Delivery Services
   • Klik daarna

   
   Cijfer: Het selecteren van het de plaatsmalplaatje van Edge Delivery Services

   note note
   NOTE
   niet beschikbaar Malplaatje? Als de Edge Delivery Services-sjabloon niet wordt weergegeven:
   Klik Invoer om het malplaatje te uploaden De malplaatjes van de download van versies GitHub

4. vorm uw plaats

   Voer de volgende gegevens in:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Veld	Waarde	Voorbeeld
   Titel van de Plaats	Beschrijvende naam voor site	"Mijn Forms-project"
   Naam van de Plaats	URL-vriendelijke naam	"my-forms-project"
   GitHub URL	URL van opslagplaats	https://github.com/mycompany/my-forms-project

   
   Cijfer: Het vormen van uw nieuwe plaats van AEM met integratie GitHub

5. Volledige plaatsverwezenlijking

   • Uw instellingen controleren
   • Klik creëren

   
   Cijfer: Bevestigend plaatsverwezenlijking

   Succes! Uw AEM-site wordt nu gemaakt en verbonden met GitHub.

6. Open in Universele Redacteur

   • Zoek in de Sites-console uw nieuwe site
   • Selecteer de pagina index
   • Klik uitgeven

   uit
   Cijfer: Het openen van uw plaats voor het uitgeven

   De Universal Editor wordt op een nieuw tabblad geopend en biedt mogelijkheden voor het schrijven van WYSIWYG.

   
   Figuur: Uw plaats die in Universele Redacteur voor WYSIWYG wordt geopend die uitgeeft

Bevestiging: bevestig uw plaats van AEM klaar voor vorm creatie is.

Door te publiceren maakt u uw site beschikbaar op Edge Delivery Services voor wereldwijde toegang.

1. Snel publiceren van de console van Plaatsen

   • Terug naar de AEM Sites-console
   • Selecteer uw sitepagina's (of selecteer alles met Ctrl+A)
   • Klik Snel publiceren

   
   Figuur: Het selecteren van pagina's voor snel publiceert

2. Bevestig het publiceren

   • In de bevestigingsdialoog, klik publiceren

   
   Cijfer: Bevestigend publiceer actie

   Alternatief: u kunt direct van Universele Redacteur ook publiceren gebruikend publiceren knoop.

   
   Cijfer: Het publiceren direct van Universele Redacteur

3. toegang tot uw levende plaats

   Uw site is nu live op:

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

   Verklaarde Structuur URL:

   • <branch>: GitHub-vertakking (gewoonlijk main)
   • <repo>: De naam van uw gegevensopslagruimte
   • <owner>: Uw GitHub-gebruikersnaam of -organisatie
   • <site-name>: De naam van uw AEM-site

   Voorbeeld:

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

Bevestiging: bevestig uw plaats op Edge Delivery Services levend is.

daarna: creeer uw eerste vorm

1. navigeer aan uw lokaal project

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

2. Download vereiste dossiers van AEM Forms Boilerplate

   Kopieer deze dossiers van de bewaarplaats van AEM Forms Boilerplate:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Source	Doel	Doel
   blocks/form/	blocks/form/	Functionaliteit van kernformulieren
   scripts/form-editor-support.js	scripts/form-editor-support.js	Integratie van Universal Editor
   scripts/form-editor-support.css	scripts/form-editor-support.css	Editor-opmaak

3. de redacteurssteun van de Update

   • Vervang uw /scripts/editor-support.js dossier met redacteur-support.js van AEM Forms Boilerplate

Bevestig Bevestiging: bevestig de dossiers van het vormblok in uw project zijn.

1. het sectiemodel van de Update

   Open /models/_section.json en voeg formuliercomponenten aan de filters toe:

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

   wat dit doet: laat vormcomponenten in de Universele de componentenplukker van de Redacteur toe.

Bevestig Bevestiging: bevestig vormcomponenten verschijnen in Universele Redacteur.

waarom deze stap: verhindert het verbinden fouten van vorm-specifieke dossiers en vormt juiste bevestigingsregels.

1. Update.eslintignore

   Voeg deze regels toe aan /.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. Update.eslintrc.js

   Voeg de volgende regels toe aan het rules -object in /.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' } }

Bevestiging: bevestig werken ESLint met vormcomponenten.

1. installeer gebiedsdelen en bouwt

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

   wat dit doet:

   • Updates component-definition.json uitvoeren met formuliercomponenten
   • Genereert component-models.json met formuliermodellen
   • Creeert component-filters.json met het filtreren regels

2. verifieer geproduceerde dossiers

   Controleer of deze bestanden in de hoofdmap van het project formuliergerelateerde objecten bevatten:

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

3. verbind en duw veranderingen

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

Bevestiging: bevestig uw project vormmogelijkheden omvat.

1. open uw pagina in Universele Redacteur

   • Navigeer aan de Sites console in AEM
   • Selecteer de pagina waaraan u een formulier wilt toevoegen (bijvoorbeeld index)
   • Klik uitgeven

   De pagina wordt geopend in de Universal Editor voor bewerking in WYSIWYG.

2. voeg de Adaptieve component van de Vorm toe

   • Open het paneel van de Boom van de Inhoud (linkerzijbalk)
   • Ga naar een sectie waar u het formulier wilt toevoegen
   • Klik toevoegen (+) pictogram
   • Selecteer Aangepaste Vorm van de componentenlijst

   
   Cijfer: Het toevoegen van een Aangepast blok van de Vorm aan uw pagina

Bevestiging: bevestig u een lege vormcontainer hebt.

1. ga aan uw vormblok

   • Zoek in de inhoudsstructuur de sectie Adaptief formulier die u zojuist hebt toegevoegd

   
   Cijfer: Het adaptieve blok van de Vorm in de inhoudsboom

2. voeg vormcomponenten toe

   U kunt componenten op twee manieren toevoegen:

   Methode A: Klik om toe te voegen

   • Klik toevoegen (+) pictogram in uw vormsectie
   • Selecteer componenten van de Adaptieve lijst van Componenten van de Vorm

   Methode B: Sleep en Daling

   • Componenten rechtstreeks van het deelvenster Componenten naar het formulier slepen

   
   Cijfer: Het toevoegen van componenten aan uw vorm

   geadviseerde startercomponenten:

   • Tekstinvoer (voor naam, e-mail)
   • Tekstgebied (voor berichten)
   • Verzendknop

3. vorm componenteneigenschappen

   • Een formuliercomponent selecteren

   • Gebruik het paneel van Eigenschappen (juiste sidebar) om te vormen:

     • Labels en plaatsaanduidingen
     • Validatieregels
     • Vereiste veldinstellingen

   
   Cijfer: Het vormen componenteneigenschappen

4. Voorproef uw vorm

   Uw formulier ziet er ongeveer als volgt uit:

   
   Cijfer: De vorm van het voorbeeld die met Universele Redacteur wordt gecreeerd

Bevestiging: bevestig uw vorm klaar voor het publiceren is.

1. publiceer van Universele Redacteur

   • Klik publiceren knoop in Universele Redacteur

   
   Cijfer: Het publiceren van uw vorm van Universele Redacteur

2. Bevestig het publiceren

   • In de bevestigingsdialoog, klik publiceren

   
   Cijfer: Bevestigend publiceer actie

   U ziet een succesbericht waarin de publicatie wordt bevestigd.

   
   Cijfer: Succesvolle publicatiebevestiging

3. Mening uw levende vorm

   Uw formulier is nu live op:

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

   Voorbeeld URL:

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

   
   Cijfer: Uw gepubliceerde vormpagina op Edge Delivery Services

Gefeliciteerd! Uw formulier is nu live en klaar om opmerkingen te verzamelen.

1. installeer AEM CLI

   De AEM CLI vereenvoudigt lokale ontwikkelingstaken:

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

2. Kloon uw bewaarplaats

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

   Vervang <owner> en <repo> door de werkelijke GitHub-gegevens.

3. Begin de lokale ontwikkelingsserver

   code language-bash
   aem up

   Hiermee start u een lokale server met hot-reload-mogelijkheden.

4. maak aanpassingen

   • Bestanden in de map blocks/form/ bewerken voor formulieropmaak en -gedrag
   • Wijzigen form.css voor opmaak
   • form.js bijwerken voor gedrag

   zie onmiddellijk veranderingen in uw browser bij http://localhost:3000

5. stel uw veranderingen op

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

   Uw wijzigingen zijn beschikbaar op:

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

Probleem: bouwt mislukkingen of het verbinden fouten

Oplossing 1: De Fouten van de handvat het Linting

Als er verbindingsfouten optreden:

1. package.json openen in de hoofdmap van het project

2. Zoek het script lint :

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

3. Koppeling tijdelijk uitschakelen:

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

4. De wijzigingen vastleggen en duwen

Oplossing 2: De Fouten van de Weg van de module

Als u "Kan pad naar module '/scripts/lib-franklin.js' niet omzetten:

1. Navigeren naar blocks/form/form.js

2. De instructie import bijwerken:

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

Probleem: de inzendingen van de vorm werken niet

Oplossingen:

• Controleer of u een verzendknopcomponent hebt
• URL-configuratie van formulieractie controleren
• Formuliervalidatieregels controleren
• Testen in voorvertoningsmodus eerst

Probleem: het stileren kwesties

Oplossingen:

• CSS-bestandspaden controleren in blocks/form/
• Browser-cache wissen
• CSS-syntaxis verifiëren
• Testen in de lokale ontwikkelomgeving

Probleem: de componenten van de Vorm verschijnen niet in Universele Redacteur

Oplossingen:

• Controleren of AEM Code Sync is geïnstalleerd en uitgevoerd
• Controleer of fstab.yaml de juiste URL van de AEM-auteur heeft
• Zorg ervoor dat uw AEM-instantie vroege toegang heeft ingeschakeld
• component-definition.json bevestigen bevat formuliercomponenten

Probleem: Veranderingen niet zichtbaar na het publiceren

Oplossingen:

• Wacht op CDN-cache vernieuwen
• Browser cache controleren (modus Incognito/Private proberen)
• Controleren of de juiste URL-indeling wordt gebruikt