Loading CubeViewer objects with the JavaScript library

Use JavaScript to instantiate a CubeViewer object. After the object is created, you can then assign it as a descendant of the document body 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 TM1 Web JavaScript library CubeViewer class.

Example

The following example shows a JavaScript function that loads a CubeViewer object.

The code to instantiate the object must use the specific AMD syntax and the Dojo require keyword. After the object is created, the function assigns it as the child of a document body.


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

        // Add cubeview to the document body
        document.body.appendChild(loadedCubeview.domNode);

        loadedCubeview.startup();
    });
};

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

function loadCubeview() {
    require([
        "tm1web/api/CubeViewer",
    ], function(CubeViewer) {
        var loadedCubeview = new CubeViewer({
            sessionToken: "yourSessionToken",
            cube: "plan_BudgetPlan",
            view: "Budget Input Detailed",
            isPublic: true,
            onLoad: function() {
                console.debug("CubeViewer loaded successfully.");
            }
        });
        
        // Add cubeview to the document body
        document.body.appendChild(loadedCubeview.domNode);

        loadedCubeview.startup();
    });
};