Embarcando objetos Qlik Sense em sua página HTML

[Clever_Anjos]

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

• Painel de Preços
• CIO Dashboard
• The Walking Dead Dashboard
• Marketing 360o

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

Documentação: Qlik Playground

[marco_almeida]

Muito legal. Uma das coisas que me fez solicitar a empresa a mudança para o Sense foi justamente essa. Realmente é um recursos extremamente interessante e muito útil.

Essa página do Ministério do Planejamento não conhecia. Ficou super 10!

Para exibir todos os objetos assim é necessário alguma licença especial?

Abraços!

[Thiago_Justen_]

Totalmente excelente cuv‌. Cada dia mais, nesses meros 6 meses de experiência com Qlik, eu me apaixono por suas funcionalidades.

[Clever_Anjos]

O Ministério do Planejamento fez um licenciamento por core (capacidade de máquina) e usuários ilimitados.

Mas os mesmos conceitos podem ser usados em um Qlik Sense Enterprise com licenciamento por usuário

[marco_almeida]

Show!

[richardsupri]

Oi Clever,

como funciona o licenciamento por core?

voce pode me explicar?

e se um servidor de HTML for um usuario e varias máquinas pedirem para acessar o API, ele entende como uma só consulta de um usuario só?

[dhsilva7]

Que Fantástico!!!

[felipedl]

Uma questão de usabilidade que me deixa um pouco inquieto (que não sei se é uma questão de navegador, no caso o Chrome) é quando tento usar os gráficos com rolagem usando o scroll do mouse há também a rolagem da página como um todo e nisso, é necessário utilizar a rolagem nativa do gráfico para verificar os demais valores.

Fora isso, a ideia é bem interessante.

[Clever_Anjos]

No licenciamento por core o funcionamento é idêntico e o Qlik gerencia cada sessão

Olha um exemplo aqui: Painel de Preços