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

Creeer een bewaarplaats GitHub voor uw Project van AEM. Opslagplaats maken:

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

   

2. Klik het Gebruik deze malplaatje optie en selecteer creeer een nieuwe bewaarplaats optie.

   

   creeer een nieuwe bewaarplaats scherm opent.

3. Op creeer een nieuwe bewaarplaats scherm, selecteer de eigenaar, en specificeer Naam van de Bewaarplaats. Adobe adviseert om de bewaarplaats aan Openbaar te plaatsen. Zo, selecteer de openbare optie, en klik creeer Bewaarplaats.

   

Installeer de AEM Code Sync GitHub App in uw repository. Installeren:

1. Ga naar https://github.com/apps/aem-code-sync/installations/new.
2. Op installeer het scherm van de Synchronisatie van de Code van AEM, selecteer slechts de optie van Bewaarplaatsen en selecteer uw pas gecreëerde bewaarplaats. Klik sparen.

Koppel nu de GitHub-opslagplaats die u met AEM Forms Boilerplate hebt gemaakt aan uw AEM Project-ontwerpomgeving. Verbinding maken:

1. Ga naar de bewaarplaats GitHub die u eerder gebruikend AEM Forms Boilerplate creeerde.

2. Open het {dossier 0} fstab.yaml voor het uitgeven.

   

3. Bewerk het {dossier 0} fstab.yaml om het koppelingspunt van uw project bij te werken. Vervang de URL door de URL van de AEM as a Cloud Service-ontwerpinstantie.

   https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   

4. Leg het bijgewerkte {dossier 0} fstab.yaml vast, zodra u de verwijzing hebt bijgewerkt en alles ziet er goed uit.

   

   Als u om het even welke bouwstijlkwesties ontmoet, zie het oplossen van problemen GitHub bouwt kwesties.

Een nieuw AEM-project maken:

1. Login aan de auteursinstantie van AEM as a Cloud Service en selecteert Plaatsen.

   

2. Klik creëren > Plaats van malplaatje.

   

3. Selecteer het malplaatje van de Plaats van Edge Delivery Services en klik daarna.

   

   note note
   NOTE
   Als de Edge Delivery Services Site-sjabloon niet beschikbaar is in uw ontwerpexemplaar, klikt u op de knop Importeren om de sjabloon te uploaden. U kunt de malplaatjes van de Plaats van Edge Delivery Services van GitHubdownloaden.

4. Voer de volgende gegevens in om een nieuw AEM-project te maken:

   • titel van de Plaats - voeg een beschrijvende titel voor de plaats toe.
   • titel van de Plaats - gebruik site-name dat u in de vorige stap bepaalde.
   • GitHub URL - gebruik URL van het project GitHub u in de vorige stap creeerde.

   

5. creeer de dialoog van de Plaats verschijnt, klik Oke.

   

   Binnen een paar minuten wordt je nieuwe AEM Project gemaakt.

6. Navigeer aan uw onlangs-gecreeerd project van AEM in de console van Plaatsen en klik uitgeven.
   In dit geval wordt de pagina index.html gebruikt ter illustratie.

   

   Het AEM-project wordt op een nieuw tabblad in de Universal Editor geopend, zodat u WYSIWYG kunt ontwerpen. U kunt nu uw AEM-project bewerken.

   

Uw gemaakte AEM-project publiceren

Publiceer het AEM-project als u klaar bent met het bewerken. Publiceren:

1. Voor de console van Plaatsen, selecteer alle pagina's van het Project van AEM en klik Snel publiceren.

   

2. Het Snelle publiceer bevestigingsdialoog verschijnt, publiceert om het het publiceren proces te beginnen.

   

   U kunt uw AEM-projectpagina's ook rechtstreeks vanuit de gebruikersinterface van de Universal Editor publiceren.

   

Gefeliciteerd! Er wordt een nieuwe website uitgevoerd op https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/ .

• <branch> verwijst naar de vertakking van uw bewaarplaats GitHub.
• <repository> geeft uw GitHub-opslagplaats aan.
• <owner> verwijst naar gebruikersbenaming van uw rekening GitHub die gastheren uw bewaarplaats GitHub.
• <site-name> verwijst naar de naam van de door u gemaakte site.

Als de naam van de vertakking bijvoorbeeld main is, de opslagplaats edsforms is, de eigenaar wkndforms is en site-name is eds-forms , wordt de website uitgevoerd op https://main--edsforms--wkndforms.aem.page/content/eds-forms/

voegt vereiste dossiers en omslagen toe

1. Kopieer en kleef de volgende omslagen en de dossiers van AEM Forms Boilerplatein uw Project van AEM:

   • van het vormblokomslag
   • vorm-gemeenschappelijkeomslag
   • vorm-componentenomslag
   • vorm-redacteur-support.jsdossier
   • vorm-redacteur-support.cssdossier

de componentendefinities en modeldossiers van de Update

1. Navigeer naar het ../models/_component-definition.json dossier in uw Project van AEM en werk het met de veranderingen van het _component-definition.json- dossier in de Boilerplate van AEM Formsbij.

2. Navigeer naar het ../models/_component-models.json dossier in uw Project van AEM en werk het met de veranderingen van het _component-models.json dossier in de Boilerplate van AEM Forms bij

voeg de Redacteur van de Vorm in redacteursmanuscript toe

1. Navigeer aan het ../scripts/editor-support.js dossier in uw Project van AEM en werk het met de veranderingen van het { redacteur-support.js- dossier in AEM Forms Boilerplatebij

update ESLint configuratiedossier

1. Navigeer naar het ../.eslintignore -bestand in uw AEM-project en voeg de volgende coderegel toe om fouten met betrekking tot de regelengine voor formulierblokken te voorkomen:

   code language-none
   blocks/form/rules/formula/* blocks/form/rules/model/*

Leg deze wijzigingen vast en duw deze naar uw AEM Project-opslagplaats op GitHub.

Voeg de sectie Adaptief formulier toe aan uw AEM-projectpagina. Toevoegen:

1. Navigeer aan uw project van AEM in de console van Plaatsen, selecteer de plaatspagina u wilt uitgeven, en klik uitgeven. De AEM-projectpagina wordt geopend in de Universal Editor en kan worden bewerkt.
   In dit geval wordt de pagina index.html gebruikt ter illustratie.
2. Open de Inhoudsstructuur en navigeer naar een sectie waar u de sectie Aangepast formulier wilt toevoegen.
3. Klik op het pictogram Add en selecteer de component Adaptive Form in de lijst met componenten.

De sectie Adaptief formulier wordt toegevoegd. U kunt nu formuliercomponenten toevoegen aan de AEM-projectpagina.

Voeg formuliercomponenten toe aan de toegevoegde sectie Adaptief formulier. Formuliercomponenten toevoegen:

1. Navigeer naar de toegevoegde sectie Adaptief formulier in de Inhoudsstructuur.

   

2. Klik het Add pictogram en voeg de gewenste componenten van de Adaptieve lijst van Componenten van de Vorm toe.

   toe

   U kunt ook de vereiste Adaptieve Forms-componenten slepen en neerzetten, aangezien de Universal Editor een intuïtieve functie voor slepen en neerzetten biedt.

3. Selecteer de toegevoegde component Adaptief formulier om de eigenschappen van de component bij te werken met Properties .

   

4. Bekijk een voorbeeld van het formulier.
   In de onderstaande schermafbeelding wordt het formulier weergegeven dat in het AEM Project is gemaakt en dat gebruikmaakt van WYSIWYG-authoring:

   

   Als de gebruiker tevreden is met de voorvertoning, kan hij doorgaan met het publiceren van de pagina.

   note note
   NOTE
   Het is belangrijk dat u de AEM Project-pagina opnieuw publiceert nadat u wijzigingen hebt aangebracht. Als dit niet het geval is, zijn de updates niet zichtbaar in de browser.

Publiceer de AEM-projectpagina opnieuw.

1. Klik publiceren om de pagina van het Project van AEM na het toevoegen van de vorm opnieuw te publiceren.

   

2. De publiceer bevestigingsdialoog verschijnt op het scherm, publiceert om te beginnen publiceren.

   

   Zodra u klikt publiceer knoop, verschijnt het Publish started successfully bericht.

   

U kunt nu de AEM-projectpagina met het toegevoegde Edge Delivery Services-formulier bekijken op de volgende URL:
https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/.

Als de naam van de vertakking bijvoorbeeld main is, de opslagplaats edsforms is, de eigenaar wkndforms is en de naam van de site eds-forms is, is de URL:
https://main--edsforms--wkndforms.aem.page/content/eds-forms/

installeer CLI van AEM: AEM CLI vereenvoudigt ontwikkelingstaken. Laten we het wereldwijd installeren met npm:

    npm install -g @adobe/aem-cli

Kloon uw project GitHub: Kloon uw plaats van het Project van AEM van GitHub gebruikend het volgende bevel, die vervangt <owner> met de eigenaar van de opslagplaats en <repo> met de naam van de opslagplaats:

git clone https://github.com/<owner>/<repo>

Begin Uw Lokaal Milieu: Navigeer aan uw projectfolder en begin uw lokale instantie van AEM met één enkel bevel:

cd <repo>
aem up