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.

   

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.