Wrapping radio prompts in an Active Report

My apologies for not posting for a long time. On February 1, I was hired by PMSquare as a solutions architect. In addition to flying back and forth over the Atlantic, I was busy writing a training manual. It covers JavaScript, local classes, a brief intro to modifying RAVE graphs, and Cognos Mashup Services. Use the contact form if you’re interested in learning more about it. Now that I’ve actually finished it, I can go back to updating my blog.

An interesting problem was forwarded to me. An Active Report needed to have a data checkbox prompt wrap around. In some scenarios there were too many values for a simple horizontal prompt, and the vertical prompts wouldn’t fit at all. The solution is fairly simple, and you can jump to the end of the article if you don’t care about how I found it.

Horizontal radio and checkbox prompts are actually single row tables with multiple cells. Tables are notoriously difficult to reposition with CSS, and there’s precious little in the HTML that we could use to style.
radio horizontal

My first thought was we could use JavaScript, but loading scripts automatically is difficult (but not impossible, see Bob’s BI blog). The next idea was to group the members in sets of ten and use a master detail to generate a series of prompts. That had the double whammy of being difficult to support and being absolutely insane (which, to be fair, hasn’t stopped me from developing some other solutions).

Next let’s look at a vertical prompt. I figured it would be built similar to the horizontal, a table with one cell and multiple rows. In fact, a vertical checkbox prompt is actually that.
checkbox vertical

Oddly a vertical radio prompt is a series of divs.
radio vertical

And each of those divs has a class associated, clsListItem_normal, with it. This makes it possible for us to play with local classes. Normally, we should be able to simply create a class with the same name. Unfortunately some wise-guy in the RS dev team decided to make life difficult. The RS local class gui gives us an error message when we try to create a class name containing an underscore. So we need to get clever.
invalid class name

Currently IE is the only browser that allows Report Studio to work with the system clipboard. So save your report and reopen in IE (unless you’re already using IE for report development, you poor schlub). Remember to click “allow” if it asks you for permission to access the clipboard.
Now, instead of changing the name of the class, cut the class into notepad, and change the class name there. Paste it back into the local class and voila, we have found away the silly and arbitrary “no underscores” rule.

 <RSClipboardFragment version="2.0"><classStyle name="clsListItem_normal"/></RSClipboardFragment>

Now, let’s set the box type on the class to inline, and right margin to 10px, and run the report.
wrapping radios

My experiments show that the wrapping radio buttons will continue to work across browsers and platforms. Unfortunately this will not work with checkbox prompts, until they are changed to divs instead of tds.

The attached report is based on 10.2.2. I’m not sure how the radio prompts are built in previous versions. In any event, 10.2.2 is the first version since 8.2 that allows you to actually set the class name instead of just the class label. So you’ll need to use the copy/paste technique anyway.
wrapping-radios.txt (156 downloads)

Styling checkbox and radio prompts

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.

1 unstyled checks

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.

2 checkbox 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.

3 paste class 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-position:center center;
<classStyle name="dijitCheckBoxChecked" label="dijitCheckBoxChecked"><CSS value="
background-position:center center;
<classStyle name="dijitCheckBoxMixed" label="dijitCheckBoxMixed"><CSS value="
background-position:center center;
opacity: 0.4;
filter: alpha(opacity=40);
<classStyle name="dijitTreeExpandoOpened" label="dijitTreeExpandoOpened"><CSS value="
background-image:url(../images/portal/checkMinus.png) !important;
background-position:center center;
<classStyle name="dijitTreeExpandoClosed" label="dijitTreeExpandoClosed"><CSS value="
background-image:url(../images/portal/checkPlus.png) !important;
background-position:center center;
<classStyle name="clsTreePane" label="clsTreePane"><CSS value="
<classStyle name="clsCheckBoxList" label="clsCheckBoxList"><CSS value="

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.

4 fancy checks

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

New Cognos Maps! (Almost)

An IBM R&D team lead was kind enough to invite me for a chat at one of their labs. The team is building a new mapping solution for Cognos! It doesn’t look like it’s going to be as complicated, or have as many features as the ESRI maps, but it is far superior to what vanilla Cognos has now.

While I don’t have access to any screenshots to share here, I can describe what I was seeing. The demo was showing data pulled from the Amsterdam public transportation system. Unplanned bus stops by time of day. Unplanned could be red lights, stop signs, traffic, or even accidents. They showed a simple map of the city, with a clock plot over each area showing stops by time of day.

Creating a map can be as simple as taking an image and defining the coordinates for the corners. Apparently they support 3,500 different coordinates systems. This tool allows for the creating of internal maps too. Import your image, use a fill or polygon tool to create areas, or drop dots in certain locations. Both of which can be assigned various names for use in reports. They’re also working on a way for the software to analyze the image and try to guess specific zones. This would be incredibly useful for malls, or other places which need to track many small zones.

At the moment Cognos doesn’t have any form of map creators. The native maps (pre-RAVE), needed a third-party tool with a hefty price-tag. RAVE maps are possible, but tricky. You need to use mapping software and export is as a GeoJSON featureset. Several years back my client had a requirement to build an internal map showing the workflow of a series of manufacturing machines. Each step had to be colored based on a metric, and each machine had to have it’s grade displayed prominently next to it. As I didn’t have a MapInfo license, I needed to get tricky. Ultimately I had a solution in which each machine part was a separate image with transparency set. With each image in it’s own absolute positioned div, and all of the divs inside a singleton, a lot of conditional formatting setting the background color. This tool would have saved me a week of work.

Don’t get too hopeful about seeing this tool anytime soon though. They reminded me that they’re an R&D lab, not a software group. What they’re developing should become the basis of a new tool. We’re going to set up another meeting, and hopefully I’ll be able to get their test software installed at one of my clients. They need to know more about customer needs. How will customers use the maps? What are customers hoping for?

Feel free to leave a comment about what you would want in a new Cognos mapping tool. I’ll bring the list of comments to my next meeting with them.