Generic steps for AEM Forms workspace customization


AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

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"/>


    <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"/>

    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>


    <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