Introduction to Customizing HTML Workspace

Search

HTML 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.

An example of a customized Workspace

Types of customizations

HTML 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:

  • Appearances of the user interface
  • Functionality using semantic customizations
  • Reusing HTML components in other applications

User interface changes

You can change the appearance, layout, and other presentation semantics of HTML 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 HTML Workspace customization. For specific examples of such customizations, including the detailed steps, see the related articles at the end of this article.

Understanding the style sheet

Before customizing Workspace, make yourself familiar with the default style sheet supplied with Adobe® LiveCycle® 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 HTML 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

CSS

The appearance of HTML 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:

  • Create a CSS file.
  • Add style items to this CSS. See Understanding CSS Styles for more information.
  • Update its references in html.jsp.

For the exact steps to do these customizations, see Generic steps for HTML Workspace customization. The CSS file shipped with HTML 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.

Image

You can customize the HTML 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:

  • Install and configure WebDAV.
  • Add new images.
  • Add new styles corresponding to the added images.
  • Link to the new CSS file in html.jsp file.

To get started with customizing the images in HTML Workspace, follow the Generic steps for HTML Workspace customization. For specific examples of image-related customizations, see the related Help topics at the end of this article.

HTML template

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:

  • In a user-created folder, make copies of the required default files.
  • Add new templates in user-defined folder.
  • Make relevant updates to the copied files like, the path of the new template.

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.

Semantic changes

To modify the HTML 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 HTML Workspace.

The top-level steps to do semantic changes to modify the functionality of HTML Workspace are:

  • In a user-created folder, make copies of the appropriate default files.
  • Add new models and views in the user-defined folder.
  • Make relevant updates like updating paths of newly added models and views in the default JavaScript files.
  • Minify the package to optimize the performance.

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.

Reusable components

As HTML 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 HTML Workspace components in web applications.

Building HTML Workspace code

SDK package

The package contains the source code of HTML 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:

  • CRX packages for Ship, Debug, and Dev profiles (mentioned below in CRX packages).
  • Minified version of customized code (for semantic changes).

WS content

  • client-pkg:
    • src - Contains artifacts needed to create CRX nodes.
    • pom.xml - Script to build deploy packages for various profiles WS-Deploy Package
  • client-html:
    • assembly - Contains zip.xml used by script for creating HTML Workspace SDK.
    • src/main/webapp -
      • css - Contains style sheets for HTML Workspace.
      • images - Contains images used in HTML Workspace.
      • js:
        • libs - Contains all third-party libraries used in HTML 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:
          • initializer - Contains initializer.js used to initialize backbone views and models used in HTML Workspace.
          • models - Contains backbone models of all components present in HTML Workspace.
          • routes - Contains javascript files and HTML files which loads start process, todo, tracking, and preferences in HTML Workspace.
          • services - Contains service.js used in HTML Workspace. All the server calls are made through service.js.
          • templates - Contains all templates, that is, HTML files of all views in HTML Workspace.
          • util - Contains all utility files (javascript) which are used in HTML Workspace.
          • views - Contains backbone views of all components in HTML Workspace.
        • main.js
        • router.js
      • libs/ws: pdf.html and pluginPing.pdf are used for loading PDF forms in HTML Workspace and WSNextAdapter.swf is used to load SWF forms and Guides in HTML Workspace.
      • locales:
        • de-DE - Contains translation.json for German.
        • en-US - Contains translation.json for English.
        • fr-FR - Contains translation.json for French.
        • ja-JP - Contains translation.json for Japanese.
        • html.jsp - Contains code to find out current browser locale.
      • html.jsp
      • GET.jsp

CRX Package

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.

Ship Profile

Command

  • mvn clean -P Ship install on client-pkg folder of Source package shipped to client.
  • Ship profile command execution works only on a 64-bit JVM.

WS content

  • css - Contains style.css, ie.css, and jquery-ui.css.
  • images - Contains all images.
  • js:
    • libs:
      • require - Contains require.js.
      • jqueryui - Contains jquery.ui.datepicker.ja.js.
    • runtime:
      • templates - Contains all templates, that is, HTML files of all components in HTML Workspace.
    • main.js (combined, minified, and uglified).
    • registry.js
  • libs:
    • ws - Contains pluginPing.pdf, pdf.html, and WSNextAdapter.swf.
  • Locale - Contains .content.xml.
  • locales:
    • de-DE - Contains translation.json for German.
    • en-US - Contains translation.json for English.
    • fr-FR - Contains translation.json for French.
    • ja-JP - Contains translation.json for Japanese.
    • html.jsp - Contains code to find out current browser locale.
  • Index - Contains .content.xml
  • profile - Contains offline.jsp.
  • GET.jsp
  • html.jsp
  • content.xml
  • _rep_policy.xml

Debug Profile

Command

  • mvn clean -P Debug install on client-pkg
  • Debug profile command execution works only on 64-bit JVM.

WS content

  • css - Contains style.css, ie.css, and jqueri-ui.css.
  • images - Contains all images.
  • js:
    • libs:
      • require - Contains require.js.
      • jqueryui - Contains jquery.ui.datepicker.ja.js.
    • runtime:
      • templates - Contains all templates, that is, HTML files of all components in HTML Workspace.
    • main.js (combined).
    • registry.js
  • libs:
    • ws - Contains pluginPing.pdf, pdf.html, and WSNextAdapter.swf.
  • Locale - Contains .content.xml.
  • locales:
    • de-DE - Contains translation.json for German.
    • en-US - Contains translation.json for English.
    • fr-FR - Contains translation.json for French.
    • ja-JP - Contains translation.json for Japanese.
    • html.jsp - Contains code to find out current browser locale.
  • Index - Contains .content.xml
  • profile - Contains offline.jsp.
  • GET.jsp
  • html.jsp
  • content.xml
  • _rep_policy.xml

Dev Profile

Command

mvn clean -P Dev install on client-pkg

WS content

  • css - Contains style.css, ie.css, and jqueri-ui.css.
  • images - Contains all images.
  • js:
    • libs - Contains all libraries used in HTML Workspace.
    • require - Contains require.js
    • jqueryui - Contains jquery.ui.datepicker.ja.js
    • runtime:
      • initializer - Contains initializer.js and modelcontrollerpath.js.
      • models - Contains models of all components in HTML Workspace.
      • routes - Contains javascript files and HTML files which loads start process, todo, tracking, and preferences in HTML Workspace.
      • services - Contains service.js used in HTML Workspace.
      • templates - Contains all templates, that is, HTML files of all components in HTML Workspace.
      • util - Contains all utility files (JavaScript) which are used in HTML Workspace.
      • views - Contains views of all components in HTML Workspace.
    • main.js
    • registry.js
    • router.js
  • libs:
    • ws - Contains pluginPing.pdf, pdf.html, and WSNextAdapter.swf.
  • Locale - Contains .content.xml.
  • locales:
    • de-DE - Contains translation.json for German.
    • en-US - Contains translation.json for English.
    • fr-FR - Contains translation.json for French.
    • ja-JP - Contains translation.json for Japanese.
    • html.jsp - Contains code to find out current browser locale.
  • Index - Contains .content.xml
  • profile - Contains offline.jsp.
  • GET.jsp
  • html.jsp
  • content.xml
  • _rep_policy.xml

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy