Navigate to the CRX DE interface at the URL: http://[server]:[port]/lc/crx/de and log in to the interface using admin/admin as the username/password.
Last updated on
Apr 27, 2021
|
Also applies to Adobe LiveCycle
Introduction
A Mobile Forms profile is a resource node in Apache Sling. It represents a customized version of Mobile Forms rendition service. You can use the Mobile Form Rendition service to customize appearance, behavior, and interactions of the Mobile Forms. A Profile node exists in the /content folder in the JCR repository. The node can be directly under the /content folder or any subfolder of the /content folder.
The Profile node has the sling:resourceSuperType property with default value of xfaforms/profile. The render script for the node is present in the /libs/xfaforms/profile folder. The Sling scripts are JSP scripts. These JSP Scripts serves 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 formBody.jsp, formRuntime.jsp, config.jsp, toolbar.jsp, nav_footer.jsp, and footer.jsp.
formRuntime.jsp
The formRuntime.jsp modules contains references to 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.
<%@ page import="java.util.ArrayList" %><%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%
%><%
String acceptLang = request.getHeader("accept-language");
if(acceptLang == null || "".equals(acceptLang.trim()))
acceptLang = "en-US";
acceptLang = acceptLang.trim();
String[] locales = acceptLang.split(",");
ArrayList<String> localeChainList = new ArrayList<String>();
for(int i=0; i<locales.length; i++)
{
String locale =locales[i];
if(locale.trim().startsWith("en") && !localeChainList.contains("en_US"))
localeChainList.add("en_US");
if(locale.trim().startsWith("de") && !localeChainList.contains("de_DE"))
localeChainList.add("de_DE");
if(locale.trim().startsWith("ja") && !localeChainList.contains("ja"))
localeChainList.add("ja");
if(locale.trim().startsWith("fr") && !localeChainList.contains("fr_FR"))
localeChainList.add("fr_FR");
}
String locale = "";
if (localeChainList.isEmpty())
locale = "en_US";
else
{
locale = localeChainList.get(0).trim();
}
request.setAttribute("xfaLocale",locale.replace("_",""));
%><%
%><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>LC Forms</title>
<cq:includeClientLib categories="xfaforms.I18N.${xfaLocale},xfaforms.profile.default" />
</head>
config.jsp
The config.jsp module contains the various configurations such as logging, proxy services, and behavior version. You can add your own configuration and widget customization in the config.jsp. You can add configurations such as custom widget registration in the config.jsp.
<%@ page session="false"
import="com.adobe.forms.service.LCFormsOptionService,
com.adobe.forms.admin.LCFormsAdminService
" %>
<%@ page import="org.apache.sling.settings.SlingSettingsService" %>
<%
%><%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%><%
%><sling:defineObjects/><%
%><%
LCFormsOptionService lcFormsOptionService = sling.getService(LCFormsOptionService.class);
//read debugDir to pass it along with server API endpoint -- use it for debugging.
String debugDir = lcFormsOptionService.get(slingRequest, "debugDir");
if(debugDir != null && !debugDir.isEmpty()) {
debugDir = "?debugDir="+debugDir;
}
else {
debugDir = "";
}
SlingSettingsService slingSettingsService = sling.getService(SlingSettingsService.class);
boolean isLCEmbedded = slingSettingsService.getRunModes().contains("livecycle");
//lcServerProxy that will handle forms server api requests and also submission...
String submitServiceProxy = lcFormsOptionService.get(slingRequest, "submitServiceProxy");
if(submitServiceProxy == null) //if running into lc embedded mode then append /lc
submitServiceProxy = (isLCEmbedded ? "/lc" : "") + "/bin/xfaforms/submitaction"+debugDir;
String logServiceProxy = lcFormsOptionService.get(slingRequest, "logServiceProxy");
if(logServiceProxy == null)
logServiceProxy = (isLCEmbedded ? "/lc" : "") + "/bin/xfaforms/logger";
String submitUrl = lcFormsOptionService.get(slingRequest, "submitUrl");
if(submitUrl == null)
submitUrl = "";
//to enable logging options...
LCFormsAdminService formsAdminService = sling.getService(LCFormsAdminService.class);
formsAdminService.setupLogging (slingRequest);
String originalVersion = formsAdminService.getOriginalVersion();
%><%
%><script>
//Set logger config for client side logging and troubleshooting --
window.formBridge.registerConfig("behaviorConfig", {
"originalVersion": <%=originalVersion%>
});
window.formBridge.registerConfig("LoggerConfig",
{
"on":"${loggingEnabled}",
"category":["xfa", "xfaView", "xfaPerf"],
"level":[${xfaLevel}, ${xfaViewLevel}, ${xfaPerfLevel}],
"type":"${loggerType}"
}
);
//config to specify endpoint for submission.You can add as many parameters as you want
window.formBridge.registerConfig("submitServiceProxyConfig",
{
"submitServiceProxy" : "<%=submitServiceProxy%>",
"logServiceProxy": "<%=logServiceProxy%>",
"submitUrl" : "<%=submitUrl%>"
}
);
</script>
toolbar.jsp
The toolbar.jsp contains code to create colored toolbar. To remove the toolbar, remove toolbar.jsp from the HTML.jsp
<%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%
%>
<div class="toolbarheader" style="display:inline-block;width:100%" role="toolbar">
<span id="toolbartext" class="toolbarformslogo"></span><span id="toolbartextinternal" class="toolbartext" style="line-height: 33px;">Please fill out the following form.</span>
<button id="toolbarhighlight" tabindex="1" role="button" aria-labelledby="toolbartext" class="toolbarfieldhighlight"><span class="toolbartext">Highlight Existing Fields</span></button>
<button id="toolbarloggerbtn" class="toolbarlogger" style="display: none"><span class="toolbartext">Send Logs</span></button>
</div>
formBody.jsp
The formBody.jsp module is for the HTML presentation of the XFA form.
<%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%>
<body id="formBody">
<sling:include resourceType="xfaforms/render"/>
</body>
nav_footer.jsp
Mobile Form only renders the first page of the form at first and then loads the pages on scroll to give faster loading experience. The nav_footer.jsp component contains all the styles and required elements to facilitate the subsequent loading the pages on scroll.
<footer>
<div class="pagingfooter" style="display:inline-block;width:100%" role="status">
<div id="loadingpage" style="width:100%;display:inline-block" align="center">
<span class="pageloadinglogo"></span>
<span class="pageloadtext" style="line-height: 33px;">Loading...</span>
<a class="pageloadnow" style="float:right" href="javascript:renderNextPage()"><span class="pageloadtext">--Load now--</span></a>
</div>
<div id="nomorepages" style="display: none;width:100%" align="center">
</span><span class="pageloadtext" style="line-height: 33px;">--No more pages--</span>
</div>
</div>
</footer>
footer.jsp
The footer.jsp module is empty. This module allows you to add scripts that are used only for user interaction.
Creating Custom Profiles
Create Profile Node
-
-
In the left pane, navigate to /content and create a folder named myprofiles.
-
Copy the profiles folder from /content/xfaforms/ to /content/myprofiles/.
-
In /content/myprofiles/profiles, rename the default node to 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 http://[server]:[port]/lc/content/profiles/hrform.html
Verify the updates
Perform following steps to render a form using Mobile Forms IVS with the custom profile:
-
Navigate to http://[server]:[port]/mobileformsivs.
-
Click Choose File, browse, and select the demo.xdp file and click OK.
-
Click Upload Files and List existing Forms. From list of forms, select the demo.xdp form.
-
From the profile field, select custom and add hrform to the textfield.
-
To render the form, click Render Form.
