Oracle Developer

The initial setup for this tutorial is explained in the post Custom CSS Style Options (HTML Only). As well as being able to define a style (or styles) to use for a field it is possible to create and use a user defined (custom) CSS class.

Step 1

Let’s change the styles used for the ‘Product List Price’ by assigning a new custom class to this field. This class will apply styles that will make the ‘Product List Price’ values have a blue background with yellow text, with a white border, be double in size and shifted in from the right.  To do this we need to know which CSS styles to use in the class.

We need to use the following:

• background-color (for the blue background)
• color (to change the font colour)
• border(for the white border)
• font-size (for doubling size)
• padding-right (for indentation from the right

When completed they class will look like this:

.listPrice {
    background-color: #0000ff;
    color: #ffff00;
    border: 2px solid #ffffff;
    font-size: 2em;
    padding-right: 1em;
}

Step 2

Open the ‘column properties’ window for the ‘Prod List Price’ field and enter the ‘listPrice’ class in the  ‘Use Custom CSS Class’ text field.

You will need to click in the checkbox before you can enter the class.

Step 3

If you run the report you will see no difference in the way the ‘Prod List Price’ field looks. This is because we haven’t yet created the custom class. To do this we need to add the listPrice style to the custom.css stylesheet.

Oracle Business Intelligence is installed with a blank file called custom.css. If you did a standard install then you will probably find the file custom.css in the following directory:

C:\OracleBI\oc4j_bi\j2ee\home\applications\analytics\analytics\res\s_oracle10\b_mozilla_4\

Open custom.css in a text editor and add the ‘listPrice’ class.

/* This file is intentionally empty.  Styles can be defined in a customized */
/* version of this file placed in the SiebelAnalyticsData/Web/Res folder;   */
/* and can then be referenced from the "Custom CSS Style Options" area      */
/* within some Siebel Answers Formatting Dialogs.  These styles will only   */
/* affect HTML content.                                                     */

.listPrice {
    background-color: #0000ff;
    color: #ffff00;
    border: 2px solid #ffffff;
    font-size: 2em;
    padding-right: 1em;
}

Step 4

When you run the report you will probably still not notice any difference. This is probably because the cache needs to be cleared. Even after you clear the Browser Cache, or ‘Reload Files and Metadata’ from the ‘Oracle BI Presentation Services Administration’ the report may still be unchanged. I have even restarted the Services and reloaded the report without much success.

The most effective way to see the new changes is to simply click on the  ‘Show how results will look on a Dashboard’  button

When you do this the report should now look like this.

Step 5

On closer inspection, you may notice that one of the class styles is missing, i.e. the white border.

    border: 2px solid #ffffff;

This is where a greater understanding of HTML and CSS helps. Basically, the ‘listPrice’ class defines the styles for each cell of the table in the ‘Product List Price’ column. The border style we are trying to define happens to be outside the visible table cell, so we cannot see it. The visible table cell in effect is drawn over the top of the ‘listPrice’ styles so it is the visible table cell’s border we can see and not the ‘listPrice’ border. So, to fix the problem, what we need to do is define the visible table cell’s border instead. The visible table cell is actually a table data cell, i.e. a <td> tag.

So, what we actually want to do is add the border style to the <td> tag containing the ‘listPrice’ class. i.e. we need to add the additional following class to our custom.css stylesheet:

td.listPrice {
    border: 2px solid #ffffff;
}

As this overrides the border style in the ‘listPrice’ class we can remove it from there. So our custom.css stylesheet will now contain the following styles.

.listPrice {
    background-color: #0000ff;
    color: #ffff00;
    font-size: 2em;
    padding-right: 1em;
}

td.listPrice {
    border: 2px solid #ffffff;
}

Step 6

The report should now look like this.

Footnote

The fourth tab in the ‘column properties’ popup window enables you to add conditional formatting for the field.

This opens up an additional ‘Edit Format’ window with the ‘Custom CSS Style Options (HTML Only)’. Here you can define new ‘Custom CSS Style’ or ‘Custom CSS Class’. The CSS Styles work fine but ‘Custom CSS Class’ doesn’t seem to work.