Een aangepaste aangepaste formuliersjabloon maken creating-a-custom-adaptive-form-template
Vereisten prerequisites
-
Inzicht in AEM Paginasjabloon en Adaptief ontwerpen van formulieren
-
Inzicht in AEM Client Side Libraries
Adaptief formuliersjabloon adaptive-form-template
Een adaptieve formuliersjabloon is gespecialiseerd AEM Paginasjabloon, met bepaalde eigenschappen en inhoudsstructuur die worden gebruikt om een adaptief formulier te maken. De sjabloon heeft vooraf geconfigureerde lay-outs, stijlen en initiële basisinhoudsstructuur.
Als u een formulier hebt gemaakt, worden wijzigingen in de oorspronkelijke structuur van de sjablooninhoud niet meer doorgevoerd in het formulier.
Standaard adaptieve formuliersjablonen default-adaptive-form-templates
AEM QuickStart bevat de volgende adaptieve formuliersjablonen:
- Eenvoudig: Hiermee kunt u een adaptief formulier met meerdere tabbladen maken met een lay-out voor tabbladen links, waar u tabbladen in willekeurige volgorde kunt bekijken.
- Basis met Acrobat Sign: Hiermee kunt u een formulier maken met meerdere tabbladen en wizard. Er wordt een lay-out met tabs links gebruikt waarmee u tabbladen in willekeurige volgorde kunt bezoeken. Voor ondertekening en verificatie worden Adobe Document Cloud-ontwerpservices gebruikt.
- Lege sjabloon: Hiermee kunt u een formulier maken zonder koptekst, voettekst en eerste inhoud. U kunt componenten toevoegen, zoals tekstvakken, knoppen en afbeeldingen. Met de lege sjabloon kunt u een formulier maken dat u kunt insluiten in AEM sitepagina's.
Deze sjablonen bevatten de sling:resourceType eigenschap ingesteld op de overeenkomende pagina-component. De paginacomponent geeft de CQ-pagina weer, die een adaptieve formuliercontainer bevat, die op zijn beurt weer een adaptief formulier maakt.
In de volgende tabel wordt de koppeling tussen sjablonen en paginacomponent opgesomd:
Een aangepaste formuliersjabloon maken met behulp van een sjablooneditor creating-an-adaptive-form-template-using-template-editor
U kunt de structuur en de initiële inhoud van een adaptief formulier opgeven met de Sjablooneditor. U wilt bijvoorbeeld dat alle formulierauteurs weinig tekstvakken, navigatieknoppen en een verzendknop in een inschrijvingsformulier hebben. U kunt een sjabloon maken die auteurs kunnen gebruiken om een formulier te maken dat consistent is met andere inschrijvingsformulieren. Met AEM Sjablooneditor kunt u:
- Koptekst- en voettekstcomponenten van een formulier toevoegen in de structuurlaag
- Geef de initiële inhoud voor het formulier op.
- Geef een thema op.
- Geef handelingen op, zoals Verzenden, Herstellen en Navigeren.
Zie voor meer informatie Sjablooneditor.
Een adaptieve formuliersjabloon maken op basis van CRXDE creating-an-adaptive-form-template-from-crxde
In plaats van de beschikbare sjablonen te gebruiken, kunt u een sjabloon maken en deze gebruiken om adaptieve formulieren te maken. Aangepaste sjablonen zijn gebaseerd op verschillende paginacomponenten die verwijzen naar aangepaste formuliercontainers en pagina-elementen, zoals kop- en voettekst.
U kunt deze componenten maken met de basispaginacomponent voor uw website. U kunt ook de paginacomponent van het adaptieve formulier uitbreiden die in de vaksjablonen wordt gebruikt.
Voer de volgende stappen uit om een douanemalplaatje, zoals simpleEnrollmentTemplate tot stand te brengen.
-
Navigeer naar CRXDE Lite op de ontwerpinstantie.
-
Maak onder de map /apps de mapstructuur voor uw toepassing. Als de toepassingsnaam bijvoorbeeld mijn bedrijf is, maakt u een map met deze naam. De toepassingsmap bevat doorgaans componenten, configuratie, sjablonen, bron en installatiemappen. In dit voorbeeld maakt u de mappen voor componenten, configuratie en sjablonen.
-
Navigeer naar de map /libs/fd/af/templates.
-
Kopieer de
simpleEnrollmentTemplateknooppunt. -
Navigeer naar de map /apps/mijnbedrijf/sjablonen. Klik er met de rechtermuisknop op en selecteer Paste.
-
Wijzig zo nodig de naam van het sjabloonknooppunt dat u hebt gekopieerd. Wijzig bijvoorbeeld de naam ervan in een inschrijfsjabloon.
-
Navigeer naar de locatie /apps/mijnbedrijf/sjablonen/inschrijvingssjabloon.
-
De
jcr:titleenjcr:descriptioneigenschappen voor dejcr:contentknoop om het malplaatje van het malplaatje te onderscheiden u kopieerde. -
De
jcr:contenthet knooppunt van de gewijzigde sjabloon bevat hetguideContainerenguideformtitlecomponenten.guideContaineris de container die het adaptieve formulier bevat. Deguideformtitlegeeft de toepassingsnaam, beschrijving enzovoort weer.In plaats van
guideformtitle, kunt u een aangepaste component of deparsyscomponent. Verwijder bijvoorbeeldguideformtitleen voegt u een aangepaste component of deparsyscomponentknooppunt. Zorg ervoor dat desling:resourceTypeeigenschap van de component verwijst naar de component en hetzelfde wordt gedefinieerd op de paginacomponent.jspbestand. -
Navigeer naar de locatie /apps/mijnbedrijf/sjablonen/inschrijving-sjabloon/jcr:content.
-
Open de Properties en wijzigt u de waarde van de optie
cq:designPatheigenschap aan /etc/designs/mijnbedrijf. -
Maak nu een /etc/designs/mycompany-knooppunt voor de
cq:Pagetype.
Een adaptief onderdeel van een formulierpagina maken create-an-adaptive-form-page-component
De aangepaste sjabloon heeft dezelfde opmaak als de standaardsjabloon, omdat de sjabloon verwijst naar de paginacomponent /libs/fd/af/components/page/base. U kunt de componentenverwijzing als bezit vinden sling:resourceType gedefinieerd op het knooppunt /apps/mijnbedrijf/sjablonen/inschrijving-sjabloon/jcr:content. Omdat de basis een kernproductcomponent is, wijzigt u deze component niet.
-
Navigeer naar het knooppunt /apps/mijnbedrijf/sjablonen/inschrijving-sjabloon/jcr:content en wijzig de waarde van de eigenschap
sling:resourceTypenaar /apps/mijnbedrijf/componenten/pagina/inschrijfpagina -
Kopieer het knooppunt /libs/fd/af/components/page/base naar de map /apps/mijnbedrijf/componenten/pagina.
-
De naam van de gekopieerde component wijzigen in
enrollmentpage. -
(Alleen als u al een inhoudspagina hebt) Voer de volgende stappen (a-d) uit als u een bestaande
contentpagecomponent voor uw website. Als u geen bestaandecontentpagekunt u de component voor uw websiteresourceSuperTypeeigenschap om naar de OOTB-basispagina te verwijzen.-
Voor de
enrollmentpagenode, waarde instellen voor eigenschapsling:resourceSuperTypenaar mijnbedrijf/componenten/pagina/inhoudspagina. Decontentpageis de basispaginacomponent voor uw site. Andere paginacomponenten kunnen het uitbreiden. Scriptbestanden verwijderen onderenrollmentpage, behalvehead.jsp,content.jsp, enlibrary.jsp. Desling:resourceSuperTypecomponent, diecontentpagein dit geval, omvat al dergelijke manuscripten. Kopteksten, inclusief navigatiebalk en voettekst, worden overgenomen van decontentpagecomponent. -
Het bestand openen
head.jsp.Het JSP-bestand bevat de regel
<cq.include script="library.jsp"/>.De
library.jspbevat het bestandguide.theme.simpleEnrollmentclientbibliotheek, die de opmaak voor het adaptieve formulier bevat.De component page
enrollmentpageheeft een exclusievehead.jspbestand dat hethead.jspvan hetcontentpagecomponent. -
Alle scripts opnemen in het dialoogvenster
head.jspbestand voor decontentpageaan dehead.jspbestand voor deenrollmentpagecomponent. -
In de
content.jsp, kunt u extra pagina-inhoud of verwijzingen naar andere componenten toevoegen die worden opgenomen wanneer een pagina wordt gerenderd. Als u bijvoorbeeld de aangepaste component toevoegtapplicationformheader, zorg ervoor dat u de volgende verwijzing naar de component in het JSP dossier toevoegt:<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>Op dezelfde manier als u een
parsysneemt ook de aangepaste component op in de sjabloonknooppuntstructuur.
-
Een adaptieve formulierclientbibliotheek maken creating-an-adaptive-form-client-library
De head.jsp van het enrollmentpage component voor de nieuwe sjabloon bevat een clientbibliotheek guide.theme.simpleEnrollment. De standaardsjabloon gebruikt deze clientbibliotheek ook. Wijzig de stijl in de nieuwe sjabloon op een van de volgende manieren:
- Een aangepast thema definiëren en het standaardthema vervangen
guide.theme.simpleEnrollmentmet het aangepaste thema. - Definieer een nieuwe clientbibliotheek onder /etc/designs/mijnbedrijf. Neem de clientbibliotheek op na het standaardthemaitem in de jsp-pagina. Neem alle overschreven stijlen en extra JavaScript-bestanden op in deze clientbibliotheek.