Loading CubeViewer objects with the JavaScript library

Use a combination of JavaScript and Dojo to instantiate a CubeViewer object. After the object is loaded, you can then assign it as a child of a Dojo tab container or other container to display it in your web page.

You load a CubeViewer object by using the following format to specify the required properties and optional functions that define the object.

new CubeViewer({properties ..., functions ...});

The properties include values that specify the login credentials and the CubeViewer object that you want to open.

The functions can include optional code to notify you about onLoad and onTitleDimensionElementChange events for the object.

For more information, see Cognos TM1 Web JavaScript library CubeViewer class.

Example

The following example shows a JavaScript function that uses a combination of JavaScript and Dojo syntax to load a CubeViewer object.

The code to instantiate the object must use the specific Dojo syntax and the Dojo require keyword. After the object is loaded, the function assigns it as the child of a Dojo tab container object (dijit.layout.TabContainer).

function loadCubeview() {
    require([
        "tm1web/cubeview/CubeViewer",
        "dojo/_base/unload"
    ], function(CubeViewer, unload) {
        loadedCubeview = new CubeViewer({
            adminHost: "localhost",
            tm1Server: "Planning Sample",
            cube: "plan_BudgetPlan",
            view: "Budget Input Detailed",
            isPublic: true,
            title: "Budget Input Detailed",
            onLoad: function() {
                console.debug("CubeViewer loaded successfully.");
            },
        });

        // Assign object to a UI container
        dijit.byId("tabContainer").addChild(loadedCubeview);

        loadedCubeview.startup();

        unload.addOnUnload(function() {
            loadedCubeview.destroy();
        });
    });
};

The following example loads a CubeViewer object by using a session token for the login.

function loadCubeview() {
    require([
        "tm1web/cubeview/CubeViewer",
        "dojo/_base/unload"
    ], function(CubeViewer, unload) {
        loadedCubeview = new CubeViewer({
            sessionToken: "yourSessionToken",
            cube: "plan_BudgetPlan",
            view: "Budget Input Detailed",
            isPublic: true,
            title: "Budget Input Detailed",
            onLoad: function() {
                console.debug("CubeViewer loaded successfully.");
            },
        });

        // Assign object to a UI container
        dijit.byId("tabContainer").addChild(loadedCubeview);
        
        loadedCubeview.startup();
        
        unload.addOnUnload(function() {
            loadedCubeview.destroy();
        });
    });
};