Generic steps for AEM Forms workspace customization

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

Create a sling:Folder folder that is named ws at /apps, if it does not exist. To create a sling:Folder folder, right-click the apps folder and select Create > Create Node. Specify the name as ws, select type as sling:Folder, and click OK. Click Save All.

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

Select the Repository option. In the Access Control list, click + to add an entry. Click + again.

Search and select the PERM_WORKSPACE_USER Principal.

Give jcr:read privilege to the Principal.

Click Save All.

Copy the GET.jsp, index, and html.jsp files from the /libs/ws folder to the /apps/ws folder.

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

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

Do the following for CSS customizations:

1. Navigate to the /apps/ws folder and create a folder named css.

2. In the css folder, create a 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 style.css, as shown above.

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>

Do the following:

1. Create a folder named js at /apps/ws. Click Save All.

2. Create a folder named libs at /apps/ws/js. Click Save All.

3. Copy /libs/ws/js/libs/jqueryui folder to /apps/ws/js/libs. Click Save All.

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.

Click Save All, clear the cache, and refresh the 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.