DocumentationAEM 6.4Forms Guide

Generic steps for AEM Forms workspace customization generic-steps-for-aem-forms-workspace-customization

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
CAUTION
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.

    code language-none 
    <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
    code language-css 
    <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

    code language-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"/>
    note note
    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

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

    to

    code language-css 
    <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.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da