Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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>Vendas de Veiculos Grupo Saga</h2>
<h4>Vendas Totais Grupo Saga</h4>
-->
<h2>Total Sales</h2>
<table class="table table-sm fieldList" id="camposTabela">
<thead class="linhaTitulo">
</thead>
<tbody>
<!--<tr class="rotulos" id="linhaTotal">
<th scope="col" id="totais">TOTAL</th>
</tr>
As linhas serão adicionadas aqui dinamicamente -->
<tr class="valoresTotais">
</tr>
</tbody>
</table>
<div class="flex-container">
</div>
<!--Error Popup-->
<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:
/*
* 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.
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)
})
});
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)
})
});
It worked, thank you very much!