DokumentationAEM as a Cloud ServiceAnvändarhandbok

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

Last update: Mon Sep 09 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Administratör
  • Utvecklare

I dagens digitala samhälle är det viktigt för alla företag att skapa användarvänliga formulär. Med Edge Delivery Services för AEM Forms (EDS) kan du skapa formulär med välbekanta verktyg som Google Docs och Microsoft Office.

Dessa formulär skickar data direkt till en Microsoft Excel- eller Google Sheets-fil, vilket gör att du kan använda aktiva ekosystem och stabila API:er för Google Sheets, Microsoft Excel och Microsoft SharePoint för att enkelt bearbeta inlämnade data eller starta ett befintligt arbetsflöde.

AEM Forms har ett block, Adaptive Forms Block, som gör det enkelt att skapa formulär för att hämta in och lagra inhämtade data. Du kan skapa ett nytt AEM projekt förkonfigurerat med adaptivt Forms-block eller lägga till det adaptiva Forms-blocket i ett befintligt AEM -projekt.

Den här AEM Forms-självstudiekursen guidar dig genom att skapa, förhandsgranska och publicera egna anpassade formulär med ett nytt Adobe Experience Manager (AEM) Forms-projekt.

Förutsättningar

  • Du har ett GitHub-konto och förstår Git-grunderna.
  • Du har ett Google- eller Microsoft SharePoint-konto.
  • Du förstår grunderna i HTML, CSS och JavaScript.
  • Du har installerat Node/npm för lokal utveckling.

Upp med huvudet! I den här självstudien används macOS, Chrome och Visual Studio Code. Stegen kan anpassas för andra inställningar, men skärmbilderna och specifika gränssnittselement kan skilja sig åt beroende på vilket operativsystem, vilken webbläsare och vilken kodredigerare du har valt.

Skapa ett nytt AEM projekt förkonfigurerat med Adaptive Forms Block

Med AEM Forms-mallen för mallar kommer du snabbt igång med ett AEM projekt som är förkonfigurerat med det adaptiva Forms-blocket. Det är det snabbaste och enklaste sättet att följa AEM bästa praxis och börja skapa formulär.

Kom igång med AEM Forms mall för standarddatabas

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

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

      AEM Forms-mallsida

    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.

      Skapa en ny databas med AEM Forms-standardmallen

    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.

    Ställ in databasen på public

  2. Installera AEM Code Sync GitHub App på din databas. Installera:

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

    Ställ in databasen på public

    note note
    NOTE
    Om du använder GitHub Enterprise med IP-filtrering kan du lägga till följande IP-adress i tillåtelselista: 3.227.118.73

    Grattis! Du har en ny webbplats som körs på https://<branch>--<repo>--<owner>.hlx.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.hlx.page/.

Länka din egen innehållskälla

Din nyligen skapade GitHub-databas pekar på exempelinnehåll som lagras i en Google Drive-mapp. Det här skrivskyddade innehållet är en bra utgångspunkt för dina formulär. Du kan kopiera det till din egen Google Drive och anpassa det efter dina behov.

Exempelinnehåll på Google Drive

Så här kopierar du exempelinnehållet till din egen innehållsmapp och pekar din GitHub-databas mot din egen innehållsmapp:

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

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

    Använd alternativet Hantera åtkomst för att dela mappen med AEM användare - SharePoint

    Använd alternativet Hantera åtkomst för att dela mappen med AEM användare - Google Drive

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

    Dela mapp med AEM användare, ange redigeringsbehörighet-SharePoint

    Dela mapp med AEM användare, ange redigeringsbehörighet - Google Drive

  3. Kopiera exempelinnehållet som lagras i Google Drive-mappen till din mapp. Kopiera:

    1. Hämta filerna tillsammans eller hämta enskilda filer.

      Hämta exempelinnehåll

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

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

      Exempelinnehåll på Google Drive

      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.

  4. 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. Öppna fstab.yaml för redigering.

    3. Ersätt den befintliga referensen med sökvägen till mappen som du delade med AEM användare (helix@adobe.com).

      Exempelinnehåll på Google Drive

      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 Så här använder du Adobe SharePoint.

    4. Genomför den uppdaterade fsatb.yaml-filen när du har uppdaterat referensen och allt ser bra ut. Om du stöter på några byggproblem kan du läsa Felsökning av GitHub-byggproblem.

      Bekräfta uppdaterad fsatab.yaml-fil

      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.

Förhandsgranska och publicera ditt innehåll

När du är klar med det sista steget är den nya innehållskällan inte tom, men den syns inte på webbplatsen förrän den befordras till förhandsgranskningen eller live-stadierna. För närvarande kan detta orsaka 404 fel.

Så här förhandsgranskar du opublicerat innehåll:

  1. Installera Chrome-tillägget AEM Sidekick.

    Installera AEM Sidekick

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

    Fäst AEM Sidekick

  2. Om du vill konfigurera tillägget Sidekick Chrome 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.

    AEM Sidekick - Lägg till ett projekt

    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.

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

    Markera alla filer

  4. Klicka på AEM Sidekick-ikonen som är fäst i Chrome tilläggsfält. 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:

    code language-html 
    https://<branch>--<repository>--<owner>.hlx.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>.hlx.page/enquiry.

    Om projektdatabasen till exempel heter"weFinance" finns den under kontoägaren"wkndforms" (wkndforms)" (wkndforms) och du använder huvudgrenen är URL

    https://main—weFinance—wkndforms.hlx.page.

Skapa ett formulär

Exempelinnehållet innehåller ett frågeblad som fungerar som mall för frågeformuläret. Varje rad i kalkylbladet representerar ett formulärfält och kolumnrubrikerna definierar fältegenskaperna. Det här exempelformuläret ger dig ett försprång när du skapar formuläret.

Formulär för förfrågan

Vi börjar med att uppdatera en fältetikett. Öppna förfrågningsbladet för redigering, ändra etiketten för skicka-knappen till Let's Chat och använd AEM Sidekick för att förhandsgranska och publicera filen.

Formulär för förfrågan

När du förhandsgranskar eller publicerar filen visas en JSON-version av filen på en ny flik. Kopiera förhandsgransknings- (.hlx.page) eller publicerings-URL:en (.hlx.live) för filen.

JSON för formulärkalkylbladet

Öppna filen enquiry och ersätt URL:en i formulärblocket med URL:en för filen som kopierades i föregående steg. Kontrollera att URL:en är en hyperlänk.

Förfrågningsfil med URL:en .json för kalkylbladets URL

Använd AEM Sidekick för att förhandsgranska och publicera förfrågningsdokumentet.

Förfrågningsfil med URL:en .json för kalkylbladets URL

Om du vill förhandsgranska det uppdaterade frågeformuläret går du till följande URL:

    https://<branch>--<repository>--<owner>.hlx.page/enquiry

Etiketten för skicka-knappen uppdateras till Let's Chat.

Formulär för förfrågan

Mer information om hur du skapar och publicerar ett nytt formulär finns i handboken Skapa ett formulär.

Börja utveckla format och funktionalitet

För att komma igång med en lokal AEM utvecklingsmiljö på nolltid:

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

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

  2. 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:

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

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

    code language-none 
    cd <repo>
aem up

Mappen Adaptive Forms Block blocks/form är din spelningsmiljö för formatering och kod för dina formulär! Redigera alla .css- eller .js-filer i den här katalogen så ser du ändringarna direkt i webbläsaren.

Är du redo att visa upp din skapelse? Använd Git för att implementera och föra över ändringarna. Detta uppdaterar förhandsgransknings- och produktionsmiljöer som du kan nå på dessa URL:er (ersätt platshållare med projektinformation):

Förhandsgranska: https://<branch>--<repo>--<owner>.hlx.page/
Produktion: https://<branch>--<repo>--<owner>.hlx.live/

Grattis! Du har konfigurerat den lokala utvecklingsmiljön och distribuerat ändringarna.

Lägg till adaptiv Forms Block i ditt befintliga AEM

https://video.tv.adobe.com/v/3427789

Om du har ett befintligt AEM kan du integrera det adaptiva Forms-blocket i ditt aktuella projekt för att komma igång med att skapa formulär.

NOTE
Det här steget gäller projekt som skapats med AEM-standardmallen. Om du har skapat ditt AEM med AEM Forms-standardmallen kan du hoppa över det här steget.

Integrera:

  1. Klona det adaptiva Forms-blockarkivet: https://github.com/adobe-rnd/aem-boilerplate-forms till din dator.

  2. I den hämtade mappen hittar du mappen blocks/form. Kopiera mappen. Navigera till det lokala blocks-mappen för ditt AEM och klistra in den kopierade formulärmappen här.

  3. Verkställ och skicka dessa ändringar till ditt AEM på GitHub.

Så ja! Det adaptiva Forms-blocket ingår nu i ditt AEM. Du kan börja skapa och lägga till formulär på dina AEM sidor.

Felsökning av byggproblem med GitHub

Se till att GitHub-byggprocessen blir smidig genom att åtgärda potentiella problem:

  • Resolve Module Path-fel:
    Om du får felmeddelandet"Det går inte att lösa sökvägen till modulen "'…/…/scripts/lib-franklin.js'" går du till filen [EDS Project]/blocks/forms/form.js. Uppdatera importsatsen genom att ersätta filen lib-franklin.js med filen aem.js.

  • Hantera lintingfel:
    Om du skulle stöta på ett lintingfel kan du kringgå dem. Öppna [EDS-projektfilen]/package.json och ändra lint-skriptet från "lint": "npm run lint:js && npm run lint:css" till "lint": "echo 'skipping linting for now'". Spara filen och implementera ändringarna i GitHub-projektet.

Se även

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab