Integrating AEM Forms workspace components in web applications

Log into CRXDE Lite environment at https://'[server]:[port]'/lc/crx/de/. Ensure that you have an AEM Forms workpace dev package installed.

Create a path /apps/sampleApplication/wscomponents.

Copy css, images, js/libs, js/runtime, and js/registry.js

• from /libs/ws
• to /apps/sampleApplication/wscomponents.

Create a demomain.js file inside /apps/sampleApplication/wscomponents/js folder. Copy code from /libs/ws/js/main.js into demomain.js.

In demomain.js, remove the code to initialize Router and add the following code:

require(['initializer','runtime/util/usersession'],
    function(initializer, UserSession) {
        UserSession.initialize(
            function() {
                // Render all the global components
                initializer.initGlobal();
            });
    });

Create a node under /content by name sampleApplication and type nt:unstructured. In the properties of this node add sling:resourceType of type String and value sampleApplication. In the Access Control List of this node add an entry for PERM_WORKSPACE_USER allowing jcr:read privileges. Also, in the Access Control List of /apps/sampleApplication add an entry for PERM_WORKSPACE_USER allowing jcr:read privileges.

In /apps/sampleApplication/wscomponents/js/registry.js update paths from /lc/libs/ws/ to /lc/apps/sampleApplication/wscomponents/ for template values.

In your portal home page JSP file at /apps/sampleApplication/GET.jsp, add the following code to include the required components inside the portal.

<script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js"></script>
<div class="UserInfoView gcomponent" data-name="userinfo"></div>
<div class="filterListView gcomponent" data-name="filterlist"></div>
<div class="taskListView gcomponent" data-name="tasklist"></div>

Also include the CSS files required for the AEM Forms workspace components.

NOTE

Each component is added to the component tag (having class gcomponent) while rendering. Ensure that your home page contains these tags. See the html.jsp file of AEM Forms workspace to know more about these base control tags.

To customize the components, you may extend the existing views for the required component as follows:

define([
    'jquery',
    'underscore',
    'backbone',
    'runtime/views/userinfo'],
    function($, _, Backbone, UserInfo){
        var demoUserInfo = UserInfo.extend({
            //override the functions to customize the functionality
            render: function() {
                UserInfo.prototype.render.call(this); // call the render function of the super class
                …
                //other tasks
                …
            }
        });
        return demoUserInfo;
});

Modify the portal CSS to configure the layout, positioning, and style of the required components on your portal. For instance you would like to keep background color as black for this portal to view userInfo component well. You can do this by changing background color in /apps/sampleApplication/wscomponents/css/style.css as follows:

body {
    font-family: "Myriad pro", Arial;
    background: #000;    //This was origianlly #CCC
    position: relative;
    margin: 0 auto;
}