Checking checkboxes with jQuery and Cognos

Want to know how to check some checkboxes by default in COGNOS? This could help your prompt page.. Get your report setup with jQuery by following this post.

On your prompt page or report, create a prompt with a checkbox. Surround it with two HTML Items, and put the following in the first:

[code]<div id="checkbox>[/code]

and the one after it should be:

[code]</div>[/code]

Place another HTML item to the right of the report title at the very top. Put your basic code in there, it should resemble something like this:

[code]<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js</a>"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {

});
</script>[/code]

Once I had this in place, I used the following JS to select the checkbox:

[code]jQuery("#checkbox input[type=checkbox]:eq(1)").attr(‘checked’,’checked’);[/code]

Let’s take a look at that particular call:

“#checkbox input[type=checkbox]:eq(1)”

This takes the checkbox div we created, and finds every input with a type attribute of checkbox. This actually returns 5 objects in my test report – an empty/hidden input, and 4 static choices I created. To select the first one, I just point to the [1] position using :eq(1). I could use 2 for the second, 3 for the third, so on.

.attr(‘checked’,’checked’);

This is jQuery’s way of saying “check this box!” All of that in one line. If you need clarification, please let me know.

(Full code)

[code]<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#checkbox input[type=checkbox]:eq(1)").attr(‘checked’,’checked’);
});
</script>[/code]

The UI Grail – jQuery UI Sliders on a Crosstab

You’ll have to stay with me and really be a sport until I can get a virtual machine going at home with a COGNOS training install on it. Until then, I can’t post screenshots of live data or anything like that. This is more.. Conceptual.

So I’ve setup a crosstab with Years as the column, Sales Category as the row, and Sales Amount as the measure. Pretty simple. What I’d like to do, however, is see if I can somehow manipulate the Years being displayed dynamically without rerunning the report from scratch. That’s where jQuery UI comes in.

I dispatched the necessary jQuery UI CSS files over to IT to place in the webserver where COGNOS is located. They dropped it into the c8/common folder, which resolves to domain.com/cognos8/common. Besides that, I added an HTML Item to the header (at the very very top before the report title), and setup the links to jQuery/jQuery UI.

So here we go. This is a little bit of a hack, but it actually works beautifully in practice. On your crosstab report, you’re going to add two Text Item Value Prompts. Immediately, make sure “Required” is set to No. Name them whatever you would like, just give them descriptive names that you can remember. Don’t have them filter anything. I named mine ?Begin? and ?End?.
Create a filter on the crosstab query. It should be something like:

[sourcecode][Year] between ?Begin? and ?End?[/sourcecode]

Set it to optional (this allows us to run the report without being required to put in values). Drag an HTML item before and after each prompt, and give it a DIV with a unique ID so you can easily select it with jQuery. I named mine #begin and #end. Create a DIV under them with an id of “slider-range”.

Ok, now everything should be ready to go. Take a look at this code:

[sourcecode language=”javascript”]<link type="text/css" href="cognos8/common/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery.noConflict(); // Necessary
jQuery(document).ready(function() {
jQuery("#begin").hide(); // Hide the Cognos text prompt that you created
jQuery("#end").hide(); // Hide the other prompt as well
var lastHeader = jQuery("td[uid=15]:first").text(); // From the table header, grab the first Year available (expecting 2002 in my case)
var firstHeader = jQuery("td[uid=15]:last").text(); // Now, take the last Year available (expecting 2011 in my case) – this sets the default values in the slider.
jQuery("#slider-range").slider({
range: true,
min: 2002, // You’re going to have to set these by hand for now
max: 2011, // See above
values: [firstHeader, lastHeader], // Sets the default values as specified above
slide: function(event, ui) {
jQuery("#begin input:text").val(ui.values[0]); // When the slider is moved, it will produce a new Year – put that Year in the hidden text box
jQuery("#end input:text").val(ui.values[1]); // This is the same as the above, but for the second value in the range
setTimeout("promptAction(‘finish’)",3000); // Wait a few seconds, and dispatch the promptAction(‘finish’), which refreshes the page
}
});

}); // End Ready
</script>[/sourcecode]

I tested this thoroughly and it worked beautifully for my first few reports. The next steps are to create multiple sliders (both horizontal and vertical). But, that’s essentially how you do it!

COGNOS/jQuery – The Basic Setup

There’s only one really good way to troubleshoot issues with custom Javascript and Cognos Viewer – get Firefox, then get Firebug, and get it immediately. In order to test the selectors that you are going to be using to manipulate data, it is much faster to find UID’s and other HTML attributes with Firebug. If you aren’t familiar with it, it will save you hours of headaches so get familiar with it as soon as possible.

Once you have installed it, use the Inspector to find out how COGNOS renders HTML, and some of the attributes it uses to uniquely identify elements. You’ll notice that rows of information get a UID, which you can use to create all sorts of custom charts and data through API’s like Google Charts.

After that, take a look at Ross Hartshorn’s blog B. Intelligence about how to get jQuery running in the viewer. Note that you cannot use $(). – it conflicts with IBM’s Javascript.

Once you have both installed, create a simple list or crosstab for yourself and render it to the viewer. Now we can start to have some fun.

Using the command line in Firebug, fire off some jQuery selectors to see what you get. Select a td element and see what its UID is, then type the following in console:

[sourcecode language=”javascript”]jQuery("td[uid=15]").val();[/sourcecode]

You’ll need to replace 15 with the UID of one of your rows, but you’ll see that you can actually transverse the table that COGNOS produces and manipulate some of the data.

Here’s an important one that I discovered – give it a shot in console.

[sourcecode language=”javascript”]promptAction(‘finish’); // This is the function that is called when Auto-Submit = yes, or a Reprompt button is pressed. This will be useful when you want to manually trigger a refresh of COGNOS data. [/sourcecode]

More coming!

OK, so…

There’s this thing called COGNOS that is made by IBM. It’s a little (huge) webapp that creates reports that help people make better decisions. It just doesn’t automagically create the reports, though – someone has to actually make them through a pretty neat little UI. COGNOS uses Javascript on the frontend, but Javascript can be time consuming and sometimes doesn’t upgrade well.

So being a web developer that has always used jQuery, I had the wonderful idea of combining the two. Usually I’d read some other people’s blogs about their experiences with this. Unfortunately, there are not a lot of resources out there, and they are generally wrong. So that’s what I’ll be using my namespace for; the quest to achieve gorgeous reports using jQuery and COGNOS. Amongst other things.