Referencing a native table in a mashup using the Capability API / JS API

There are situations where the developer wants to know the size of the table nested inside a given mashup, also there are situations where we want to pars through different columns and rows and be able to pull data as desired or maybe do some additional calculations as we loop. The problem many people face is how can we get hold of the table instance within JavaScript and then be able to read its properties and then use them as needed. Properties like table size or get a specific column and then loop through its values and be able to use them for some calculations or print them in a layout different than that of a table.

In this example we have a couple of prerequisites in place:

1. We are using Qlik Sense Desktop 3.1.2.
2. The table was created in Qlik Sense has 2 columns and 4 rows, of course you may have more if you wish.
3. The table was added initially to Qlik Sense canvas and then reused in a mashup by just dragging and dropping it into the mashup.
4. When the Qlik Sense Dev-Hub is used, this automatically generates a number of files for you. In this article we focus on the HTML and JS files, these are basically the crucial parts of your mashup.

So our example table looks like this:


And we want to display the following information:



 

1. You may create an in-line load script for a dummy table with 2 columns and 4 rows.
2. Go to Qlik Sense canvas and place a table there, add the fields so you have something to show in the table.
3. Go to the Qlik Sense Dev-Hub and create a new mashup, then drag and drop the same table we created in the previous step.
4. Note that by now you have an HTML file, find a suitable place where you want to out put the table properties. In my case I created a new div as in <div id="tableResult"></div> a place holder for what I want to show as I parse the table.
5. Go to the JS file, spot where the table is referenced by default for the display purpose, you will see a line like this already generated for you:

//get objects -- inserted here --
app.getObject('QV01','FAqRJKB');
 
Below this please add the following snippet, you may read the code comments for more details on what is happening here:

app.getObject("FAqRJKB").then(model => {   
        // Show size of the table, which is qcx * qcy
        // qcx number of columns and is qcy the height or number of rows
        var totaColumns = model.layout.qHyperCube.qSize.qcx;
        var totaRows = model.layout.qHyperCube.qSize.qcy;

        $("#tableResult").append("Total columns = " + totaColumns + ".   Total rows = " + totaRows + '<br>');

        var count = 0; // Just a counter for counting while we loop through rows
        // Fetch a page of data, in this case a page can have a max of 10000 cells (10 * 1000).
        model.getHyperCubeData('/qHyperCubeDef', [{ 
        qTop: 0,  
        qLeft: 0,  
        qWidth: 10,  
        qHeight: 1000 
      }]).then( data => data.qDataPages[0].qMatrix.forEach(
       function(element){
               count++;
        // Show values in in the second column, note we used static index of 1
        // where if 0 was used this will give us the values in first column    
        $("#tableResult").append('<br> ' + count + ' => ' + element[1].qText);
                           }
                     )
              ) 
    }) ;
 
The final project can be found as an attached zip file. You are most welcome to update the article if you spot something missing.