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 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.
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 on 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.