Customize portlet colors

Some portlets allow users to specify custom colors at the portlet level, while admins can define colors at the portlet data source and system levels to ensure consistent visual representation for the same data type. This topic explains how to configure portlet colors at the data source and system levels.

Overview

Portlet colors can be defined at different levels by different roles. When portlets are loaded, they system determines the portlet colors in the following order of precedence:

At the portlet level: End users can set portlet colors in the portlet edit preferences page. These settings take the highest priority and are applicable to self-service chart portlets only. For details, see Color Setting.
At the portlet data source level: Admins can configure a portlet data source to define mappings between colors and target data. These settings apply to portlets using the data source and take effect only when no color preferences are set at the portlet level.
Colors defined at system level: Admins can globally define colors for all portlets. These settings work when there are no color settings defined at the portlet level or the portlet data source level.

Colors configured at the portlet data source level and system level do not apply to the following portlets: Java portlets, WSRP portlets, and HTML+ portlets.

Define portlet colors at data source level

Add a column in the data source to specify mappings between colors and the target data. When you define colors for a portlet data source, the colors are applied to the portlets using the data source. You can define colors for the following types of data sources:

Dashboard SQL data sources
Self-service portlet data sources.

To define portlet colors at the data source level:

Add a color column in the data source that defines specific colors to be assigned to the target data. For details of adding columns in a portlet data source, see Complete the Data Source tab.

You can define color mappings for one data type per column. To define colors for another data type, add a separate column.

Color mapping example

This example shows a status_color column that assigns a specific color to each request status:
- Blue for "Succeeded"
- Red for "Failed"
To define such color mappings, use the following SQL query for the status_color column:
Copy code
```
SELECT  status_code STATUS_CODE, DECODE(status_code, 'CLOSED_SUCCEEDED', 'blue','CLOSED_FAILED','red') STATUS_CODE_COLOR
FROM      kcrt_requests
WHERE 1=1
```
For dashboard SQL data sources, edit the portlet definition to set its color source.

In the Step 3: Set up Display Options on the Create Portlet Definition page, select the color column for the Color Source property. For details, see Manage portlet definitions.
For self-service portlet data sources, select the column as the color column for the target data.
1. Open the Edit Self-Service Portlet Data Source page of the relevant self-service portlet data source.
2. In the Columns Information area, find the target data column.
3. In the Color Column field, select the color column added in the data source.
  
  Example: In the Color Column field of the Request Status column, select the status_color column. When the Request Status column is selected as a data source in the self-service portlet, requests with a "Succeeded" status will be displayed in blue, and requests with a "Failed" status will be displayed in red.

Define portlet colors at system level

Define a color palette that assigns colors to portlets based on the order they are loaded, or designate a color for a specific data point. These settings apply to portlets that have no colors defined at the portlet level or portlet data source level.

To define portlet colors at the system level:

Click the Administration button in the masthead.
From the Administration menu, click System Appearance Customization > Theme Customization.

In the Chart Colors area, configure portlet colors using the following options:

Option	Details
Define a color palette	Define a custom color palette that assigns colors to portlet charts based on the order they are loaded. To customize a color palette: Click the Chart Color Palette tab and do the following: To add a color, click Add and select a color using the picker or enter the hexadecimal or RGB code. To modify a color, hover over it, click Edit, and then select a new color. To delete a color, hover over it and click Remove. To reorder colors, drag and drop the color card. Colors are assigned to portlet charts in a left-to-right, row-by-row order. Once all colors are used, the sequence restarts from the first color. To ensure clarity, avoid placing similar colors adjacent to each other. Colors for a portlet chart remain consistent but may change after a node restart, depending on the order in which a portlet is loaded. For example, if Portlet X is loaded first, the first three colors in the color palette (e.g., Red, Green, and Yellow) are assigned to charts with legend labels A, B, and C, respectively. After a restart, if Portlet Y is loaded first, the same colors (Red, Green, and Yellow) are reassigned to charts with legend labels B, C, and D. To ensure a specific legend label always uses the same color, assign a fixed color to it. For details, see Designate a color for a specific legend label.
Designate a color for a specific legend label	Designate a color to a specific legend label (such as High, Medium, or Low). This ensures key legend labels are always displayed in the color you defined. To designate a color to a specific legend label: Click the Specific Chart Color tab and click Add. In the Label field, enter the legend label (case-insensitive). Select a color using the picker or enter the hexadecimal or RGB code. Click OK. Repeat the steps to add additional color assignments for other legend labels.

Option

Details

Define a color palette

Define a custom color palette that assigns colors to portlet charts based on the order they are loaded.

To customize a color palette:

Click the Chart Color Palette tab and do the following:

To add a color, click Add and select a color using the picker or enter the hexadecimal or RGB code.
To modify a color, hover over it, click Edit, and then select a new color.
To delete a color, hover over it and click Remove.
To reorder colors, drag and drop the color card.

Colors are assigned to portlet charts in a left-to-right, row-by-row order. Once all colors are used, the sequence restarts from the first color. To ensure clarity, avoid placing similar colors adjacent to each other.

Colors for a portlet chart remain consistent but may change after a node restart, depending on the order in which a portlet is loaded. For example, if Portlet X is loaded first, the first three colors in the color palette (e.g., Red, Green, and Yellow) are assigned to charts with legend labels A, B, and C, respectively. After a restart, if Portlet Y is loaded first, the same colors (Red, Green, and Yellow) are reassigned to charts with legend labels B, C, and D.

To ensure a specific legend label always uses the same color, assign a fixed color to it. For details, see Designate a color for a specific legend label.

Designate a color for a specific legend label

Designate a color to a specific legend label (such as High, Medium, or Low). This ensures key legend labels are always displayed in the color you defined.

To designate a color to a specific legend label:

Click the Specific Chart Color tab and click Add.
In the Label field, enter the legend label (case-insensitive).
Select a color using the picker or enter the hexadecimal or RGB code.
Click OK.
Repeat the steps to add additional color assignments for other legend labels.

Click Save on the Theme Customization page to save your changes.