Cognos Analytics

Customizing the Cognos Analytics 11.2 home page

By Tim Aston posted Wed April 07, 2021 10:53 AM

  
In a previous blog, I told you all about the amazing new home page in Cognos 11.2.  In this blog, I'm going to tell you about some of the ways you can customize that home page so that you can tailor it for your organization's users.

Here is an example of a highly customized home page.  I will summarize how I was able to achieve these different custom features.


Themes

Themes are a feature that have existed in Cognos since version 11.0.  They let you add some branding and colours to the Cognos UI.  Existing themes continue to be supported as-is in Cognos 11.2, and there are some new features that you will be able to take advantage of.    Themes are uploaded by going to 'Manage' and choosing 'Customization':



 Below is the theme's 'spec.json' that I used in the example home page I posted.

{
"name": "GO_Theme",
"schemaVersion": "1.0",
"brandText": "The Great Outdoors Company",
"brandTextSmall": "Great Outdoors",
"uiShellTheme": "light",
"welcomeBannerTitle": "Welcome to The Great Outdoors analytics portal",
"welcomeBannerDescription": "Everything you need to analyze Great Outdoors performance is here. You will find reports and dashboards and much more!",
"images": {
"brandIcon": "images/go-logo-small.png",
"brandIconSmall": "images/go-logo-small.png",
"favicon": "images/go-logo.png",
"welcomeBannerBgImage": "images/go-logo.png"
},
"colors": {
"appbarBackground": "#22B0E5",
"appbarForeground": "black",
"appbarSelectLine": "#0070a5",
"appbarPushButtonBackground": "#1190b5",
"navbarBackground": "rgb(240, 246, 235)",
"navbarForeground": "black",
"navbarSelectLine": "rgb(26, 83, 54)",
"navbarPushButtonBackground": "rgb(0, 138, 0)"
}
}

Quick Launch extensions

Extensions  are another feature that has been in Cognos for a while, but in 11.2 we have created some new extension points.   Extensions are also uploaded in the 'Customization' section of 'Manage', using the 'Extensions' tab.

One of the new extension points is the Quick Launch section of the home page.  You can create extensions that define your own custom quick launch tiles.  Below is an example 'spec.json' for a custom quick launch tile to launch  an HR portal.   The 'CustomQuickLaunchActionController.js' code (which must be zipped up with the 'spec.json' file) would simply open up the URL for the portal in a new browser tab.

{
"name": "CustomQuickLaunch",
"schemaVersion": "1.0",
"version": "1.1.1",
"extensions": [
{
"perspective": "home",
"features":[{
"id": "com.ibm.bi.caHome.customQuickLaunch",
"collectionItems": [{
"containerId": "com.ibm.bi.caHome.quickLaunch",
"id": "com.ibm.bi.caHome.quickLaunch.customQuickLaunch",
"name": "CustomQuickLaunch",
"weight": 600,
"actionController": "v1/ext/CustomQuickLaunch/js/CustomQuickLaunchActionController.js",
"properties": {
"title": "HR Portal",
"description": "Need HR data? Go to our seperate HR portal for that."
}
}]
}]
}
]
}

Home page tab extensions

Another new extension point in 11.2 are the tabs that appear near the bottom of the home page.  You can create extensions that add new tabs here.  These tabs can point to a folder in your content, or they can contain Javascript code.  This allows you to imbed any custom content you want, such as a news feed to an embedded report, like below:



In this example 'spec.json' you can see that there are 2 tabs that use custom Javascript code, and another that points to a folder within Team Content.

{
"name": "CustomizedTab",
"extensions": [
{
"perspective": "home",
"features": [
{
"id": "com.ibm.caHome.customizedTabFeature",
"collectionItems": [
{
"containerId": "com.ibm.bi.caHome.navigator",
"id": "com.ibm.bi.caHome.navigator.customizedTab",
"name": "customizedTab",
"label": "Today's News",
"weight": 600,
"module": "v1/ext/CustomizedTab/js/CustomizedTabView",
"properties": {}
},
{
"containerId": "com.ibm.bi.caHome.navigator",
"id": "com.ibm.bi.caHome.navigator.reportTab",
"name": "reportTab",
"label": "Sales Map",
"weight": 2,
"module": "v1/ext/CustomizedTab/js/ReportTabView",
"properties": {}
},
{
"containerId": "com.ibm.bi.caHome.navigator",
"id": "com.ibm.bi.caHome.navigator.customizedNavigatorTab",
"name": "customizedNavigatorTab",
"label": "Latest sales reports",
"weight": 0,
"properties": {
"path": ".public_folders/Sales Reports",
"toolbar": [
"filter",
"sort",
"refresh",
"settings"
],
"listOptions": true
}
}
]
}
]
}
]
}

Conclusion

As you can see, we've made a lot of enhancements to customization in Cognos 11.2.  These changes will allow you to create the exact experience that your users are demanding.
11 comments
95 views

Permalink

Comments

17 days ago

Hi,

With some help of IBM Customer support I was able to get an example of the necessary Java-script to open a report or dashboard in a tab. See the code snippet below:

define(['react'],
  function(React) {
    class CustomizedTabView {
      constructor(options) {
        this.glassContext = options.glassContext;
        this.itemSpec = options.itemSpec;
      }
      render() {
        var content = React.createElement('iframe', {
          style: {
            width: "100%",
            height: "100%"
          },
          src: '<URL to report/dashboard>" width="320" height="200" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen=""'
        }, '');
        return content;
      }
    }
    return CustomizedTabView;
  });

To hide the edit-buttons and header of Cognos within the tab you have to add extra parameter to the URL: &ui_appbar=false&ui_navbar=false&shareMode=embedded

The Java-script should be saved as a file in a subfolder js. If I refer to the original post of Tim, you should name it "ReportTabView.js". In de JSON extension with all the tabs you refer to the Java-script(s).

"module": "v1/ext/CustomizedTab/js/ReportTabView"

If you want to create multiple tabs, you have to create multiple Java-scripts as well (for each tab a js-file with the proper URL).


17 days ago

Thanks Tim,

I'll second the request for a copy of the javascript code.

Regards
Matt

Tue August 10, 2021 03:45 PM

Hi Tim,

Are you able to share the javascript code behind CustomizedTabView and ReportTabView?

Thanks,
Nipun

Thu August 05, 2021 11:18 AM

@René Kent Nielsen I've never tried doing a full image, but it is likely possible.  You'd put the image in your extension, have the CSS reference that as the background-image, and you may have to tweak some other CSS properties as well.  You'll need to play around a bit.  One thing to be aware of is that the more CSS hacking you do, the more you increase the odds of your extension not working 100% with newer Cognos versions.​

Thu August 05, 2021 02:29 AM

@Tim Aston is it possible to use a image as background in the extension ?

.ca-home-welcomeBanner {
  background-image: none !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #D4A37D 100%) !important;
}

And what is the syntax ?

Wed August 04, 2021 10:51 AM

@Michael Schesny I didn't actually extend the image, I altered the background to match the image (which has a transparent background).  I did this by creating a separate extension that just pointed to a CSS file with the following:
.ca-home-welcomeBanner {
  background-image: none !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #D4A37D 100%) !important;
}

Wed August 04, 2021 10:48 AM

@René Kent Nielsen there's no way to remove that button currently, sorry.​

Wed August 04, 2021 08:01 AM

Thank you @Tim Aston for sharing your knowledge with us! I do have a question regarding the welcome banner: How can I extend my background picture to the full size of the welcome banner (as it is in your example above)? So far it only appears partially on the welcome banner, with lots of black space around it. It would be awesome if you had a solution for this as well!
All the best
MS

Tue August 03, 2021 10:15 AM

Hi @Tim Aston ​, thanks for the good blog.
I wonder how to remove or change the "Watch video" icon on the welcome banner ?

Br
René

Tue May 18, 2021 02:51 AM

Can we control Quick Launch widgets and Home page tabs based on security (roles/groups) so that different widgets or tabs appear for different users?

Sun May 16, 2021 10:52 AM

Great job @Tim Aston. Where can I find the used javascripts. I don't see them in the examples provided by IBM.​