Cognos prompts are functional, but hardly pretty. One of the many few complaints I receive is the inability to format prompts. Clients with rigid design guides are the most vocal about this, as the stark black and white frame clashes with their carefully thought out dashboard.

The value prompt gives us some limited styling options – we can change the font, colors, size, and text direction. The tree on the other hand is almost insultingly limited. We can change the size of the prompt, and the direction of text. In neither can we change the borders or the images of the checks. So what can we do?

Fortunately we can fairly easily find the css classes governing the appearance, and use reference those in the class explorer in Report Studio. By using the developer toolbar of your choice (I’m using IE8 because some certain clients are STILL operating in the first decade of the 21st century (you know who you are)), we can quickly find the classes.

A quicklist:
tree:                 clsTreePane pa
tree node icon:       clsTreeNodeIcon
checkbox:             clsCheckBoxList pv
unchecked:            dijitInline dijitCheckBox
checked:              dijitInline dijitCheckBox dijitCheckBoxChecked
checked descendant:   dijitInline dijitCheckBox dijitCheckBoxMixed
expand button:        dijitTreeExpando dijitTreeExpandoOpened
collapse button:      dijitTreeExpando dijitTreeExpandoClosed


Now that we know the classes to use, we have a few options to proceed. In this client, the style guide was for this project only. In theory we could have modified the style sheets for the skin, but they didn’t want to go that far. Instead, we could only use the class explorer.

The class explorer allows us to change the name of a custom class, or modify a short list of existing entries. Here lies an annoyance. If we drag in a new class, the class selector is actually going to be cls1. In order to change that, we can cut it out of the report and paste it into notepad.

Let’s modify this to use the image set I was given (sorry, I can show them but I can’t share them) by the design team.

<RSClipboardFragment version="2.0"><classStyle name="dijitCheckBox" label="dijitCheckBox"><CSS value="
background-image:url(../images/portal/check_blank.png);
background-position:center center;
background-repeat:no-repeat;
"/></classStyle>
<classStyle name="dijitCheckBoxChecked" label="dijitCheckBoxChecked"><CSS value="
background-image:url(../images/portal/check_full.png);
background-position:center center;
background-repeat:no-repeat;
"/></classStyle>
<classStyle name="dijitCheckBoxMixed" label="dijitCheckBoxMixed"><CSS value="
background-image:url(../images/portal/check_full.png);
background-position:center center;
background-repeat:no-repeat;
opacity: 0.4;
filter: alpha(opacity=40);
"/></classStyle>
<classStyle name="dijitTreeExpandoOpened" label="dijitTreeExpandoOpened"><CSS value="
background-image:url(../images/portal/checkMinus.png) !important;
background-position:center center;
background-repeat:no-repeat;
"/></classStyle>
<classStyle name="dijitTreeExpandoClosed" label="dijitTreeExpandoClosed"><CSS value="
background-image:url(../images/portal/checkPlus.png) !important;
background-position:center center;
background-repeat:no-repeat;
"/></classStyle>
<classStyle name="clsTreePane" label="clsTreePane"><CSS value="
border-top-style:none;
border-right-style:none;
border-bottom-style:none;
border-left-style:none
"/></classStyle>
<classStyle name="clsCheckBoxList" label="clsCheckBoxList"><CSS value="
border-top-style:none;
border-right-style:none;
border-bottom-style:none;
border-left-style:none
"/></classStyle>
</RSClipboardFragment>

There are a few things of note here. After you paste these in to the class explorer you’ll be able to modify the classes as normal. But notice I’m using the !important flag in the dijitTreeExpandoOpened and dijitTreeExpandoClosed classes. It looks like the standard image is actually resolved after the class here. !importanting (that’s a word, right?) the class ensures our style takes presedence. The opacity controls at the top is what gives the nice faded look to the checked image. Any changes to the class through the UI will wipe the non-Cognos-standard styles.

Now when we run the report, we get the fancy awesome looking results that match the style guides provided by the design teams.

report xml:
style-checks-report.txt (973 downloads)