Creating a custom profile for HTML5 forms

Last update: June 24, 2024

Topics:
HTML5 Forms,Mobile Forms

CREATED FOR:

Admin
User
Developer

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

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

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

formBody.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 lets you add scripts that are used only for user interaction.

Creating Custom Profiles

To create a custom profile, perform the following steps:

Create Profile Node

Navigate to the CRX DE interface at the URL: https://'[server]:[port]'/crx/de and log in to the interface with administrator credentials.
In the left pane, navigate to the location /content/xfaforms/profiles.
Copy the node default, and paste the node in different folder (/content/profiles) with name hrform.
Select the new node, hrform, and add a string property: sling:resourceType with value: hrform/demo.
Click Save All in toolbar menu to save the changes.

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.

In the left pane, navigate to the /apps folder.
Right-click the /apps folder and choose to create a folder with name hrform.
Insider the hrform folder create a folder named demo.
Click the Save All button.
Navigate to /libs/xfaforms/profile/html.jsp and copy the node html.jsp.
Paste html.jsp node into the /apps/hrform/demo folder created above with same name html.jsp and click Save.
If you have any other components of profile script, follow step 1-6 to copy the components in /apps/hrform/demo folder.
To verify that th profile is created, open URL https://'[server]:[port]'/content/xfaforms/profiles/hrform.html

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

recommendation-more-help