Generic steps for AEM Forms workspace customization generic-steps-for-aem-forms-workspace-customization
The generic steps to perform any customization are:
-
Log in to CRXDE Lite by accessing
https://'[server]:[port]'/lc/crx/de/index.jsp
. -
Create a
sling:Folder
folder that is namedws
at/apps
, if it does not exist. To create asling:Folder
folder, right-click theapps
folder and select Create > Create Node. Specify the name asws
, select type assling: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
, andhtml.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.code language-javascript <meta http-equiv="refresh" content="0;URL='/lc/apps/ws/index.html'" />
-
Do the following for CSS customizations:
-
Navigate to the
/apps/ws
folder and create a folder namedcss
. -
In the
css
folder, create a file namednewStyle.css
. -
Open
/apps/ws/html
.jsp and change from
code language-javascript <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-javascript <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 style.css, as shown above. -
-
In the /apps/ws/html.jsp file, change from
code language-jsp <script data-main="js/main" src="js/libs/require/require.js"></script>
to
code language-jsp <script data-main="js/main" src="../../libs/ws/js/libs/require/require.js"></script>
-
Do the following:
-
Create a folder named
js
at/apps/ws
. Click Save All. -
Create a folder named
libs
at/apps/ws/js
. Click Save All. -
Copy
/libs/ws/js/libs/jqueryui
folder to/apps/ws/js/libs
. Click Save All.
-
-
Do the following for HTML customizations:
-
Under
/apps/ws/js
, create a folder namedruntime
. Click Save All. -
Under
/apps/ws/js/runtime
, create a folder namedtemplates
. Click Save All. -
Copy
/libs/ws/js/main.js
to/apps/ws/js/main.js
. -
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 tohttps://'[server]:[port]'/lc/apps/ws/index.html
.