Generic steps for AEM Forms workspace customization

The generic steps to perform any customizations are:

  1. Log in to CRXDE Lite by accessing https://[server]:[port]/lc/crx/de/index.jsp.

  2. Create a folder named wsat /apps, if it does not exist. Click Save All.

  3. Browse to /apps/ws, and navigate to the Access Control tab.

  4. In the Access Control list, click + to add a new entry. Click + again.

  5. Search and select the PERM_WORKSPACE_USER Principal.

    Select PERM_WORKSPACE_USER principal as part of the generic steps to customize HTML Workspace

  6. Give jcr:read privilege to the Principal.

  7. Click Save All.

  8. Copy the GET.jsp and html.jspfiles from the /libs/wsfolder to the /apps/ws folder.

  9. Copy the /libs/ws/locales folder in the /apps/ws folder. Click Save All.

  10. Update the references and relative paths in the GET.jsp file, as shown below, and click Save all.

    <meta http-equiv="refresh" content="0;URL='/lc/apps/ws/index.html'" />
    
  11. Do the following for CSS customizations:

    1. Navigate to the /apps/ws folder and create a new folder named css.
    2. In the cssfolder folder, create a new file named newStyle.css.
    3. Open /apps/ws/html.jsp and change from
    <link lang="en" rel="stylesheet" type="text/css" href="css/style.css" />
    <link lang="en" rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
    

    to

    <link lang="en" rel="stylesheet" type="text/css" href="../../libs/ws/css/style.css" />
    <link lang="en" rel="stylesheet" type="text/css" href="css/newStyle.css" />
    <link lang="en" rel="stylesheet" type="text/css" href="../../libs/ws/css/jquery-ui.css"/>
    
    NOTE

    Place the entry of the user-defined CSS file after the entry of newStyle.css, as shown above.

  12. In the /apps/ws/html.jsp file, change from

    <script data-main="js/main" src="js/libs/require/require.js"></script>
    

    to

    <script data-main="js/main" src="../../libs/ws/js/libs/require/require.js"></script>
    
  13. Do the following:

    1. Create a folder named jsat /apps/ws. Click Save All.
    2. Create a folder named libsat /apps/ws/js. Click Save All.
    3. Create a folder named jqueryuiat /apps/ws/js/libs. Click Save All.
    4. Copy /libs/ws/js/libs/jqueryui/jquery.ui.datepicker-ja.js to /apps/ws/js/libs/jqueryui. Click Save All.
  14. Do the following for HTML customizations:

    1. Under /apps/ws/js, create a folder named runtime. Click Save All.
    2. Under /apps/ws/js/runtime, create a folder named templates. Click Save All.
    3. Copy /libs/ws/js/main.js to /apps/ws/js/main.js.
    4. Copy /libs/ws/js/registry.js to /apps/ws/js/registry.js.
  15. Click Save All, clear cache, and refresh AEM Forms workspace.

    Access the URL https://[server]:[port]/lc/ws and log in with administrator/password credentials. The browser redirects to https://[server]:[port]/lc/apps/ws/index.html.

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now