Styling PeopleSoft Charts

PeopleSoft charts are flexible in terms of styling. Styling covers colors and fonts that you see when you look at a chart. Style specifications are generally defined in Application Designer style sheets so that they are accessible to application developers. Specifically, they are defined in sub style sheets that are then attached to high-level system style sheets such as PSSTYLEDEF_TANGERINE which are used throughout a system ensuring consistent look and feel.

Charting Sub Style Sheet Organization

The organization of the charting sub style sheets is straightforward. Each chart class has its own set of styles. These styles are in one or more sub style sheets that have a naming convention as shown in the table below.

Charting Class Sub Style Sheet Begins With

Chart

DialGauge

LEDGauge

ReferenceArea

ReferenceLine

Series

StatusMeterGauge

Threshold

ToolTipLabel

PSCHARTSTYLE, PSJET

Gantt

PSCHARTGANTT

OrgChart

PSORGCHART

RatingBoxChart

PSRATEBOX

Different specifications of the styles will be in sub style sheets that are appended with a underscore (“_”) followed by a suffix, which is usually the name of the theme.

For instance, PSCHARTSTYLE and PSCHARTSTYLE_TANGERINE have the same styles but the specifications for these styles differ because PSCHARTSTYLE is used for the Swan user interface theme while PSCHARTSTYLE_TANGERINE is used for the Tangerine user interface theme. Similarly, the _FMODE suffix specifies fluid mode style sheets.

See Portal Technology: Configuring Branding System Options for more information on how to specify the theme and default style sheet for your system..

Altering Style Specifications

The styles delivered for charting are designed to work harmoniously with the branding theme that they are associated with. There may be times, however, when you want a different look and feel from the delivered one. Scenarios may include:

  • You want to implement a system-wide change in theme (including not only charts but other visual elements such as headers, grids, and so on.

  • You want to implement a system-wide change in chart style specification within the context of one of the PeopleSoft delivered themes. An example might be to change the sequence in which colors appear on charts or to change the font size of one of the chart text elements such as the axis titles.

  • You want to implement a style modification on a particular chart or particular family of charts. For instance, there may be certain charts that appear on pagelets in which you want the main title to have a large font and be bold.

Different approaches lend themselves to these different scenarios.

Scenario 1: Implement system-wide change in theme

In this scenario you would most likely be creating a new system style sheet for your implementation probably by cloning one of the high level style sheets that PeopleSoft delivers. Once you have done this, follow the steps in Scenario 2 for the charting sub style sheets.

Scenario 2: System-wide change in chart style specifications

  1. Identify the charting style classes that you want to change.

  2. Identify the charting sub style sheet in which those style classes reside.

  3. Clone those sub style sheets.

  4. In the cloned sub style sheets, update the values of the style classes that you want to change.

  5. Attach the cloned sub style sheets to the default style sheet for your PeopleSoft system.

  6. Detach the delivered sub style sheets from the same default style sheet.

  7. Test the results.

Important:

Do not change the delivered style sheets and sub style sheets. The best practice is to clone them and make changes to the clones.

Important:

Do not delete style classes from original or cloned style sheets or sub style sheets. Doing so may compromise chart creation.

There is no guarantee that the style sheet value changes that you make will work as expected in the application, as style class specification changes may impact chart creation. You must test the results of your changes to verify that they are working. If changes are not working as expected, you need to try a different style class value.

Scenario 3: Minor style modification

PeopleSoft charting provides a means to override delivered styles on a granular basis on the Chart class and gauge classes. If you need to override one or more delivered style class definitions found in a PSCHARTSTYLE* sub style sheet, do the following:

  1. Create a new free form sub style sheet in Application Designer.

  2. Open up the PSCHARTSTYLE* sub style sheet that contains the style class definitions.

  3. Copy the specific style class definitions and paste them into the new free form sub style sheet.

    Note:

    Putting the style class definitions into a new free form sub style sheet will simplify your future PeopleTools upgrades.

  4. Append an underscore (“_”) to the end of the copied style class names followed by an identifier of your own choosing. These new style class definitions are the overriding styles. For example, an overriding style class name for the PSCHARTLEGEND style class could be PSCHARTLEGEND_NEW.

  5. Edit the new style class definitions that you have created to suit your needs and save the sub style sheet.

  6. Insert the new free form sub style sheet into the default system style sheet that your environment is using.

  7. For any chart that you want to use your custom styles, set the AdditionalStyleSuffix property to the identifier you used in step 4.

When the chart is generated at runtime, it will first use any styles that have your override identifier. If such a style class definition is not found, the chart will use the base style that you copied instead.

See Chart class: AdditionalStyleSuffix property: Chart class, DialGauge class: AdditionalStyleSuffix property: DialGauge class, LEDGauge class: AdditionalStyleSuffix property: LEDGauge class, and StatusMeterGauge class:AdditionalStyleSuffix property: StatusMeterGauge class.