Integrating AEM Forms workspace components in web applications integrating-aem-forms-workspace-components-in-web-applications

You can use AEM Forms workspace components in your own web application. The following sample implementation uses components from an AEM Forms 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 TaskListcomponents inside a web portal.

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

  2. Create a path /apps/sampleApplication/wscomponents.

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

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

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

    code language-javascript
        function(initializer, UserSession) {
                function() {
                    // Render all the global components
  6. 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.

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

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

    code language-jsp
    <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 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.
  9. To customize the components, you may extend the existing views for the required component as follows:

    code language-javascript
        function($, _, Backbone, UserInfo){
            var demoUserInfo = UserInfo.extend({
                //override the functions to customize the functionality
                render: function() {
          ; // call the render function of the super class
                    //other tasks
            return demoUserInfo;
  10. 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:

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