Solved: How to insert cells from a Qlik Sense table into a... - Qlik Community

MarcosPauloSR1 · ‎2023-09-14

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&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.

alex_colombo · ‎2023-10-02

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)
	})
});

View solution in original post

alex_colombo · ‎2023-10-02

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)
	})
});

MarcosPauloSR1 · ‎2023-10-20

It worked, thank you very much!

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

API

Extension

Integration