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.
AEM form workspace provides capabilities to modify the presentation semantics and functionality of its interface. The types of customizations to change the style, layout, formatting, branding, and core functionality are described below.
AEM Forms workspace supports a wide variety of customizations to update the layout of the user interface, its appearance, functionality, and much more. The customizations involve updating one or more of the following:
You can change the appearance, layout, and other presentation semantics of AEM Forms workspace. Change workspace by customizing the CSS, HTML templates, and JavaScript™ files. All the default files are provided in the default installation.
The most commonly applicable steps are covered in Generic steps for AEM Forms workspace customization. For specific examples of such customizations, including the detailed steps, see the related articles at the end of this article.
Before customizing workspace, make yourself familiar with the default style sheet supplied with AEM Forms at /libs/ws/css/style.css.
To customize the workspace, it is recommended that you make yourself familiar with the existing style sheet, style.css, located in /libs/ws/css folder. A few prominent components are described below.
CSS element |
User interface component modified |
---|---|
#header |
Header of the AEM Forms workspace |
.categoryList |
Category list |
.categoryList .header |
Header of category list |
.categories, .filters |
Space below category list |
.category, .filter |
Category |
.category:hover, .category.selected, .filter:hover, .filter.selected |
Selected category and mouse over style of category |
categoryListBar .tool, categoryListBar .content |
Start process page (closed Category list) |
filterListBar .tool, filterListBar .content |
To Do page (closed Filter list) |
processNameListBar .tool, processNameListBar .content |
Tracking page (closed Process name list) |
.startPointList, .tasklist |
The startpoint list or the task list |
.startPointList .header, .tasklist .header |
The header of a startpoint list or a task list |
.startpoint.selected, .task.selected |
The selected startpoint or task |
.startpoint.selected .description, .task.selected .description |
Description of the selected startpoint or task |
#taskarea |
The Task area |
#header .dropdown |
User dropdown in header |
.sortDrop dd ul |
Sort task dropdown |
The appearance of AEM Forms workspace borrows its appearance from a CSS. By customizing the CSS, you can change the presentation semantics of workspace like fonts, colors, branding, and layout.
The top-level steps for CSS customization are:
html.jsp
.For the exact steps to do these customizations, see Generic steps for AEM Forms workspace customization. The CSS file shipped with AEM Forms workspace is at /libs/ws/css/. For CSS-related customizations, use the Ship Package. For specific examples of CSS-related customizations, see the related Help topics at the end of this article.
You can customize the AEM Forms workspace to add avatars of users or to add the logo of your organization. For these customizations, use Ship Package.
The top-level steps for customizations to the images are:
html.jsp
file.To get started with customizing the images in AEM Forms workspace, follow the Generic steps for AEM Forms workspace customization. For specific examples of image-related customizations, see the related Help topics at the end of this article.
HTML templates help define the appearance and the layout of the workspace user interface. By updating the default HTML templates you can customize the layout default user interface.
The top-level steps for customizations to the HTML template are:
For specific examples of such customizations, see the Help topics provided at the end of this article. Choose between the Ship Package or the Dev Package, depending on the template to be customized.
To modify the AEM Forms workspace functionality, change the JavaScript source code. Modifications in the core functionality are labeled as Semantic changes. You modify models, view, and templates provided as part of the source code of AEM Forms workspace.
The top-level steps to do semantic changes to modify the functionality of AEM Forms workspace are:
For more conceptual information about the components that are part of the source code, see the Description of reusable components. For these customizations, use the Dev Package.
As AEM Forms workspace is a component-based software, it can be easily customized and reused. You can easily integrate the workspace components with your web applications.
For more conceptual information, see the Description of reusable components and for instruction about using the components, see Integrating AEM Forms workspace components in web applications.
The package contains the source code of AEM Forms workspace. The package is available at [*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip
.
It is primarily meant for customizations, as it provides the capability to generate:
client-pkg:
client-html:
assembly - Contains zip.xml used by script for creating AEM Forms workspace SDK.
src/main/webapp -
css - Contains style sheets for AEM Forms workspace.
images - Contains images used in AEM Forms workspace.
js:
libs - Contains all third-party libraries used in AEM Forms workspace.
licenses - Contains licenses for HTML and JS files as well as code to prefix these licenses to respective source files.
minifier - Used for combination, minification, and uglification of customized javascript code.
resourcejs_optimizer - Used for combination, minification, and uglification of javascript source.
resource_generator - Used for generating register.js and modelcontrollerpath.js.
runtime:
main.js
router.js
libs/ws: pdf.html and pluginPing.pdf are used for loading PDF forms in AEM Forms workspace and WSNextAdapter.swf is used to load SWF forms and Guides in AEM Forms workspace.
locales:
html.jsp
GET.jsp
CRX package can be deployed on the CRX™ repository. It is available at [*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip
.
This package can be built using the three profiles described below.
Profile | Description | Usage |
---|---|---|
Ship profile | This profile creates a CRX package of the smallest possible size using minification. This package is the most efficient. All the JavaScript™ files are combined and minified into a single JS file. | Use this profile when no further semantic changes are required in JS files. |
Debug profile | This profile creates a moderately efficient CRX package. The size of the package is slightly more than the package created using Ship profile. This package has most of the JavaScript files combined into a single JS file. | Use this profile for debugging. |
Dev profile | This profile creates a CRX package of the largest possible size. All the JavaScript files are available separately, as they are in SDK package. | Use this profile when incorporating semantic changes. |
css - Contains style.css, ie.css, and jquery-ui.css.
images - Contains all images.
js:
libs:
runtime:
main.js (combined, minified, and uglified).
registry.js
libs:
Locale - Contains .content.xml.
locales:
Index - Contains .content.xml
profile - Contains offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml
css - Contains style.css, ie.css, and jqueri-ui.css.
images - Contains all images.
js:
libs:
runtime:
main.js (combined).
registry.js
libs:
Locale - Contains .content.xml.
locales:
Index - Contains .content.xml
profile - Contains offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml
mvn clean -P Dev install on client-pkg
css - Contains style.css, ie.css, and jqueri-ui.css.
images - Contains all images.
js:
libs - Contains all libraries used in AEM Forms workspace.
require - Contains require.js
jqueryui - Contains jquery.ui.datepicker.ja.js
runtime:
main.js
registry.js
router.js
libs:
Locale - Contains .content.xml.
locales:
Index - Contains .content.xml
profile - Contains offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml