Documentação

Como usar o UI Power Pack no Power BI

O UI Power Pack foi criado para ajudar analistas, desenvolvedores e entusiastas de dados a transformarem dashboards em experiências visuais marcantes. Aqui você aprende a implementar visuais HTML diretamente no Power BI de forma simples, leve e eficiente.

Colaborar

📁 Baixe o exemplo completo

Experimente o UI Power Pack na prática! Baixe o arquivo .PBIX de exemplo (compactado em .ZIP) e explore os visuais HTML aplicados dentro do Power BI.

Baixar arquivo .ZIP

💡 O arquivo inclui um modelo com componentes prontos, exemplos de medidas e estrutura básica de visual HTML.

Passo 1 — Prepare seu Power BI

Abra o Power BI Desktop e realize normalmente a carga da sua fonte de dados. Esse será o ambient e onde aplicaremos os componentes HTML.

Power BI Desktop interface

Interface do Power BI Desktop, onde os visuais HTML serão implementados.

Passo 2 — Adicione o visual HTML

  1. No painel de Visualizações, clique nos três pontos (...) para abrir a opção “Obter mais visuais”.
  2. Pesquise por “HTML Content”, recomendo o uso do HTML Content Lite por ser leve e compatível.
  3. Clique em “Adicionar” para instalar o visual.
    4. Power BI Desktop interface

    Interface para adicionar um novo visual.

Passo 3 — Insira o componente

  1. Com o visual HTML adicionado, selecione-o para abrir o espaço de edição.
    2. Power BI Desktop interface
  2. No site do UI Power Pack, copie o código do componente desejado (botão “Power BI”).
    3. Power BI Desktop interface

    Acessando a biblioteca de visuais para escolher um e copiar o codigo HTML.

  3. No Power BI, crie uma nova medida e cole o código copiado nela.
⚠️ Atenção — pontos importantes
  • ✅ O código deve estar entre aspas duplas apenas no início e no fim. Nenhuma outra parte do código deve conter aspas duplas internas.
  • ✅ Para incluir valores dinâmicos (como uma métrica), use: 
    & [NomeDaSuaMedida] &
  • Exemplo de uso: 
    HTML = "<div>" & [Total Vendas] & "</div>"
Power BI Desktop interface

Valide o código com atenção antes de finalizar a medida no Power BI.

Então, em resumo: onde há valores fixos no código HTML, você pode inserir suas métricas dinâmicas conforme mostrado acima, assim o visual passa a exibir dados reais diretamente do Power BI.

Aqui é onde a criatividade brilha! Você pode personalizar completamente seus componentes — adicionar novas linhas, combinar elementos visuais, alterar cores com base em regras e até incluir lógicas condicionais com DAX. Experimente, teste variações e transforme seus dashboards em algo realmente único.

Dica avançada

Use funções DAX como IF(), SWITCH() ou expressões condicionais para alterar textos, cores e ícones dinamicamente — criando visuais inteligentes e interativos que se adaptam em tempo real conforme seus dados mudam.

Resultado final

Agora o seu visual HTML está totalmente implementado no Power BI. Ajuste estilos, adicione animações e crie experiências visuais exclusivas que comunicam mais e impressionam o público.

Power BI Desktop interface

É assim que fica após implementar sem nenhum erro.

Não se esqueça de validar todos os pontos para evitar erros e aproveitar 100% de todos os visuais.
Aproveite com moderação.