Um dos recursos que mais me apaixona no Qlik Sense é a capacidade de facilmente podermos embarcar seus objetos em uma página HTML podendo criar uma solução totalmente amigável.

Alguns exemplos que gosto sempre de apresentar

 

Como isso funciona?

Através de API´s abertas o Qlik Sense pode disponibilizar um gráfico construído em uma app, uma lista para o usuário selecionar ou até mesmo um subconjunto de dados sumarizados (hipercubo)

 

Veja abaixo um exemplo super simples de como exibir utilizando-se a biblioteca QDT-Components . Essa lib disponibilizada em modelo Open Source pode ser usada em

  • HTML plano
  • Angular 6
  • React 16
  • Vue 2

 

Como faço?

Pre-requisito: Você precisa ter acesso a um Qlik Sense Enterprise (se não tiver, para aprender pode utilizar o PlayGround)

 

1 - Baixe a última versão do QTD Components (url)

2 - Embarque esse js na sua página HTML

<script type="text/javascript" src="qdt-components.js"></script>

3 - Configure a conexão com seu Qlik Sense Enterprise

<script type="text/javascript">
  var options = {
    config: {
      host: "sense-demo.qlik.com",
      secure: true,
      port: 443,
      prefix: "/",
      appId: "133dab5d-8f56-4d40-b3e0-a6b401391bde"
    },
    connections: {
      vizApi: true,
      engineApi: true
    }
    }
</script>

 

4 - Adicione um objeto à sua página

<divid="qdt1"></div>

 

5 - Agora basta "pedir" à API para exibir qualquer objeto da sua aplicação (passando o ID)

<script>
var qdtComponents = new QdtComponents(options.config, options.connections);
  var element = document.getElementById('qdt1');
  qdtComponents.render('QdtViz', {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}, element);
</script>

 

Dica: Se você estiver hospedando a sua página em outro servidor que não o Qlik Sense você deve liberar o "Access-Control-Allow-Origin" no seu Virtual-Proxy. Abaixo eu liberei qualquer host na minha máquina, no seu caso, provavelmente você vai querer colocar apenas o host de onde está sua página HTML

Cross.PNG

 

 

 

Documentação: Qlik Playground