DokumentationAEM 6.5Användarhandbok

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

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Användare
  • Utvecklare
NOTE
AEM Forms har infört dynamiska mallar. Du kan använda mallredigeraren i AEM Sites 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 kompatibilitetspaketet om du vill hämta de här 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 kan bädda in AEM webbplatssidor.

De här mallarna har egenskapen sling:resourceType inställd 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 noden simpleEnrollmentTemplate.

  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 egenskaperna jcr:title och jcr:description för noden jcr:content för att skilja mallen från mallen som du kopierade.

  9. Noden jcr:content i den ändrade mallen innehåller komponenterna guideContainer och guideformtitle. guideContainer är den behållare som innehåller det adaptiva formuläret. Komponenten guideformtitle visar programnamnet, beskrivningen och så vidare.

    I stället för guideformtitle kan du ta med en anpassad komponent eller komponenten parsys. Ta till exempel bort guideformtitle och lägg till en anpassad komponent eller komponentnoden parsys. Se till att komponentens sling:resourceType-egenskap refererar till komponenten och att samma egenskap definieras i sidfilen component.jsp.

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

  11. Öppna fliken Properties och ändra värdet för egenskapen cq:designPath till /etc/designs/mincompany.

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

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 som 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 värdet för egenskapen 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 webbplatsen. Om du inte har någon befintlig contentpage-komponent för webbplatsen kan du låta resourceSuperType-egenskapen peka på den körklara bassidan.

    1. För noden enrollmentpage anger du värdet för egenskapen sling:resourceSuperType till mincompany/components/page/contentpage. Komponenten contentpage är bassidans komponent för din webbplats. Andra sidkomponenter kan utöka den. Ta bort skriptfiler under enrollmentpage, förutom head.jsp, content.jsp och library.jsp. Komponenten sling:resourceSuperType, som i det här fallet är contentpage, innehåller alla sådana skript. Sidhuvuden, inklusive navigeringsfält och sidfötter, ärvs från komponenten contentpage.

    2. Öppna filen head.jsp.

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

      Filen library.jsp innehåller klientbiblioteket guide.theme.simpleEnrollment som innehåller formateringen för det adaptiva formuläret.

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

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

    4. I skriptet 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 applicationformheader måste du lägga till följande referens till komponenten i JSP-filen:

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

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

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

Filen head.jsp för komponenten enrollmentpage 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