Aan de slag - Zelfstudie voor ontwikkelaars

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. Het scherm van de nieuwe repository wordt geopend.

   

3. Voor creeer een nieuw bewaarplaatsscherm, selecteer de eigenaar, en specificeer Naam van de Bewaarplaats. Adobe adviseert dat de bewaarplaats aan Openbaar wordt geplaatst. 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. Voor het Install scherm van de Synchronisatie van de Code van AEM, selecteer slechts de optie van Bewaarplaatsen en selecteer uw pas gecreëerde bewaarplaats. Klik op Opslaan.

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

• <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.

Als de naam van de vertakking bijvoorbeeld main is, de opslagplaats wefinance is en de eigenaar wkndforms is, wordt de website uitgevoerd op https://main--wefinance--wkndforms.aem.page
<!—(https://main—wefinance—wkndform.aem.page)—>

Maak een nieuwe map die speciaal voor uw AEM-inhoud is bestemd in Google Drive of Microsoft SharePoint. In dit document wordt een map gebruikt die op Microsoft SharePoint is gemaakt.

Deel de map met de Adobe Experience Manager-gebruiker (forms@adobe.com).

Zorg ervoor dat u bewerkingsrechten voor de map hebt opgegeven aan de Adobe Experience Manager-gebruiker.

{width="50%"}

{width="50%"}

Kopieer de voorbeeldinhoudaan uw omslag. Kopiëren:

1. Pak de gedownloade map uit en kopieer de inhoud.

   

   De bestanden nav en footer definiëren de basislay-out van uw pagina's en veranderen zelden in een project. Ze hebben ook een specifieke structuur die afwijkt van de meeste andere inhoudsbestanden. Door deze bestanden te bekijken, krijgt u een idee hoe de inhoud in AEM Projecten wordt georganiseerd.

2. Upload deze bestanden naar de map Microsoft SharePoint of Google Drive.

   

   Kopieer het enquiry -blad van de voorbeeldinhoud naar de map op Google Drive of Microsoft SharePoint. Deze bevat een structuur voor een voorbeeldformulier.

Nu u uw opstelling van de inhoudsomslag hebt, is het tijd om het met uw project op GitHub te verbinden die u eerder gebruikend AEM Forms Boilerplate creeerde. Verbinding maken:

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

2. Open de fstab.yaml voor bewerking.

3. Vervang de bestaande verwijzing door het pad naar de map die u met de AEM-gebruiker hebt gedeeld (forms@adobe.com).

   

   Als u de Microsoft SharePoint gebruikt, gebruikt het mappad de volgende notatie:

   code language-html
   https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

   Bijvoorbeeld:

   code language-html
   https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

   Voor meer informatie bij het beheren van dossiers met Microsoft SharePoint, zie hoe te Adobe SharePointgebruiken.

4. Leg het bijgewerkte fsatb.yaml -bestand vast nadat u de verwijzing hebt bijgewerkt en alles er goed uitziet. Als u om het even welke bouwstijlkwesties ontmoet, zie het oplossen van problemen GitHub bouwt kwesties.

   vast

   Hiermee verbindt u de inhoudsmap met uw website. Na het bijwerken van de verwijzing kunnen fouten met "404 Niet gevonden" aanvankelijk optreden. Dit komt omdat er nog geen voorvertoning van uw inhoud is weergegeven. In de volgende sectie wordt uitgelegd hoe u begint met het ontwerpen en voorvertonen van uw inhoud.

Installeer de uitbreiding van Chrome genoemd AEM Sidekick.

Nadat u de extensie hebt geïnstalleerd op Chrome, vergeet dan niet de extensie vast te zetten, zodat u deze gemakkelijker kunt vinden.

Als u de extensie Sidekick Chrome wilt instellen, gaat u naar de map Google Drive of Microsoft SharePoint die u eerder hebt gedeeld, klikt u met de rechtermuisknop op het extensiepictogram op de browserwerkbalk en selecteert u Add this project .

toe

Wanneer de extensie is geïnstalleerd en uw project is toegevoegd, kunt u een voorvertoning van uw inhoud weergeven en deze publiceren vanaf uw Google Drive.

Selecteer alle documenten in de map Microsoft SharePoint of Google Drive. U kunt meerdere documenten kiezen door de Ctrl-toets (Windows/Linux) of de Cmd-toets (Mac) ingedrukt te houden terwijl u klikt.

Klik op het AEM Sidekick-pictogram op de Chrome-uitbreidingsbalk. Er verschijnt een werkbalk op het scherm. U kunt uw inhoud voorvertonen of publiceren.

Als u de bestanden index , nav , footer en enquiry hebt gekopieerd, zijn al deze documenten afzonderlijke documenten met hun eigen voorvertoning- en publicatiecycli. Zorg er dus voor dat u een voorvertoning weergeeft (en publiceert) van al deze documenten.

Nadat u de bestanden hebt voorvertoond, worden de documenten weergegeven op de tabbladen van de nieuwe browser. Ga naar de volgende URL om een voorbeeld van het voorbeeldformulier te bekijken:

https://<branch>--<repository>--<owner>.aem.live

• <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.

https://<branch>--<repo>--<owner>.aem.page/enquiry URL.

Als de gegevensopslagruimte van uw project bijvoorbeeld 'wefinance' heet, bevindt deze zich onder de eigenaar van de account 'wkndform' en gebruikt u de 'main'-vertakking en formuliernaam als enquiry , is de URL: https://main--wefinance--wkndform.aem.live/enquiry .
<!—(https://main—wefinance—wkndform.aem.live/inquiry).—>

Installeer de AEM CLI: de AEM CLI vereenvoudigt ontwikkelingstaken. Laten we het wereldwijd installeren met npm:

    npm install -g @adobe/aem-cli

Kloon uw project GitHub: Kloon uw projectbewaarplaats 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>

Start uw lokale omgeving: navigeer naar uw projectmap en vul uw lokale AEM-instantie op met één opdracht:

cd <repo>
aem up

Navigeer naar de map AEM Project repository op uw lokale systeem.

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

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

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

Navigeer naar /models/_section.json in uw AEM-project en voeg "form" en "embed-adaptive-form" toe aan de componentarray van het filters -object:

    "filters": [
    {
  "id": "section",
  "components": [
    .
    .
    .
    "form",
    "embed-adaptive-form"
  ]
 }]

(Optioneel) Navigeer naar /.eslintignore in uw AEM-project en voeg onderliggende coderegels toe:

blocks/form/rules/formula/*
blocks/form/rules/model/*
blocks/form/rules/functions.js
scripts/editor-support.js
scripts/editor-support-rte.js

(Optioneel) Navigeer naar /.eslintrc.js in uw AEM-project en voeg onderliggende coderegels toe in het rules -object:

'xwalk/max-cells': ['error', {
  '*': 4, // default limit for all models
  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,
}],
'xwalk/no-orphan-collapsible-fields': 'off', // Disable until enhancement is done for Forms properties

Open de terminal en voer de onderstaande opdrachten uit:

npm i
npm run build:json

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