Skip to main content
Announcements
Marching toward a simplified navigation! READ ON
cancel
Showing results for 
Search instead for 
Did you mean: 
MarcosPauloSR1
Contributor II
Contributor II

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

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:

MarcosPauloSR_0-1694716394905.png

But cell values do not appear in qDataPages object

MarcosPauloSR_1-1694716485065.png

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

MarcosPauloSR_2-1694716577279.png

 

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.

Labels (3)
1 Solution

Accepted Solutions
alex_colombo
Employee
Employee

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

2 Replies
alex_colombo
Employee
Employee

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
Contributor II
Contributor II
Author

It worked, thank you very much!