Komma igång - självstudiekurs för utvecklare

Skapa en GitHub-databas för ditt AEM-projekt. Så här skapar du databas:

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

   

2. Klicka på alternativet Använd den här mallen och välj alternativet Skapa en ny databas. Skärmen Skapa en ny databas öppnas.

   

3. Välj owner och ange Databasnamn på skärmen Skapa en ny databas. Adobe rekommenderar att databasen är inställd på Offentlig. Välj därför alternativet public och klicka på Skapa databas.

Installera AEM Code Sync GitHub App i din databas. Installera:

1. Gå till https://github.com/apps/aem-code-sync/installations/new.
2. På skärmen Installera AEM Code Sync väljer du alternativet Only select Repositories och väljer din nya databas. Klicka på Spara.

Grattis! Du har en ny webbplats som körs på https://<branch>--<repo>--<owner>.aem.page/.

• <branch> refererar till din GitHub-databas.
• <repository> betecknar din GitHub-databas.
• <owner> refererar till användarnamnet för ditt GitHub-konto som är värd för din GitHub-databas.

Om filialnamnet till exempel är main, databasen är wefinance och ägaren är wkndforms, kommer webbplatsen att vara igång på https://main--wefinance--wkndforms.aem.page
<!—(https://main—weFinance—wkndform.aem.page)—>

Skapa en ny mapp specifikt för ditt AEM-innehåll i Google Drive eller Microsoft SharePoint. I det här dokumentet används en mapp som har skapats i Microsoft SharePoint.

Dela mappen med Adobe Experience Manager-användaren (forms@adobe.com).

Se till att du har gett Adobe Experience Manager-användaren redigeringsbehörighet för mappen.

{width="50%"}

{width="50%"}

Kopiera exempelinnehållet till din mapp. Kopiera:

1. Zippa upp den hämtade mappen och kopiera innehållet.

   

   Filerna nav och footer definierar den grundläggande layouten för dina sidor och ändras sällan i ett projekt. De har också en särskild struktur som skiljer sig från de flesta andra innehållsfiler. Genom att undersöka dessa filer får du en känsla för hur innehållet är organiserat i AEM Projects.

2. Överför dessa filer till Microsoft SharePoint eller Google Drive-mappen.

   

   Kontrollera att du kopierar bladet enquiry från exempelinnehållet till din mapp på Google Drive eller Microsoft SharePoint. Den innehåller en struktur för ett exempelformulär.

Nu när du har konfigurerat innehållsmappen är det dags att länka den till ditt projekt på GitHub som du skapade med AEM Forms Boilerplate tidigare. Ansluta:

1. Gå till GitHub-databasen som du skapade tidigare med AEM Forms Boilerplate.

2. Lägg till filen fstab.yaml i rotmappen.

3. Lägg till referensen med sökvägen till mappen som du delade med AEM-användaren (forms@adobe.com).

   

   Om du använder Microsoft SharePoint har mappsökvägen följande format:

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

   Exempel:

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

   Mer information om hur du hanterar filer med Microsoft SharePoint finns i Använda Adobe SharePoint.

4. Genomför filen fsatb.yaml när du har lagt till referensen så ser allting bra ut. Om du stöter på några byggproblem kan du läsa Felsökning av GitHub-byggproblem.

   

   Detta kopplar innehållsmappen till webbplatsen. När du har uppdaterat referensen kan felet"404 Hittades inte" uppstå från början. Det beror på att ditt innehåll inte har förhandsvisats än. I nästa avsnitt beskrivs hur du börjar redigera och förhandsgranska ditt innehåll.

Installera Chrome-tillägget AEM Sidekick.

När du har installerat tillägget på Chrome, glöm inte att fästa det, blir det enklare att hitta det.

Om du vill konfigurera Sidekick Chrome-tillägget går du till den tidigare delade Google Drive- eller Microsoft SharePoint-mappen och högerklickar på tilläggsikonen i webbläsarens verktygsfält och väljer Add this project.

När tillägget är installerat och ditt projekt har lagts till kan du förhandsgranska och publicera ditt innehåll från Google Drive.

Markera alla dokument i Microsoft SharePoint- eller Google Drive-mappen. Du kan välja flera dokument genom att hålla ned Ctrl-tangenten (Windows/Linux) eller Cmd-tangenten (Mac) medan du klickar.

Klicka på AEM Sidekick-ikonen som är fäst i ditt tilläggsfält för Chrome. Ett verktygsfält visas på skärmen. Du kan välja att förhandsgranska eller publicera ditt innehåll.

Om du kopierade över index-, nav-, footer- och enquiry-filer är alla dessa separata dokument med sina egna förhandsgransknings- och publiceringscykler, så se till att du förhandsgranskar (och publicerar) alla dem.

När du förhandsgranskar filerna visas dokumenten på de nya webbläsarflikarna. Om du vill förhandsgranska exempelformuläret går du till följande URL:

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

• <branch> refererar till din GitHub-databas.
• <repository> betecknar din GitHub-databas.
• <owner> refererar till användarnamnet för ditt GitHub-konto som är värd för din GitHub-databas.

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

Om projektets databas till exempel heter "weFinance", finns den under kontoägaren "wkndform" och du använder huvudgrenen och formulärnamnet enquiry, är URL https://main--wefinance--wkndform.aem.live/enquiry.
<!—(https://main—weFinance—wkndform.aem.live/inquiry).—>

Installera AEM CLI: AEM CLI förenklar utvecklingsuppgifter. Låt oss installera det globalt med npm:

    npm install -g @adobe/aem-cli

Klona ditt GitHub-projekt: Klona din projektdatabas från GitHub med följande kommando och ersätt <owner> med databasägaren och <repo> med databasnamnet:

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

Starta din lokala miljö: Navigera till din projektkatalog och starta den lokala AEM-instansen med ett enda kommando:

cd <repo>
aem up

Navigera till AEM Project-databasmappen på din lokala dator.

Kopiera och klistra in följande mappar och filer från AEM Forms-originalet i ditt AEM-projekt:

• Mappen formulärblock
• filen form-editor-support.js
• form-editor-support.css fil

Navigera till filen /scripts/editor-support.js i ditt AEM-projekt och uppdatera den med filen editor-support.js i AEM Forms-mallen

Navigera till /models/_section.json i ditt AEM-projekt och lägg till"form" och"embed-adaptive-form" i komponentarrayen för objektet filters:

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

(Valfritt) Navigera till /.eslintignore i ditt AEM-projekt och lägg till nedanför kodraderna:

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

(Valfritt) Navigera till /.eslintrc.js i ditt AEM-projekt och lägg till nedanför kodraderna i objektet rules:

'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

Öppna terminalen och kör kommandona nedan:

npm i
npm run build:json

Genomför och skicka dessa ändringar till AEM Project-databasen på GitHub.