Creating a view (other than a sign-in view)

The SampleWelcome.zip sample is an example of a view that replaces the built-in home view with an alternate version that includes branding for the Sample Outdoors Company.

The SampleWelcome.zip sample contains a spec.json file that defines the view. This file is shown here.

{
  "name": "Sample_Welcome",
  "schemaVersion": "2.0",
  "extensions": [{
    "perspective":"Sample welcome",
    "type":"home",
    "features": [{
      "id": "com.sample.welcome",
      "excludeItems": ["com.ibm.bi.glass.common.cognosLogo"],
      "toolItems": [{
        "id": "brandLogoHomePage",
        "containerId" : "com.ibm.bi.glass.appbarLeadingGroup",
        "type": "bi/glass/app/plugins/GlassPlugin",
        "class": "cognosIcon cognosLogo",
        "label":"theme.current.brandTextSmall",
        "icon": "theme.current.images.brandIconSmall",
        "weight": 995
        }],
      "content": {
        "type":"v1/ext/Sample_Welcome/js/views/SampleWelcomeView",
        "options": {
          "info":{
            "title":"Sample welcome",
            "icon":"v1/ext/Sample_Welcome/images/bee_blue.svg"
          }
        }
      },
      "cssStyles": [
        "v1/ext/Sample_Welcome/css/SampleWelcomeCSS.css"
        ]
    }]
  }]
}

The view is referred to as Sample welcome in the managing customization panels. The spec.json file links to a SampleWelcomeView.js file in the js/views subfolder of the view. The "type":"home" entry indicates this view can be set to be the default home view. The cssStyles element defines the .css file used when displaying the view.

The SampleWelcomeView.js file is shown here.

/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: BI Glass
 *
 * Copyright IBM Corp. 2015
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted 
 * by GSA ADP Schedule Contract with IBM Corp.
 */
define(['q',
  'text!./SampleWelcomeView.html',
  ], function(Q, html) {
  'use strict';

  var ContentView = function(){
    
    /**
     * Called by the AppController whenever this view is created
     *
     * @public
     * @returns {Promise} promise resolved to the root DOM element for this view.
     */
    this.open = function(context, options) {
      this.logger = context.logger;
      this.options = options;
      var deferred = Q.defer();
        
      var root = document.createElement('div');
      root.setAttribute('class','welcome');
      
      root.innerHTML = html;
      deferred.resolve(root);
      return deferred.promise;
    };
    
    /**
     * Called by the AppController whenever this view is destroyed
     *
     * @public
     */
    this.close = function() {
      this.logger.info('close');
    };
    
    /**
     * Called by the AppController whenever this view is shown
     *
     * @public
     */
    this.onShow = function() {
      this.logger.info('onShow');
    };
    
    /**
     * Called by the AppController whenever this view is hidden
     *
     * @public
     */
    this.onHide = function() {
      this.logger.info('onHide');
    };
    
    /**
     * Called by the AppController whenever display Info is required for this view
     *
     * @public
     * @returns {Object} displayInfo - The displayInfo for this view.
     * @returns {string} displayInfo.title - The title.
     * @returns {string} displayInfo.icon - The icon.
     */
    this.getDisplayInfo = function() {
      this.logger.info('getDisplayInfo');
      return {
        'title':this.options.info.title,
        'icon': this.options.info.icon
      };
    };

  };

  return ContentView;

});

This file refers to the SampleWelcomeView.html that is displayed when the view is invoked.

This JavaScript code uses the View API in a JavaScript AMD module. This implementation uses the JavaScript Q library. The View API consists of the following methods. methods.

promise open(content. options)

This method is invoked when the view is opened. It returns a Q promise object with the DOM element that represents the view as the resolved value.

context

Contains the context object.

options

Contains the options included in the spec.json file.

void close()

Invoked just before closing the view.

void onShow()

Invoked just before showing the view.

void onHide()

Invoked just before hiding the view.

getDisplayInfo()

Returns the title and associated icon of the view.