Creating a custom profile for HTML5 forms creating-a-custom-profile-for-html-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.

formRuntime.jsp formruntime-jsp-br

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 customJavaScript libs or styles in the formRuntime.jsp.

config.jsp config-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.

toolbar.jsp toolbar-jsp

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

formBody.jsp formbody-jsp

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

nav_footer.jsp nav-footer-jsp

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.

footer.jsp footer-jsp

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

Creating Custom Profiles creating-custom-profiles

To create a custom profile, perform the following steps:

Create Profile Node create-profile-node

Create the profile renderer script create-the-profile-renderer-script

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.