This presentation is part of the Portals Overview Self-Study Course.

Transcript

Quite often a client may have established UI or Web standards or request modifications to the screen displays such as font sizes, colors, etc.

If these changes are considered "universal" or apply to more screens than just the work object harnesses, they can be managed within the Portal class. The Skin field on the Skins tab defines a specific set of CSS styles for work object forms, report displays, and portal elements.  The values populating this field are instances of the Rule-PortalSkin class.

To customize a PortalSkin rule, begin by creating a copy of the PortalSkin rule in your own RuleSet.  Click on the icon next to the Skin field in the Portal Rule to open the PortalSkin rule in your workspace. Note that each of the four fields in the Styles tab is an instance of Rule-File-Text and controls the display corresponding to the field title on the left.

By using the class explorer, you can locate the instance of the Rule-File-Text you wish to change.   For example, you can create a new version of the desktop style sheet. This style influences how the portal is displayed, but not the rule forms or the work object forms.

To do this, merely copy the style sheet rule into your RuleSet using a new File Name since the original style sheets are marked Final out of the box.  Finally, save and approve the PortalSkin.  If you change the name of the PortalSkin rule as well, for example, from Metal to Metal_ClientName, be sure to update the Portal rule as well to utilize the correct PortalSkin rule.

Now you are ready to start modifying your skin, but before you begin, there are a couple of tools you should learn to use to make this process easier. 

1. Style Picker:  Allows you to view how the style sheet is presenting the screen.   This tool is accessed by clicking the icon to the right of the style sheet you wish to review.
2. Style Viewer:  Located on the "Tools" link in the Title bar of the developer’s portal

The Style Viewer is used to preview the runtime HTML rendering of CSS styles defined in text file rules. The Style Viewer presents the name and a sample rendering of each style in a set of CSS files, organized for review and access.

This display allows you to identify the style elements used in skin rules (Rule-PortalSkin rule type) and others rules that collectively control the fonts, colors, layout, and images of Process Commander browser displays and forms.

The Style Viewer helps you identify any gaps in a custom style sheet that is intended to override a standard style sheet.  Because CSS styles use a cascading or inheritance feature, a standard style is applied for any styles not explicitly defined in your custom style sheet.

Once you have launched the style viewer tool, you will see three fields with drop-down lists.  These fields allow you to determine which styles will be displayed in the tool.  Since we want to make a change to what the user sees, we should select "User" for the top field.  Select "Desktop" for the second field as that is the first style sheet we will change, and choose the name of your custom style sheet for the third field.  Selecting the final field will cause the tool to load the screen with the various images, colors, buttons, and background displays supporting the style sheets.

The Rule field in the Styles tab is to control display of the various rules you use to configure the application.  This style sheet is rarely changed as rules are not often intended for end-users viewing.

By convention, choose desktop_zzzz as the middle key part of the text file rule containing your application styles, where zzzz is arbitrary.

At runtime, Process Commander applies the style sheets for users in this order:

1. desktopbaseuser.css
2. desktop.zzzz.css

To override default styles for all the work object forms in an application, identify a custom style sheet in the Work field of the Styles tab.  As above, choose workform_zzzz as the middle key part of the text file rule containing your application styles, where zzzz is arbitrary.

At runtime, Process Commander applies the style sheets for users in this order:

1. workformbaseuser.css
2. workform_zzzz.css
3. Harness form scripts and styles tab
4. Field-level inline styles

To override default styles for all work reporting forms in an application, identify a custom style sheet in the Report field of the Styles tab.  By convention, choose reports_zzzz as the middle key part of the text file rule containing your application styles where zzzz is arbitrary.

At runtime, Process Commander applies the style sheets for users in this order:

1. desktopbaseuser.css
2. desktop_zzzz.css
3. reports.css
4. reports_zzzz.css
5. ListView or SummaryView Form Format Tab