Creating a custom profile for HTML5 forms

A profile is a resource node in Apache Sling. It represents custom version of HTML5 forms rendition service. You can use the HTML5 forms Rendition service to customize appearance, behavior, and interactions of the HTML5 forms. A profile node exists in the /content folder in the JCR repository. You can place the node directly under the /content folder or any subfolder of the /content folder.

The profile node has the sling:resourceSuperType property and the default value is xfaforms/profile. The render script for the node is at /libs/xfaforms/profile. 

The Sling scripts are JSP scripts. These JSP scripts serve as containers for putting together the HTML for requested form and the required JS / CSS artifacts. These Sling scripts are also referred as Profile Renderer scripts. The profile renderer calls  the Forms OSGi service to render the requested form.

The profile script is in html.jsp and html.POST.jsp for GET and POST requests. You can copy and modify one or more files to override and add your customizations. Do not make any in-place changes, the patch update overwrites such changes.

A profile contains various modules. The modules are formRuntime.jsp, config.jsp, toolbar.jsp, formBody.jsp, nav_footer.jsp, and footer.jsp.

The formRuntime.jsp modules contains references of the client libraries. It also depicts methods to extract locale information from the request and include the localized messages in the request. You can include own custom javascript libs or styles in the formRuntime.jsp. 

The config.jsp module contains various configurations such as logging, proxy services, and behavior version. You can add your own configuration and widget customization to the config.jsp module. You can also add configurations such as custom widget registration to the config.jsp module. 

The toolbar.jsp contains code to create colored toolbar. To remove the toolbar, remove toolbar.jsp from the HTML.jsp

The formBody.jsp module is for the HTML representation of the XFA form.

At first, the HTML5 form renders only the first page of the form. When a user scrolls the form, then the rest of the forms is loaded. It makes the loading experience faster. The nav_footer.jsp component contains all the styles and required elements to facilitate loading of the pages on scroll.

The footer.jsp module is an empty. It allows you to add scripts that are used only for user interaction.

To create a custom profile, perform the following steps: 

After creating a custom profile, add render information to this profile. On receiving a request for the new profile, CRX verifies the existence of the /apps folder for the JSP page to be rendered. Create the JSP page in the /apps folder.

To verify your forms, Import your forms from your local file system to AEM Forms and preview the form on AEM server author instance.