JQuery UI and Cognos Analytics

basic cognos output
Basic Cognos Javascript Console Output

I fiddled around a little bit and it seems like Cognos 11 and JQuery work pretty much the same as in Cognos 10 (as long as interactivity mode is disabled). Only the Cognos console output has gotten way more narrative.

In case you are wondering, just include your basic jquery & jquery ui library and replace jquery’s $ with your own text or symbol to prevent screwing up cognos.

I would also recommend to create a separate namespace, Angus Croll wrote a good article a few years ago which should give you a gist of the topic (and please read the comments).

 

Here’s a small example for Cognos 11. Just create a new report, deactivate interactive functionality in the page properties, add a new html-item and paste the code. The code is based on a jquery ui example and there are plenty more sophisticated ones available.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css"/>

<script>
var own_jq = jQuery.noConflict();
own_jq( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
own_jq( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"></input></div>

By the way this code is downward compatible and should work in IE quirks mode. Since Cognos 11 there is finally a HTML5 doctype so the quirks modus should not be used anymore (thank you IBM!) and in CA you could now use a newer JQuery version.