How to insert cells from a Qlik Sense table into an HTML table using mashup?

MarcosPauloSR1 — Thu, 14 Sep 2023 18:44:45 GMT

Good afternoon,

I have a demand that consists of transforming an application into a mashup with HTML formatting. In this application there are several tables, I can search through the hypercube for the label row and the totalizing row, but I cannot search for the cells that contain detailed information, this is because the qDataPages object has an empty matrix. To try to get around this problem, I tried using the qlik.table API, but without success. Can anyone help me?

I have a simple HTML page that returns the values of the label and totalizer lines correctly:

But cell values do not appear in qDataPages object

When I do a console.log() on the qlik.table object, it returns an empty object

My codes are the following:

HTML:

<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Qlik Sense Mashup</title> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="cleartype" content="on"> <link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css"> <link rel="stylesheet" href="WKF_Vendas_Veiculos.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="../../resources/assets/external/requirejs/require.js"></script> <script src="WKF_Vendas_Veiculos.js"></script> </head> <body style="overflow: auto" ng-app>  <h2>Total Sales</h2> <table class="table table-sm fieldList" id="camposTabela"> <thead class="linhaTitulo"> </thead> <tbody>  <tr class="valoresTotais"> </tr> </tbody> </table> <div class="flex-container"> </div>  <div id="popup"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closePopup"><span aria-hidden="true">×</span></button> <p id="popupText"></p> </div> </body> </html>

Javascript&colon;

/* * Basic responsive mashup template * @owner Enter you name here (xxx) */ /* * Fill in host and port for Qlik engine */ var prefix = window.location.pathname.substr(0, window.location.pathname.toLowerCase().lastIndexOf("/extensions") + 1); var config = { host: window.location.hostname, prefix: prefix, port: window.location.port, isSecure: window.location.protocol === "https:" }; require.config({ baseUrl: (config.isSecure ? "https://" : "http://") + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources" }); require(["js/qlik"], function (qlik) { qlik.setOnError(function (error) { $('#popupText').append(error.message + "<br>"); $('#popup').fadeIn(1000); }); $("#closePopup").click(function () { $('#popup').hide(); }); //callbacks -- inserted here -- //open apps -- inserted here -- var app = qlik.openApp('d65c8ecb-53f1-430a-af5b-a6727c97194e', config); app.getObject('nCnLLMm').then(function (dados) { console.log(dados) //Adicionando a primeira linha const tableHead = document.getElementById("camposTabela").getElementsByTagName('thead')[0]; const row = tableHead.insertRow(); const cell1 = row.insertCell(); /*const cell2 = row.insertCell();*/ document.createElement('tr'); for (let column = 0; column <= dados.layout.qHyperCube.columnOrder.length; column++) { let colunas = document.createElement('th') colunas.textContent = dados.layout.qHyperCube.qMeasureInfo[column].qFallbackTitle row.insertCell().appendChild(colunas)[column]; } }); app.getObject('nCnLLMm').then(function (dados) { //Adicionando a linha de totais const totals = document.getElementById("camposTabela").getElementsByTagName('tbody')[0]; console.log(qlik.table(this)) const tamanho = dados.layout.qHyperCube.qGrandTotalRow.length //console.log(tamanho) const rowTotals = totals.insertRow(); //const cell2 = rowTotals.insertCell() let colunaTotal = document.createElement('th'); colunaTotal.textContent = "TOTAL"; rowTotals.insertCell().appendChild(colunaTotal)[0] rowTotals.style.backgroundColor = "lightyellow"; for (let column = 0; column < tamanho; column++) { let colunas = document.createElement('th') colunas.textContent = dados.layout.qHyperCube.qGrandTotalRow[column].qText rowTotals.insertCell().appendChild(colunas)[column]; } }); });

How to implement logic to get all cells from a table?

Thank you very much in advance.

Re: How to insert cells from a Qlik Sense table into an HTML table using mashup?

alex_colombo — Mon, 02 Oct 2023 13:25:17 GMT

Hi @MarcosPauloSR1 , when you are getting an object you will not always get the data. For reading the hypercube behind an object you have to use getHyperCubeData from Engine APIs exposed from Capability APIs. Keep in mind that you can use current object layout for defining qWidth and qHeight. Please see an example below

app.getObject('QV01','PPpaS').then(function (viz) { const hyperCubeDef = { "qPath": "/qHyperCubeDef", "qPages": [ { "qLeft": 0, "qTop": 0, "qWidth": 3, "qHeight": 10 } ] } viz.getHyperCubeData(hyperCubeDef).then(function (data) { console.log('data: ', data[0].qMatrix) }) });

Re: How to insert cells from a Qlik Sense table into an HTML table using mashup?

MarcosPauloSR1 — Fri, 20 Oct 2023 17:14:07 GMT

It worked, thank you very much!

topic Re: How to insert cells from a Qlik Sense table into an HTML table using mashup? in Integration, Extension & APIs

How to insert cells from a Qlik Sense table into an HTML table using mashup?

Re: How to insert cells from a Qlik Sense table into an HTML table using mashup?

Re: How to insert cells from a Qlik Sense table into an HTML table using mashup?