Understanding of AEM Client Side Libraries
An Adaptive Form template is specialized AEM Page Template, with certain properties and content structure that is used to create Adaptive Form. The template has preconfigured layouts, styles, and basic initial content structure.
Once you create a form, any changes to the original template content structure are not reflected in the form.
AEM QuickStart provides the following adaptive form templates:
These templates have the
sling:resourceType property set to the corresponding page component. The page component renders the CQ page, containing adaptive form container, which in turn renders adaptive form.
The following table enumerates the association between templates and page component:
You can specify the structure and initial content of an adaptive form using Template Editor. For example, you want all form authors to have few text boxes, navigation buttons, and a submit button in an enrollment form. You can create a template that authors can use to create a form that is consistent with other enrollment forms. AEM Template Editor lets you:
For more informtion, see Template Editor.
Instead of using the available templates, you can create a template and use it to create adaptive forms. Custom templates are based on various page components that reference adaptive form containers and page elements, such as header and footer.
You can create these components using the base page component for your website. Alternatively, you can extend the page component of the adaptive form that out of the box templates use.
Perform the following steps to create a custom template, such as simpleEnrollmentTemplate.
Navigate to CRXDE Lite on your authoring instance.
Under the /apps directory, create the folder structure for your application. For example, if the application name is mycompany, create a folder with this name. Typically, the application folder contains components, configuration, templates, src, and installation directories. For this example, create the components, configuration, and templates folders.
Navigate to the folder /libs/fd/af/templates.
Navigate to the folder /apps/mycompany/templates. Right-click it and select Paste.
If necessary, rename the template node you copied. For example, rename it as enrollment-template.
Navigate to the location /apps/mycompany/templates/enrollment-template.
jcr:description properties for the
jcr:content node to distinguish the template from the template you copied.
jcr:content node of the modified template contains the
guideContainer is the container that holds the adaptive form. The
guideformtitle component displays the application name, description, and so on.
guideformtitle, you can include a custom component or the
parsys component. For example, remove
guideformtitle, and add a custom component or the
parsys component node. Ensure that the
sling:resourceType property of the component references the component and the same is defined in the page
Navigate to the location /apps/mycompany/templates/enrollment-template/jcr:content.
Open the Properties tab and change the value of the
cq:designPath property to /etc/designs/mycompany.
Now create a /etc/designs/mycompany node for the
The custom template has the same styling as the default template because the template references the page component /libs/fd/af/components/page/base. You can find the component reference as the property
sling:resourceType defined at the node /apps/mycompany/templates/enrollment-template/jcr:content. Because base is a core product component, do not modify this component.
Navigate to the node /apps/mycompany/templates/enrollment-template/jcr:content and modify the value of the property
sling:resourceType to /apps/mycompany/components/page/enrollmentpage
Copy the node /libs/fd/af/components/page/base to the folder /apps/mycompany/components/page.
Rename the copied component to
(Only if you already have a contentpage) Perform the following steps (a-d), if you have an existing
contentpagecomponent for your website. If you do not have an existing
contentpagecomponent for your website, you can leave the
resourceSuperTypeproperty to point to the OOTB base page.
enrollmentpage node, set value of the property
sling:resourceSuperType to mycompany/components/page/contentpage. The
contentpage component is the base page component for your site. Other page components can extend it. Remove script files under
sling:resourceSuperType component, which is
contentpage in this case, includes all such scripts. Headers, including navigation bar and footer are inherited from the
Open the file
The JSP file contains the line
library.jsp file contains the
guide.theme.simpleEnrollment client library, which contains the styling for the adaptive form.
The page component
enrollmentpage has an exclusive
head.jsp file that overrides the
head.jsp file of the
Include all scripts in the
head.jsp file for the
contentpage component to the
head.jsp file for the
content.jsp script, you can add additional page content or references to other components that are included when a page renders. For example, if you add the custom component
applicationformheader, ensure that you add the following reference to the component in the JSP file:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
Similarly, if you add a
parsys component in the template node structure, also include the custom component.
head.jsp file of the
enrollmentpage component for the new template includes a client library
guide.theme.simpleEnrollment. The default template also uses this client library. Change the style in the new template using on of these methods:
guide.theme.simpleEnrollmentwith the custom theme.
Theme refers to a client library that is included in the page component used to render an adaptive form. The client library mainly governs the appearance of an adaptive form.