Question

I have recently asked where global stylesheets are for editing Cognos 10 styles (Here).

After some discussions with our team we would like to find the CGI or base imported file that Cognos uses to construct it’s report viewer pages and dashboard widget holders.

The reason we want to do this is so that we can include all our custom style and javascript in one location. When/If we upgrade Cognos we can be sure of one point of failure with our reports. This would solve our problem of having to re-edit multiple stylesheets (and javascript).

I’m normally familiar with ASP.NET and not CGI-BIN. Is there something akin to a Master page where styles and basic imports are done for a Cognos page? Ideally editing this file would allow us to continue our customizations.

Can this be done? Or are we just insane? We understand the risks concerning upgrades, but are OK with the risks (unless someone can provide a good example of how this technique would not be replicated via version changes).

Answer 1

I up-voted both the previous answers to this question. I’ll admit I kind of forgot about this question till someone put some activity on it.

We ended up doing a combination of the above techniques. I was able to find the global stylesheets as suggested. What I ended up doing was copying out all the styles that were in that stylesheet and created a new sheet suffixed with *_SystemSytles.css*. I created a second sheet and suffixed it with *_Custom.css*. Then in the original sheet I placed two imports, first importing the system styles and then the custom styles.

For certain reports we have a custom object that is dropped on that brings in its own styles (and JavaScript). This utilizes a similar technique to the second question.

However, what I had to do for import the JavaScript for general use within the entire Cognos site was difficult.

In the core webcontent folder I created a js folder that contained the jQuery and our custom JavaScript files. Then in a series of JavaScript files I included code similar to the following:

/************************
JQUERY UTIL INCLUDE
************************/

function loadjscssfile(filename, filetype, id) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
        if (id)
            fileref.setAttribute("OurCompanyNameAsAnID", id)
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined") {
        var headTag = document.head || document.getElementsByTagName('head')[0];

        headTag.appendChild(fileref);
    }
}

function _PortalLoadJS() {
    if (!window._PortalScriptsLoaded) {
        var pathParams = [];
        var path = location.href;
        (function () {
            var e,
            r = /([^/]+)[/]?/g,
            p = path;

            while (e = r.exec(p)) {
                pathParams.push(e[1]);
            }

        })();

        var baseURL = location.protocol + '//';

        for(var i = 1; i < pathParams.length; i++) {
            if(pathParams[i] == 'cgi-bin')
                break;

            baseURL += pathParams[i] + '/';
        }

        loadjscssfile(baseURL + "js/jquery-1.6.1.min.js", "js");
        loadjscssfile(baseURL + "js/Custom.js?pageType=COGNOS_CONNECTION", "js", "SumTotalUtil");
        window._PortalScriptsLoaded = true;
    }
}

if(!window.$CustomGlobal) {
    window.$CustomGlobal= function(func) {

        if (!window.$A) {

            if (!window.__CustomExecStack) {
                window.__CustomExecStack= new Array();
            }

            window.__CustomExecStack.push(func);
        }
        else
            $A._executeCustomItem(func);
    }
}

try {


    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if (document.readyState === "complete") {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        setTimeout(_PortalLoadJS, 10);
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if (document.addEventListener) {
        // Use the handy event callback
        document.addEventListener("DOMContentLoaded", function() { _PortalLoadJS(); }, false);

        // A fallback to window.onload, that will always work
        window.addEventListener("load", _PortalLoadJS, false);

        // If IE event model is used
    } else if (document.attachEvent) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", function() { _PortalLoadJS(); });

        // A fallback to window.onload, that will always work
    window.attachEvent("onload", _PortalLoadJS);
    }
}
catch (ex) { }

The $A item is an item that I create when the Custom.js file is loaded.

Here are the list of files that I’ve included this code (at the vary end of the JavaScript):

• webcontent\icd\bux\js\bux\bux.core.js
• webcontent\ps\portal\js\cc.js
• webcontent\rv\CCognosViewer.js
• webcontent\rv\GUtil.js
• webcontent\rv\viewer.standalone.core.js

These files should cover the Cognos Connection, Report Viewer, and the Dashboards area. If any more are found please let me know and I can update this list.

When linking to the Custom.js file I put a query string on the external resource that the Custom.js file picks up: pageType=COGNOS_CONNECTION. This allows me to do specific load code for the Cognos Connection, Report Viewer, or the Dashboards.

Here is the code in the Custom.js class that inits the $A object:

function _CustomUtilInit() {
    try {
        if (!window.$j) {
            window.setTimeout(_CustomUtilInit, 1);
            return;
        }

        var jScriptTags = $j('SCRIPT[' + Analytics.SCRIPT_ATTR_NAME + '= ' + Analytics.SCRIPT_ATTR_VALUE + ']');

        jScriptTags.each( function(i, scriptElem) {

            var tag = $j(scriptElem);

            if(tag.attr(Analytics.LOADED_SCRIPT_KEY))
                return;

            var scriptURL = new URI(tag.attr('src'));

            var analyticsPageType = scriptURL.getQueryStringValue(Analytics.PAGE_TYPE_QUERY_KEY, Analytics.PageType.REPORT_VIEWER);

            if(!window.$A) {
                window.$A = new Analytics();
            }

            window.$A.init(analyticsPageType);

            tag.attr(Analytics.LOADED_SCRIPT_KEY, 'true');
        });
    } catch (e) {
    }
}

_CustomUtilInit();

Of course this expects that the jQuery libraries were included before the Custom.js files in each of the previously mentioned JavaScript files.

The URI class is something that I’ve found on the internet and tweaked for our use. If you have any questions regarding the custom JavaScript loading please leave a comment and I’ll do my best to elaborate some more.