Using the Visualization API to create the new container object in Qlik Sense June 2019

[Francis_Kabinoff]

With Qlik Sense June 2019 comes the addition of a container object to the list of native objects. The new container object allows you to add Qlik Sense visualizations in a limited space by using tabs to switch between the visualizations. Developers can use the Visualization API to create container objects and add visualizations to it on the fly.

You can check out the documentation for the creating a container object with the Visualization API at https://help.qlik.com/en-US/sense-developer/June2019/Subsystems/APIs/Content/Sense_ClientAPIs/Capabi.... Let’s walk through the example of creating a container object and adding some visualizations to it from the docs.

The first step is to create a few visualizations. There's no need to show them yet, but the promises need to be resolved so the visualization objects can be used.

// create some visualizations
var bar = app.visualization.create('barchart', ["Dim1","=num([Expression1])"],{ title:"Great on-the-fly barchart" });
var line = app.visualization.create('linechart', ["Dim1","=Sum([Expression1])"],{ title:"Great on-the-fly linechart" });
var pie = app.visualization.create('piechart', ["Dim2", "=Sum([Expression2])"], { title: "Great on-the-fly piechart" });
// wait for the promises to resolve so the visualization objects can be used
Promise.all([pie, bar, line]).then(function(data) {
  // the rest of the code will go here
});

The next step is to create the container. Let's take a look at that.

// create the container object using the Visualization API
app.visualization.create('container', null, {
        // only a couple of options are set here, but you can refer to the docs for other available options
        title: 'My container',
        showTitles: true 
    }).then(function(container) { 
        // the rest of the code will go here
    });

Now that the container has been created, it's time to add visualizations to it, and then to show the container. That will look like this.

// loop through the visualization objects
for (var i = 0; i < data.length; i++) {
    // use the getProperties method on each visualization object model to get its qProp
    data[i].model.getProperties().then(function(child) {
        // use the createChild method on the container object model to add each child to the container
        container.model.createChild(child);
    });
}
// show the container on element with id="QV02"
container.show("QV02");

Now the container is created and displayed. There are two methods used above from the Engine API on the model of visualization objects, which are really just generic objects, which you may not be familiar with if you are not familiar with the Engine API. I've linked to those below.

https://help.qlik.com/en-US/sense-developer/June2019/APIs/EngineAPI/services-GenericObject-GetProper...

https://help.qlik.com/en-US/sense-developer/June2019/APIs/EngineAPI/services-GenericObject-CreateChi...

You can also save a reference to the child when using the createChild method, so you can later remove it from the container object if that's something that you anticipate. You would just use the id of the reference to the child in the destroyChild method you can find here https://help.qlik.com/en-US/sense-developer/June2019/APIs/EngineAPI/services-GenericObject-DestroyCh....

It looks like this when all put together.

var bar = app.visualization.create('barchart', ["Dim1","=num([Expression1])"],{ title:"Great on-the-fly barchart" });
var line = app.visualization.create('linechart', ["Dim1","=Sum([Expression1])"],{ title:"Great on-the-fly linechart" });
var pie = app.visualization.create('piechart', ["Dim2", "=Sum([Expression2])"], { title: "Great on-the-fly piechart" });
Promise.all([pie, bar, line]).then(function(data) {
    app.visualization.create('container', null, {
        title: 'My container',
        showTitles: true 
    }).then(function(container) { 
        for (var i = 0; i < data.length; i++) {
            data[i].model.getProperties().then(function(child) {
                container.model.createChild(child);
            });
        }
        container.show("QV02");
    });
});

That's how to create the new container object and add visualizations to it using the Visualization API.