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
simpleEnrollmentTemplate
knooppunt. -
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:title
enjcr:description
eigenschappen voor dejcr:content
knoop om het malplaatje van het malplaatje te onderscheiden u kopieerde. -
De
jcr:content
het knooppunt van de gewijzigde sjabloon bevat hetguideContainer
enguideformtitle
componenten.guideContainer
is de container die het adaptieve formulier bevat. Deguideformtitle
geeft de toepassingsnaam, beschrijving enzovoort weer.In plaats van
guideformtitle
, kunt u een aangepaste component of deparsys
component. Verwijder bijvoorbeeldguideformtitle
en voegt u een aangepaste component of deparsys
componentknooppunt. Zorg ervoor dat desling:resourceType
eigenschap van de component verwijst naar de component en hetzelfde wordt gedefinieerd op de paginacomponent.jsp
bestand. -
Navigeer naar de locatie /apps/mijnbedrijf/sjablonen/inschrijving-sjabloon/jcr:content.
-
Open de Properties en wijzigt u de waarde van de optie
cq:designPath
eigenschap aan /etc/designs/mijnbedrijf. -
Maak nu een /etc/designs/mycompany-knooppunt voor de
cq:Page
type.
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:resourceType
naar /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
contentpage
component voor uw website. Als u geen bestaandecontentpage
kunt u de component voor uw websiteresourceSuperType
eigenschap om naar de OOTB-basispagina te verwijzen.-
Voor de
enrollmentpage
node, waarde instellen voor eigenschapsling:resourceSuperType
naar mijnbedrijf/componenten/pagina/inhoudspagina. Decontentpage
is de basispaginacomponent voor uw site. Andere paginacomponenten kunnen het uitbreiden. Scriptbestanden verwijderen onderenrollmentpage
, behalvehead.jsp
,content.jsp
, enlibrary.jsp
. Desling:resourceSuperType
component, diecontentpage
in dit geval, omvat al dergelijke manuscripten. Kopteksten, inclusief navigatiebalk en voettekst, worden overgenomen van decontentpage
component. -
Het bestand openen
head.jsp
.Het JSP-bestand bevat de regel
<cq.include script="library.jsp"/>
.De
library.jsp
bevat het bestandguide.theme.simpleEnrollment
clientbibliotheek, die de opmaak voor het adaptieve formulier bevat.De component page
enrollmentpage
heeft een exclusievehead.jsp
bestand dat hethead.jsp
van hetcontentpage
component. -
Alle scripts opnemen in het dialoogvenster
head.jsp
bestand voor decontentpage
aan dehead.jsp
bestand voor deenrollmentpage
component. -
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
parsys
neemt 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.simpleEnrollment
met 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.