Create custom Mobile Form profile

Mobile Form renders the form based on profile. If you want to change the look and feel or do other customization, you are required to make modifications in the default profile. In ES4, Mobile Form profile script was one single monolithic jsp file. So if you want to modify the profile script you have to copy the whole script and then make the changes as suggested in ES4 Adobe documentation. This way, you loose the updates provided in the script over different patches.

With ES4 SP1, we have modularized the various constituents of profile renderer instead of one monolithic profile. The profile script is still html.jsp and html.POST.jsp for GET and POST requests. One can choose to override or add his customization by copying and modifying one or more files. It is not recommended to modify any of the files in place or you will loose the changes after a patch.

You should create an application directory in /apps space and copy html.jsp and other files you want to modify. Before delving into the steps of customization, I will discuss the changed structure of html.jsp.

html.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page session="false"
               contentType="text/html; charset=utf-8"%><%
%><%@ taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%
%><!DOCTYPE html>
<html manifest="${param.offlineSpec}">
    <head>
        <cq:include script="formRuntime.jsp"/>
    </head>
    <body id="formBody">
        <!--
        add pdf like toolbar to your profile page
        this same toolbar is use for showing browser support warning..
        -->
        <cq:include script="../toolbar/toolbar.jsp"/>
        <cq:include script="config.jsp"/>
        <!-- Form body -->
        <cq:include script="formBody.jsp"/>
        <!  --To assist in page transitions -- add navigation, based on scrolling -->
        <cq:include  script="../nav/scroll/nav_footer.jsp"/>
        <cq:include script="footer.jsp"/>
    </body>
</html>

As you can see html.jsp is just serves as composition jsp. Now customization means, you need to create new components and add them into the appropriate section of html.jsp.

In subsequent sections, I will explore all the components of html.jsp in detail.

formRuntime.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<%@ 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("_",""));
%><%
%>
<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" />

As you can see it contains the references to the client libraries to include. It also depicts how one can extract locale information from the request and include the localized messages related to Mobile Forms runtime. You can create a JSP like this to include your own scripts and styles and add it to the head section of html.jsp.

config.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<%@ 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>

As you can see this component of profile contains the various configurations like logging, proxy services, behaviour version etc. If you want to add you own config then this is the place. You can add various configurations like custom widget registration etc just like this in a JSP of your own.

toolbar.jsp

1
2
3
4
5
6
7
<%@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>

This component is responsible for the red coloured toolbar you notice at the top. In case you want to get rid of the toolbar, you can remove this from the html.jsp.

formBody.jsp

1
2
<%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%>
<sling:include resourceType="xfaforms/render"/>

This component is for the html presentation of the XFA form. As shown in html.jsp, you can include this component in the body section of the html.

nav_footer.jsp

1
2
3
4
5
6
7
8
9
10
11
12
<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>

Mobile Form only renders the first page of the form at first and then subsequently load the pages on scroll to give faster loading experience. This component contains all the styles and required elements to facilitate this.

footer.jsp

1
<!-- Empty for now -->

This is empty for now. But in case you want to add any scripts that is used in user interaction only then you should include that in this section.

Creating Custom profile

Now that we understand what all components does then one can choose to modify a component. Here are the steps on how to create a custom profile.

Creating profile node:

Note: The name of the newly created folders (hrform and demo) can be anything as per your preference.

  1. Navigate to the CRX DE interface at the URL: http://<server>:<port>/lc/crx/de and log in to the interface with administrator credentials.
  2. In the left pane, navigate to the location: /content/xfaforms/profiles.
  3. Copy the node default, and paste the node in different folder e.g. (/content/yourapp/profiles) with the name: hrform.
  4. Select the new node, hrform, and add a string property: sling:resourceType with value: hrform/demo.
  5. Click Save All in toolbar menu to save the changes.

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

  1. In the left pane, navigate to the /apps folder.
  2. Right-click on the /apps folder and choose to create a folder with name: hrform.
  3. Insider the hrform folder create a folder: demo.
  4. Click the Save All button.
  5. Navigate to /libs/xfaforms/profile/html.jsp and copy the node html.jsp.
  6. Paste html.jsp node into the /apps/hrform/demo folder created above with same name html.jsp and click Save.
  7. You copy any of the other components of profile script as described above and paste it in the same folder.

Verifying the updates

Render a form using Mobile Forms IVS with the custom profile:

  1. Navigate to http://localhost:8080/mobileformsivs.
  2. Choose and update the form demo.xdp.
  3. Select the demo.xdp form. Choose Custom in profile, and specify hrform as the profile name.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ three = 12

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>