DokumentationAEM 6.5Användarhandbok

Skapa en anpassad anpassad formulärmall creating-a-custom-adaptive-form-template

Last update: Wed Mar 06 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
NOTE
AEM Forms har infört dynamiska mallar. Du kan använda AEM Sites mallredigerare för att skapa eller redigera dynamiska mallar. Mallarna som nämns i artikeln nedan är statiska mallar. Dessa är inte tillgängliga i en standardinstallation. Installera kompatibilitetspaket för att få tillgång till mallarna i din miljö.

Förutsättningar prerequisites

Adaptiv formulärmall adaptive-form-template

En mall för anpassat formulär är en AEM sidmall med vissa egenskaper och innehållsstruktur som används för att skapa anpassningsbara formulär. Mallen innehåller förkonfigurerade layouter, format och grundläggande innehållsstruktur.

När du har skapat ett formulär återspeglas inte ändringarna i den ursprungliga mallinnehållsstrukturen i formuläret.

Standardmallar för anpassningsbara formulär default-adaptive-form-templates

AEM QuickStart innehåller följande adaptiva formulärmallar:

  • Undersökningsmall: Gör att du kan skapa ett anpassat formulär med hjälp av layouten Responsiv som har flera kolumner konfigurerade. Layouten justeras automatiskt baserat på dimensionerna för de olika skärmar som du vill visa formuläret på.
  • Enkel registreringsmall: Gör att du kan skapa ett anpassningsbart formulär i flera steg med hjälp av en guidelayout. I den här layouten kan du ange ett uttryck för stegfärdigställande för varje steg, som valideras innan guiden fortsätter till nästa steg.
  • Registreringsmall med flikar: Gör att du kan skapa ett anpassningsbart formulär med flera flikar i en tabbar-till-vänster-layout där du kan besöka flikar i valfri slumpmässig ordning.
  • Avancerad registreringsmall: Skapa ett formulär med flera flikar och guider. Den har en tabbar till vänster-layout där du kan gå till flikarna i valfri ordning. Den använder Adobe Document Cloud designtjänster för signering och verifiering.
  • Tom mall: Skapa ett formulär utan sidhuvud, sidfot och ursprungligt innehåll. Du kan lägga till komponenter som textrutor, knappar och bilder. Med den tomma mallen kan du skapa ett formulär som du bädda in AEM webbplatssidor.

Mallarna har sling:resourceType -egenskapen ställs in på motsvarande sidkomponent. Sidkomponenten återger CQ-sidan med adaptiv formulärbehållare, som i sin tur återger adaptiv form.

I följande tabell räknas associationen mellan mallar och sidkomponenter upp:

Mall
Sidkomponent
/libs/fd/af/templates/surveyTemplate
/libs/fd/af/components/page/survey
/libs/fd/af/templates/simpleEnrollmentTemplate
/libs/fd/af/components/page/base
/libs/fd/af/templates/tabbedEnrollmentTemplate
/libs/fd/af/components/page/tabbedenrollment
/libs/fd/afaddon/templates/advancedEnrollmentTemplate
/libs/fd/afaddon/components/page/advancedRotering

Skapa en adaptiv formulärmall med mallredigeraren creating-an-adaptive-form-template-using-template-editor

Du kan ange strukturen och det ursprungliga innehållet i ett anpassat formulär med mallredigeraren. Du vill till exempel att alla formulärförfattare ska ha få textrutor, navigeringsknappar och en skicka-knapp i ett registreringsformulär. Du kan skapa en mall som författare kan använda för att skapa ett formulär som är konsekvent med andra registreringsformulär. AEM mallredigerare:

  • Lägga till sidhuvud- och sidfotskomponenter i ett formulär i strukturlagret
  • Ange formulärets ursprungliga innehåll.
  • Ange ett tema.
  • Ange åtgärder som att skicka, återställa och navigera.

Mer information finns i Mallredigerare.

Skapa en anpassad formulärmall från CRXDE creating-an-adaptive-form-template-from-crxde

I stället för att använda de tillgängliga mallarna kan du skapa en mall och använda den för att skapa anpassade formulär. Anpassade mallar baseras på olika sidkomponenter som refererar till adaptiva formulärbehållare och sidelement, t.ex. sidhuvud och sidfot.

Du kan skapa de här komponenterna med bassidkomponenten för webbplatsen. Du kan också utöka sidkomponenten i det adaptiva formuläret som finns i rutmallarna.

Utför följande steg för att skapa en anpassad mall, till exempel simpleEnrollmentTemplate.

  1. Navigera till CRXDE Lite i redigeringsinstansen.

  2. Skapa mappstrukturen för programmet i katalogen /apps. Om programnamnet till exempel är mitt eget skapar du en mapp med det här namnet. Programmappen innehåller vanligtvis komponenter, konfiguration, mallar, src och installationskataloger. I det här exemplet skapar du mapparna för komponenter, konfiguration och mallar.

  3. Navigera till mappen /libs/fd/af/templates.

  4. Kopiera simpleEnrollmentTemplate nod.

  5. Navigera till mappen /apps/mycompany/templates. Högerklicka på den och välj Paste.

  6. Om det behövs byter du namn på mallnoden som du kopierade. Du kan t.ex. byta namn på den som en registreringsmall.

  7. Navigera till platsen /apps/mycompany/templates/enrollment-template.

  8. Ändra jcr:title och jcr:description egenskaper för jcr:content för att skilja mallen från mallen som du kopierade.

  9. The jcr:content noden i den ändrade mallen innehåller guideContainer och guideformtitle -komponenter. guideContainer är den behållare som innehåller det adaptiva formuläret. The guideformtitle -komponenten visar programnamnet, beskrivningen och så vidare.

    I stället för guideformtitlekan du ta med en anpassad komponent eller parsys -komponenten. Ta till exempel bort guideformtitleoch lägga till en anpassad komponent eller parsys komponentnod. Se till att sling:resourceType -egenskapen för komponenten refererar till komponenten och det är definierat på sidan component.jsp -fil.

  10. Navigera till platsen /apps/mycompany/templates/enrollment-template/jcr:content.

  11. Öppna Properties och ändra värdet på cq:designPath till /etc/designs/mincompany.

  12. Skapa nu en /etc/designs/mycompany-nod för cq:Page typ.

Skapa en adaptiv komponent för formulärsidor create-an-adaptive-form-page-component

Den anpassade mallen har samma format som standardmallen eftersom mallen refererar till sidkomponenten /libs/fd/af/components/page/base. Du kan hitta komponentreferensen som egenskapen sling:resourceType definieras på noden /apps/mycompany/templates/enrollment-template/jcr:content. Eftersom basen är en kärnproduktkomponent, ska du inte ändra den här komponenten.

  1. Navigera till noden /apps/mycompany/templates/enrollment-template/jcr:content och ändra egenskapens värde sling:resourceType till /apps/mycompany/components/page/enrollmentpage

  2. Kopiera noden /libs/fd/af/components/page/base till mappen /apps/mycompany/components/page.

  3. Byt namn på den kopierade komponenten till enrollmentpage.

  4. (Endast om du redan har en innehållssida) Utför följande steg (a-d) om du har en befintlig contentpage-komponent för din webbplats. Om du inte har någon befintlig contentpagekan du lämna resourceSuperTypeegenskapen så att den pekar på den körklara bassidan.

    1. För enrollmentpage nod, ange egenskapens värde sling:resourceSuperType till mincompany/components/page/contentpage. The contentpage är bassidkomponenten för -platsen. Andra sidkomponenter kan utöka den. Ta bort skriptfiler under enrollmentpage, förutom head.jsp, content.jspoch library.jsp. The sling:resourceSuperType -komponent, som contentpage i det här fallet innehåller alla sådana skript. Sidhuvuden, inklusive navigeringsfält och sidfötter, ärvs från contentpage -komponenten.

    2. Öppna filen head.jsp.

      JSP-filen innehåller raden <cq.include script="library.jsp"/>.

      The library.jsp filen innehåller guide.theme.simpleEnrollment klientbibliotek, som innehåller formateringen för det adaptiva formuläret.

      Sidkomponenten enrollmentpage har en exklusiv head.jsp som åsidosätter head.jsp filen contentpage -komponenten.

    3. Inkludera alla skript i head.jsp filen för contentpage -komponenten till head.jsp filen för enrollmentpage -komponenten.

    4. I content.jsp kan du lägga till ytterligare sidinnehåll eller referenser till andra komponenter som inkluderas när en sida återges. Om du till exempel lägger till den anpassade komponenten applicationformheaderska du se till att du lägger till följande referens till komponenten i JSP-filen:

      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>

      Om du lägger till en parsys -komponenten i mallnodstrukturen, även den anpassade komponenten.

Skapa ett adaptivt formulärklientbibliotek creating-an-adaptive-form-client-library

The head.jsp filen enrollmentpage -komponenten för den nya mallen innehåller ett klientbibliotek guide.theme.simpleEnrollment. Standardmallen använder även det här klientbiblioteket. Ändra formatet i den nya mallen på något av följande sätt:

  • Definiera ett anpassat tema och ersätt standardtemat guide.theme.simpleEnrollment med det anpassade temat.
  • Definiera ett nytt klientbibliotek under /etc/designs/mincompany. Inkludera klientbiblioteket efter standardtemaposten på jsp-sidan. Inkludera alla åsidosatta format och ytterligare JavaScript-filer i klientbiblioteket.
NOTE
Temat avser ett klientbibliotek som ingår i sidkomponenten som används för att återge ett anpassat formulär. Klientbiblioteket styr huvudsakligen utseendet på ett anpassat formulär.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2