Een aangepaste aangepaste formuliersjabloon maken creating-a-custom-adaptive-form-template
Vereisten prerequisites
-
Het begrip van het Malplaatje van de Pagina van AEM 🔗 en Aangepaste Authoring van de Vorm
-
Begrip van de Zijbibliotheken van de Cliënt van AEM 🔗
Adaptief formuliersjabloon adaptive-form-template
Een adaptieve formuliersjabloon is een speciale 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 biedt de volgende adaptieve formuliersjablonen:
- Beoordelingssjabloon: hiermee kunt u één pagina adaptief formulier maken met de indeling Responsief waarin meerdere kolommen zijn geconfigureerd. De indeling wordt automatisch aangepast op basis van de afmetingen van de verschillende schermen waarop u het formulier wilt weergeven.
- Eenvoudige inschrijfsjabloon: hiermee kunt u in meerdere stappen een adaptief formulier maken met een wizardindeling. In deze lay-out, kunt u een uitdrukking van de stapvoltooiing voor elke stap specificeren, die wordt bevestigd alvorens de tovenaar aan de volgende stap te werk gaat.
- Sjabloon voor inschrijving met tabbladen: hiermee kunt u een adaptief formulier met meerdere tabbladen maken in een lay-out die links wordt weergegeven en waarin u tabbladen in willekeurige volgorde kunt bezoeken.
- Geavanceerd inschrijfsjabloon: 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. Het lege malplaatje laat u een vorm tot stand brengen die u in de pagina's van de Plaats van AEM kunt inbedden.
Voor deze sjablonen is de eigenschap sling:resourceType 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 de 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.
Voor meer informatie, zie Redacteur van het Malplaatje .
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 het knooppunt
simpleEnrollmentTemplate. -
Ga 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.
-
Wijzig de eigenschappen
jcr:titleenjcr:descriptionvoor het knooppuntjcr:contentom de sjabloon te onderscheiden van de sjabloon die u hebt gekopieerd. -
Het knooppunt
jcr:contentvan de gewijzigde sjabloon bevat de componentenguideContainerenguideformtitle.guideContaineris de container die het adaptieve formulier bevat. De componentguideformtitlegeeft de toepassingsnaam, beschrijving enzovoort weer.In plaats van
guideformtitlekunt u een aangepaste component of deparsys-component opnemen. Verwijder bijvoorbeeldguideformtitleen voeg een aangepaste component of het componentknooppuntparsystoe. Controleer of de eigenschapsling:resourceTypevan de component verwijst naar de component en of hetzelfde is gedefinieerd in het paginacomponent.jsp-bestand. -
Navigeer naar de locatie /apps/mijnbedrijf/sjablonen/inschrijving-sjabloon/jcr:content.
-
Open het tabblad Properties en wijzig de waarde van de eigenschap
cq:designPathin /etc/designs/mijnbedrijf. -
Maak nu een /etc/designs/mycompany-knooppunt voor het
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. De componentverwijzing is de eigenschap sling:resourceType die is gedefinieerd in het knooppunt /apps/mijnbedrijf/sjablonen/inschrijfnummer-sjabloon/jcr:content. Omdat de basis een kernproductcomponent is, wijzigt u deze component niet.
-
Ga naar het knooppunt /apps/mijnbedrijf/sjablonen/inschrijving-sjabloon/jcr:content en wijzig de waarde van de eigenschap
sling:resourceTypein /apps/mijnbedrijf/componenten/pagina/inschrijfpagina -
Kopieer het knooppunt /libs/fd/af/components/page/base naar de map /apps/mijnbedrijf/componenten/pagina.
-
Wijzig de naam van de gekopieerde component in
enrollmentpage. -
(Slechts als u reeds een inhoudspagina hebt) voer de volgende stappen (a-d) uit, als u een bestaande
contentpagecomponent voor uw website hebt. Als u geen bestaandecontentpagecomponent voor uw website hebt, kunt u hetresourceSuperTypebezit verlaten om aan de uit-van-de-doos basispagina te richten.-
Stel voor het knooppunt
enrollmentpagede waarde van de eigenschapsling:resourceSuperTypein op mijnbedrijf/componenten/pagina/inhoudspagina. De componentcontentpageis de basispaginacomponent voor uw site. Andere paginacomponenten kunnen het uitbreiden. Verwijder scriptbestanden onderenrollmentpage, behalvehead.jsp,content.jspenlibrary.jsp. De componentsling:resourceSuperType, die in dit gevalcontentpageis, bevat dergelijke scripts. Kopteksten, waaronder navigatiebalk en voettekst, worden overgenomen van de componentcontentpage. -
Open het bestand
head.jsp.Het JSP-bestand bevat de regel
<cq.include script="library.jsp"/>.Het bestand
library.jspbevat deguide.theme.simpleEnrollment-clientbibliotheek, die de opmaak voor het adaptieve formulier bevat.De pagina-component
enrollmentpageheeft een exclusiefhead.jsp-bestand dat hethead.jsp-bestand van decontentpage-component overschrijft. -
Neem alle scripts in het
head.jsp-bestand op voor decontentpage-component naar hethead.jsp-bestand voor deenrollmentpage-component. -
In het
content.jsp-script kunt u aanvullende pagina-inhoud of verwijzingen toevoegen naar andere componenten die worden opgenomen wanneer een pagina wordt gerenderd. Als u bijvoorbeeld de aangepaste componentapplicationformheadertoevoegt, moet u de volgende verwijzing naar de component in het JSP-bestand toevoegen:<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>Als u een component
parsystoevoegt in de sjabloonknooppuntstructuur, neemt u ook de aangepaste component op.
-
Een adaptieve formulierclientbibliotheek maken creating-an-adaptive-form-client-library
Het head.jsp -bestand van de 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:
- Definieer een aangepast thema en vervang het standaardthema
guide.theme.simpleEnrollmentdoor 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.