Table of Contents

Article

How to identify and evolve styles for work object forms with the Style Discovery tool

Summary

 

Each element of a portal, work object form or report display is potentially affected by multiple CSS styles. The Style Discovery tool, part of the Rules Inspector, allows you to interactively identify which styles apply to any element.

The Style Discovery tool also allows you to experiment with the effect of local changes to a style definition. Your changes are temporary; they do not update any rules. If you find a style change you like, you can update the appropriate CSS, or create a supplemental CSS file that adds to or overrides styles maintained by the Application Skin wizard.

Caution: This tool supports advanced debugging of the sometimes complex ways that Internet Explorer and other browsers handle cascaded, sophisticated styles. Familiarity with CSS terminology and cascading is required. In typical Process Commander applications, use the Application Skin wizard to build and evolve CSS styles. Do not make direct updates to the CSS text file rules maintained by the Application Skin wizard.

 

Suggested Approach

The "look and feel" — the appearance and some aspects of the behavior — of work object forms in an application is determined by a set of CSS style sheets. Style sheets are saved as text file rules (Rule-File-Text rule type), and referenced in a skin rule (Rule-PortalSkin rule type), which in turn is referenced in a portal rule.

A visible element on a form may be affected by multiple styles and multiple style sheets. In addition, the "cascading" feature of the CSS standard is a form of inheritance, so that the order in which style definitions are applied is significant. As a result when you want to make a change, it can be difficult to determine which styles need to be revised.

The Style Discovery tool provides an interactive way to determine the styles, and also allows you to experiment with local small changes to style definitions. Your changes are temporary and do not update rules; no other users are affected. Menu

Capabilities

To work with the Style Discovery tool,

  1. Select Edit > Preferences and open the General group. Select your application's skin in the Skin field. Click Save.
  2. Select Run > Rules Inspector > Styles to enable the Style Discovery tool.
  3. Open a work object form or report display.

To disable this feature, select Run > Rules Inspector > Styles again, and close or refresh any work object forms or reports that show temporarily altered styles.

The Style Discovery floating toolbar has a "grab area" at the left end and four icons. To move the floating menu, select the grab area and drag slowly to a location away from the part of the form of interest.

Menu

Popup tool — Click the tool at the right end of the floating toolbar to disable, or enable, a pop-up display showing the details of styles at the current location on the form. You can identify the styles and their definitions, and make temporary local changes. (See below for more information and examples.)

Show tool — Click the show tool (Style Explorer) to identify the CSS files that together are in force for the current form (or report). The bottom CSS is applied last. Numeric hash codes at the end of each file name indicate that you are working with temporary copies.

  • In some cases, multiple CSS files may be "bundled" into a larger single file, to reduce network traffic between the Process Commander server and user browsers. Click Unbundle to extract and expand the bundle into individual files.
  • Each listed file is a link; click the link to open the corresponding CSS text file rule.
  • Select or deselect the Include check boxes, then click Save to see the contribution each CSS makes to the presentation of your work object form or report.
  • You can temporarily add other CSS rules to the bottom of the list, to see their effects.
  • Show Tool

Search tool — Enter a short text value to search through the CSS files listed in the Show Tool display. You can search the selector portion or the body (definition portion). For example, you can find a style named Hollywood, or all the styles that include "font-size:20". To temporarily modify any style definition in the search results, click the corresponding link, enter changes, and click Apply.

List Updates tool — This tool automatically logs a cumulative text file of all temporary style changes you made with the Search tool or the Pop-up. If the bottom CSS rule in the Show Tool display belongs to an unlocked RuleSet version, click the Copy All link to open and update that rule.

Examples

The Emerald application has a variety of user interface elements that reflect the application's name. Using the Style Discovery tool, you can learn which styles apply to which objects in the interface, and explore minor, local "tweaks" to individual elements or individual styles.

For example, the HTML <Label > tags on Emerald work object forms have no explicit style assigned. But through other styles, labels have the style property values shown in the pop-up:

Pop-up

Using the pop-up, a you can temporarily add a style to <label >, such as changing the background-color property value from transparent to #C8D0C8, a grey-green, and clicking Apply. This has the effect of temporarily adding "style="color:#C8D0C8" to each <label >.

Pop-up

The work object form background is defined by the harnessContent style. Using the pop-up, the background-color is set to #F7FFF7 (a pale green). In this case, the harnessContent style definition is temporarily altered.

Change 2

The appearance of the work object form immediately reflects these two changes:

 work object form

The effect of these two big color changes is very visible, but the same mechanism can be used to fine-tune less prominent changes to individual styles and elements.

Using the Search tool confirms that the (lowest or innermost) harnessContent style definition is in the workform_emerald CSS file.

Search results

If the text file rule webwb.workform_emerald.css is maintained by directly editing the CSS code on the Main tab, the temporary change can easily be made permanent, if desired.

However, If the text file webwb.workform_emerald.css is maintained through the Application Skin wizard, it should not be hand-edited. Use the Application Skin wizard to make the change, or — when that is not feasible — create a supplemental CSS text file rule containing only the changes, and list that rule on the Scripts and Styles tab of each harness rule. That CSS rule is applied last.

Published September 24, 2008 — Updated March 26, 2009


100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.