DokumentationAEM Headless adaptive forms

Bygg engagerande Forms med baskomponenter och Headless Adaptive Forms i AEM Forms as a Cloud Service build-engaging-forms-using-core-components-and-headless

Last update: Thu Jul 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Utvecklare

Lab-översikt lab-overview

I detta praktiska labb lär du dig följande:

Hur man använder AEM Forms för att enkelt skapa anpassningsbara blanketter med hjälp av de senaste kärnkomponenterna. Dessa komponenter är förenliga med AEM Sites och möjliggör datainhämtning över flera kanaler genom att leverera de adaptiva formulären som headless-formulär till webben, mobiler och chatt. Du får också lära dig de effektivaste strategierna när det gäller format, anpassningar och gränssnittsutveckling.

Viktiga uppgifter key-takeaways

  • Affärsflexibilitet: Som affärsanvändare kan jag enkelt skapa formulärupplevelser för flera kanaler.

  • Framåtutvecklare: Som klientutvecklare kan jag styra slutanvändarens upplevelse med headless-formulär.

  • Utvecklarhastighet: Som utvecklare kan jag enkelt och konsekvent anpassa webbplatser och Forms-komponenter.

Förutsättningar prerequisites

Så här använder du det här praktiska labbet:

Lektion 1 lesson-1

Syfte lesson-1-objectives

Bekanta dig med AEM Forms as a Cloud Service-miljö.

Lektionssammanhang lesson-1-context

I den här lektionen lär du dig AEM Forms as a Cloud Service-miljö genom att navigera i användargränssnittet.

Utövning lesson-1-excercise

  1. Öppna webbläsaren och ange webbadressen till Cloud Service-redigeringsmiljö.

  2. Logga in i Cloud Service redigeringsmiljö.
    {width="50%"}

  3. Om du vill navigera till användargränssnittet i AEM Forms klickar du på Forms > Forms & Documents.

    {width="50%"}

    Stäng alla popup-fönster som rör inställningar eller information. Alla tillgängliga formulär visas.

Lektion 2

Syfte

Skapa ett adaptivt formulär med hjälp av de senaste centrala komponenterna, konfigurera och skicka in formuläret.

Lektionssammanhang

I den här lektionen kommer du som företagsanvändare att skapa ett anpassningsbart formulär för flera kanaler, som webben, mobiler och chatt, med hjälp av anpassningsbar formulärredigering och standardiserade OOTB-kärnkomponenter för datainhämtning.

Utövning

  1. Skapa en slutpunkt för överföring av formuläret:

    1. Öppna https://pipedream.com/requestbin på en ny webbläsarflik.

    2. Klicka på Skapa en offentlig bin och kopiera URL:en för slutpunkten.

      {width="50%"}

      {width="50%"}

  2. Skapa ett anpassat formulär med hjälp av guidegränssnittet:

    1. Navigera till AEM Forms som Cloud Service webbgränssnitt och navigera till Forms och Dokument på fliken Webbläsare som används i lektion 1.

    2. Klicka på Skapa > Adaptivt formulär.

    3. Välj mallen Tom med kärnkomponenter på mallvalsskärmen enligt nedan:

    4. Klicka på fliken Format och välj temat wk-theme så som visas nedan:

    5. Klicka på fliken Överföring och välj kortet Skicka till REST-slutpunkt och ange det offentliga facket i fältet URL för POST-begäran enligt nedan:

    6. Klicka på Skapa. Ange ett namn och en titel i formuläret. Exempel: registrering. Klicka på Skapa.

    7. Den adaptiva formulärredigeraren öppnas. Stäng alla popup-fönster eller dialogrutor för inställningar eller information. Klicka på komponentwebbläsaren till vänster och lägg till komponenterna Header och Footer i det tomma formulärets övre och nedre del.

    8. Dra och släpp komponenter från komponentwebbläsaren för att skapa ett formulär som liknar följande:

      {width="50%"}

  3. Lägg till valideringar i formuläret:

    1. Klicka på komponenten Telefonnummer så att snabbmenyn visas. Klicka på ikonen Förnya på menyn för att konfigurera fältet.

    2. Öppna fliken valideringar, markera fältet Obligatoriskt och klicka på Klar. Meddelandet om att åtgärden lyckades visas.

      {width="50%"}

      {width="50%"}

  4. Förhandsgranska och skicka formuläret.

    1. Klicka på Förhandsgranska om du vill förhandsgranska formuläret från ett slutanvändarperspektiv.

    2. Fyll i formuläret med provdata.

    3. Skicka formuläret.

    4. Kontrollera skickade data på fliken Begäranbehållare.

  5. Lägg till interaktivitet i formuläret med regler:

    1. Klicka på rutan Markera om du vill få 5 % rabatt. Klicka på ikonen Regler i alternativverktygsfältet. Alternativet Regelredigerare öppnas.

    2. Skapa en regel när alternativet Markera kryssrutan för att få 5 % rabatt är markerat inaktiveras alternativen för att använda kreditkort.

  6. Publicera formuläret.

    1. Öppna AEM Forms hanteringsgränssnitt, till exempel https://author-p105303-e986623.adobeaemcloud.com/ui%23/aem/aem/forms.html/content/dam/formsanddocuments, och välj formuläret.

    2. Klicka på Publicera.

      Meddelandet om att åtgärden lyckades visas.

      Den publicerade URL:en för formuläret liknar https://publish-p105303-e986623.adobeaemcloud.com/content/forms/af/registration.html.

    3. Om du vill visa det publicerade formuläret ersätter du program-ID:t (pXXXXXX) och miljö-ID:t (eXXXXXX) i ovanstående URL med ID:n för
      miljö.

Lektion 3

Syfte

Uppdatera format med hjälp av vedertagna metoder för utveckling av klientprogram.

Lektionssammanhang

I den här lektionen lär du dig hur du enkelt kan uppdatera formateringen för det tidigare skapade adaptiva formuläret.

Utövning

Konfigurera en lokal databas med temat:

  1. Öppna kommandotolken eller kommandotolken med administratörsbehörighet:

    {width="50%"}

  2. Använd följande kommando på kommandotolken för att navigera till mappen c:\git

    code language-shell 
    cd c:\git

  3. Använd följande kommando för att klona koden för temat Framtend:

    code language-shell 
    git clone -b WKND https://github.com/adobe/aem-forms-theme-canvas

  4. Använd följande kommando i den angivna ordningen för att navigera till katalogen aem-forms-theme-canvas och öppna Visual Studio-kod.

    code language-shell 
    cd aem-forms-theme-canvas
code .

  5. Välj Lita på författarna till alla filer i den överordnade mappen och klicka på Ja, jag litar på författarna.

    {width="50%"}

  6. Om du vill återge formuläret som finns i molntjänstens publiceringsmiljö byter du namn på filen env_template. Om du vill byta namn på filen högerklickar du på filen env_template och väljer alternativet Byt namn .

    {width="50%"}

    {width="50%"}

  7. Ange följande värden för variablerna i .env-filen och spara filen:

    • AEM_URL: Ange din molntjänstpubliceringsmiljö. Exempel: https://publish-p105303-e986623.adobeaemcloud.com/

    • AEM_ADAPTIVE_FORM: Ange sökvägen för formuläret. Om formulärsökvägen till exempel är /content/forms/af/registration blir värdet för den här variabeln registration.

      {width="50%"}

  8. Skapa en lokal användare i AEM-miljön.

    note note
    NOTE
    Om du vill skapa en lokal användare går du till AEM Home > Tools > Security > Users.
    Kontrollera att användaren är medlem i gruppen för användare av formulär.

  9. Kör följande kommando i kommandotolken:

    code language-shell 
    npm install

    note note
    NOTE
    • Om du får ett meddelande som ber om att uppdatera npm via kommandot npm notice Run npm nstall -g npm@9.6.0, ska du ignorera meddelandet.
    • Kör inte andra npm-kommandon, såvida du inte har instruerats i arbetsboken.

  10. Kör nu följande kommando för att förhandsgranska formuläret.

    code language-shell 
    npm run live

    När ovanstående kommando har körts väntar du på meddelandet webpack compiled och du omdirigeras till en inloggningssida för AEM.

  11. Klicka på Logga in lokalt (endast administrationsuppgifter) på inloggningssidan för AEM.

  12. Ange inloggningsuppgifterna för den skapade lokala användaren och formuläret visas på en webbläsarflik.

    note note
    NOTE
    Om du får en tom skärm i webbläsaren efter att ha kört kommandot npm run live i mer än 3-4 minuter ändrar du localhost i webbläsarens URL till 127.0.0.1 och trycker på Enter.

    {width="50%"}

  13. Öppna filen PROJECT\src\site\_variables.scss i Visual Studio Code. Observera att färgen $error är en skugga av RED.

    {width="50%"}

  14. Skicka formuläret i webbläsaren för att se den röda färgen i fältet Förnamn.

  15. Ställ in färgen $error på #5736eb och spara filen.

    {width="50%"}

  16. Uppdatera webbläsaren och skicka formuläret. Observera att felfärgen i förnamnsfältet har ändrats därefter.

  17. I kommandotolken trycker du på CTRL+C, anger Y och trycker på Enter för att avsluta npm-processen. Det är viktigt att stoppa npm-servern så att den inte hamnar i konflikt med nästa uppsättning övningar.

  18. Stäng fönster för Visual Studio-kod och kommandotolk.

Lektion 4

Syfte

Rendera formuläret till webb/mobil och andra gränssnitt som en headless-form.

Lektionssammanhang

I den här lektionen lär du dig hur du kan återge den adaptiva formen som du skapat tidigare som en rubrikfri form med hjälp av ett ramverk för React-spektrumdesign.

Utövning

Konfigurera en lokal databas med hjälp av React Starter-projektet:

  1. Öppna kommandotolken med administratörsbehörighet.

    {width="50%"}

  2. Använd följande kommando på kommandotolken för att navigera till mappen c:\git

    code language-shell 
    cd c:\git

  3. Använd följande kommando för att klona det adaptiva formuläret Reagera-startprojekt:

    code language-shell 
    git clone https://github.com/adobe/react-starter-kit-aem-headless-forms

  4. Använd följande kommandon i den listade ordningen för att navigera till katalogen rea-starter-kit-aem-headless-forms och öppna Visual Studio Code.

    code language-shell 
    cd react-starter-kit-aem-headless-forms

code .

    Fönstret Visual Studio Code öppnas.

    {width="50%"}

Så här återger du formuläret som finns i molntjänstens publiceringsmiljö:

  1. Byt namn på filen env_template till .env-filen. Om du vill byta namn högerklickar du på filen env_template och väljer alternativet Byt namn .

    {width="50%"}

  2. Ange följande värden för variablerna i .env-filen. Spara filen när du har uppdaterat variablerna.

    • AEM_URL: Ange URL:en för molntjänstens publiceringsmiljö. Exempel: https://publish-p105303-e986623.adobeaemcloud.com

    • AEM_FORM_PATH: Ange sökvägen för det adaptiva formuläret som skapades i föregående lektion. Exempel: /content/forms/af/registration/

  3. Öppna kommandofönstret, kontrollera att du är i katalogen reak-starter-kit-aem-headless-forms och kör följande kommando:

    code language-shell 
    npm install

  4. Kör följande kommando i kommandotolken:

    code language-shell 
    npm start

    Ovanstående kommando startar en lokal utvecklingsserver som skulle återge formulärdefinitionen som hämtades från AEM utan rubrik med hjälp av biblioteket React trum Front.

    note note
    NOTE
    Om du får en tom skärm i webbläsaren efter att ha kört kommandot npm start i mer än 3-4 minuter ändrar du localhost i webbläsarens URL till 127.0.0.1 och trycker på Enter.

Låt oss kontrollera hur reglerna i den här rubrikfria formen verkställs:

  1. Markera kryssrutan Markera kryssrutan för att få 5 % rabatt. Det efterföljande alternativet för att ansöka om kreditkort är inaktiverat.

  2. Avmarkera Markera kryssrutan för att få 5 % rabatt för att aktivera kreditkortsalternativet.

Låt oss göra ändringar i formuläret på servern som företagsanvändare och automatiskt se ändringarna som återspeglas i det headless-formuläret.

  1. Öppna AEM Forms gränssnitt i webbläsaren.

  2. Markera formuläret contactus och klicka på Redigera. Formuläret öppnas i redigeraren för anpassade formulär.

  3. Markera fältet Telefonnummer och klicka på ikonen Redigera (pennikonen) i verktygsfältet. Om du inte kan se popup-verktygsfältet växlar du till redigeringsläget. Klicka på knappen Redigera överst till höger, vänster till Förhandsgranska .

  4. Ändra etiketten till Mobilnummer. Klicka på ett tomt utrymme i formuläret så sparas ändringarna i formuläret.

Låt oss publicera det uppdaterade formuläret för att sprida ändringarna till den publicerade miljön.

  1. Markera registreringsformuläret på fliken för AEM Forms-hanteringsgränssnittet och klicka på Avpublicera. Om knappen Avpublicera inte visas går du vidare till steg 3 och publicerar ändringarna direkt.

  2. Klicka på Avpublicera. Klicka på Stäng i respektive dialogruta.

  3. När webbläsaren har uppdaterats markerar du registreringsformuläret och klickar på Publicera.

  4. Klicka på Publicera. Klicka på Stäng i respektive dialogruta.

  5. Uppdatera webbläsarfliken med det headfria formuläret synligt. Observera att telefonnummeretiketten har ändrats till Mobilnummer.

  6. Öppna fönstret Kommandotolk som används för att starta projektet responsstarter-kit-aem-headless-forms, tryck på CTRL+C och sedan
    ange Y och tryck på Retur för att avsluta npm-processen. Det är viktigt att stoppa npm-servern så att den inte hamnar i konflikt med nästa uppsättning övningar.

  7. Stäng fönster för Visual Studio-kod och kommandotolk.

Lektion 5

Syfte

Rendera formuläret som ett headless-formulär med Google Material UI

Lektionssammanhang

I den här lektionen lär du dig att återge den adaptiva formen som tidigare skapats som ett headless-formulär med Google Material UI.

Utövning

Konfigurera en lokal databas med hjälp av startprojektet för materialgränssnittet:

  1. Öppna kommandotolken med administratörsbehörighet.

    {width="50%"}

  2. Använd följande kommando på kommandotolken för att navigera till mappen c:\git:

    code language-shell 
    cd c:\git

  3. Kör följande kommandon i den angivna ordningen för att skapa en mapp med namnet mui och navigera till mappen mui med följande kommandon:

    code language-shell 
    mkdir mui

cd mui

  4. Använd följande kommando för att klona det adaptiva formuläret Reagera-startprojekt:

    code language-shell 
    git clone -b mui-lab https://github.com/adobe/react-starter-kit-aem-headless-forms

  5. Använd följande kommando i den listade ordningen för att navigera till mappen response-starter-kit-aem-headless-forms och öppna koden i Visual Studio-koden:

    code language-shell 
    cd react-starter-kit-aem-headless-forms

code .

Så här återger du formuläret som finns i molntjänstens publiceringsmiljö:

  1. Byt namn på filen env_template till filen .env . Om du vill byta namn högerklickar du på filen env_template och väljer Byt namn.

    {width="50%"}

  2. Ange följande värden för variablerna i .env-filen. Spara filen när du har uppdaterat variablerna. Använd växlingskombinationen CTRL + S för att spara filen.

    • AEM_URL: Ange URL:en för molntjänstens publiceringsmiljö. Exempel: https://publish-p105303-e986623.adobeaemcloud.com

    • AEM_FORM_PATH: Ange sökvägen för det adaptiva formuläret som skapades i föregående lektion. Till exempel /content/forms/af/registration/

  3. Öppna kommandofönstret, kontrollera att du är i katalogen reak-starter-kit-aem-headless-forms och kör följande kommando:

    code language-shell 
    npm install

  4. Kör följande kommando i kommandotolken:

    code language-shell 
    npm start

    Kommandot startar en lokal utvecklingsserver och återger den formulärdefinition som hämtats från AEM på ett headless sätt med Google
    Gränsbibliotek för materialgränssnitt.

    note note
    NOTE
    Om du får en tom skärm i webbläsaren efter att ha kört kommandot npm start i mer än 3-4 minuter ändrar du localhost i webbläsarens URL till 127.0.0.1 och trycker på Enter.

  5. Så här utvärderar du körningen av samma affärslogik i den här formuläråtergivningen:

    Markera kryssrutan om du vill få 5 % rabatt. Det efterföljande alternativet Vill du ansöka om We.Finance företagsformulär? inaktiveras.

    {width="50%"}

Lektion 6

Syfte

Skapa ett alternativt utseende och känsla för den headless-formen med materialvariationer för UI-komponenter

Lektionssammanhang

I den här lektionen lär du dig hur du skapar en alternativ representation av olika komponenter. Du använder materialgränssnitt för den adaptiva formen som skapades tidigare av företagsanvändaren.

Utövning

Uppdatera variationen av komponenterna i det headless-projektet. Så här ändrar du varianten för textindatakomponenten i användargränssnittet till OutlinedInput:

  1. I Visual Code navigerar du till textindatakomponenten genom att öppna filen index.tsx på src/components/textinput/index.tsx.

  2. Lägg till // i början av kodraden 103. Raden konverteras till en kommentar.

    code language-shell 
    //const Cmp = \'outlined\' === appliedCssClassNames ? OutlinedInput: Input;

  3. Lägg till följande på rad 104 om du vill använda en annan variant av komponenten och spara filen. Använd växlingskombinationen CTRL + S för att spara filen.

    code language-shell 
    const Cmp = OutlinedInput;

    Det är viktigt att använda korrekt skiftläge för varianten OutlinedInput, annars misslyckas kompileringen. Kompileringen av den lokala utvecklingsmiljön startar automatiskt i kommandotolken. Vänta tills följande meddelande visas

    webpack 5.75.0 compiled with 3 warnings in 6659 ms
    inside proxy req
    setting new origin header

  4. Uppdatera webbläsaren, om den inte uppdateras automatiskt, för att se hur textindatakomponenten använder en annan variant.

    Den här ändringen sker för slutanvändare utan att formulärdefinitionen på AEM Forms Server ändras och gäller specifikt för headless
    den aktuella kanalen. En webbkanal i det här labbet.

    {width="50%"}

  5. Stäng fönster för Visual Studio-kod och kommandotolk.

Vanliga frågor och svar

Är Adaptiv formulärguide tillgänglig för allmänheten?
Ja, det kan köpas med AEM Forms som Cloud Service.
Är kärnkomponenterna tillgängliga för allmänheten?
Ja, kärnkomponenterna i Adaptiv Forms finns i AEM Forms som Cloud Service.
Är headless-formulär tillgängliga för allmänheten?
Ja, formulär utan rubrik finns med AEM Forms som Cloud Service.
Kräver Headless-formulär en separat licens?
Nej, Headless-formulär använder samma licensvärde, antal formulärinskickade formulär.
Finns det baskomponenter och Headless-blanketter i AEM 6.5 Forms?
Ja, både adaptiva formulär och headless-komponenter finns tillgängliga med AEM Forms 6.5 Service Pack 16 och senare.

Nästa steg

Nu vet ni hur ni bygger adaptiva formulär och levererar dem över alla kanaler med headless-formulär. Använd dessa kunskaper för att skapa skalbara, högkvalitativa datainhämtningsupplevelser oavsett var användarna är.

Resurser

recommendation-more-help
ce8b2828-9203-402e-a565-7b758c99b2ba