Integrating HTML Workspace components in web applications

Last updated on Apr 27, 2021 | Also applies to Adobe LiveCycle

You can use HTML workspace components in your own web application. The following sample implementation uses components from an HTML workspace dev package installed on a CRX™ instance to create a web application. Customize the solution below to suit your specific needs. The sample implementation reuses UserInfo, FilterList, and TaskList components inside a web portal.

Log into CRXDE Lite environment at http://[server]:[port]/lc/crx/de/. Ensure that you have a HTML 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 HTML 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 HTML 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;
}
```

Get help faster and easier

New user?

Integrating HTML Workspace components in web applications

More like this

Get help faster and easier

Ask the Community

Contact Us