Como criar cartões personalizados com HTML e IA no Power BI

Se você já sentiu que os cartões nativos do Power BI limitam o visual dos seus dashboards, saiba que é possível ir além usando cartões personalizados em HTML. Essa abordagem permite criar cards muito mais atraentes, com emojis, estilos avançados e design flexível, tudo com o apoio da inteligência artificial. O resultado: relatórios que realmente se destacam, diferencial importante para quem busca reconhecimento, promoção ou quer ganhar espaço na área de dados.

Neste artigo, mostramos o passo a passo completo para transformar seus cartões, desde a instalação do visual HTML Content, a geração e ajuste do código com IA, até a inserção e personalização no dashboard. Essa habilidade é um divisor de águas para quem quer inovar no Power BI e avançar na carreira.

Caso prefira aprender por vídeo, assista à aula completa: https://www.youtube.com/watch?v=K2BxWLsHctY

O que você vai aprender

• Por que cartões em HTML superam os visuais nativos do Power BI
• Como instalar e usar o visual "HTML Content" da Microsoft Store
• Gerar e adaptar códigos HTML com inteligência artificial (ChatGPT)
• Inserir cartões HTML personalizados no seu dashboard
• Dicas para potencializar o impacto visual e a eficiência do design

Por que criar cartões em HTML no Power BI?

Os cartões nativos do Power BI são práticos, mas limitados em termos de personalização de design. Muitas vezes, dashboards acabam ficando com uma aparência padronizada, sem elementos visuais diferenciados. Cartões em HTML, por outro lado, permitem adicionar emojis, cores dinâmicas, formatação avançada e muito mais. Isso não só melhora a comunicação dos dados, como também demonstra domínio técnico e atenção ao detalhe — características valorizadas em processos seletivos e promoções na área de dados.

Passo 1: Baixando o visual HTML Content

O primeiro passo é instalar o visual personalizado chamado "HTML Content" direto da Microsoft Store do Power BI. Esse visual permite renderizar códigos HTML dentro do relatório, possibilitando criar cartões com qualquer formatação desejada.

1. No Power BI Desktop, clique nos três pontinhos abaixo dos ícones de visualização.
2. Selecione Obter mais visuais.
3. Na barra de pesquisa, digite HTML e localize o visual HTML Content.
4. Clique em Adicionar para inserir o visual ao seu painel de visuais.

Após a instalação, o ícone do HTML Content aparecerá nos seus visuais disponíveis. É importante lembrar que, para baixar novos visuais da Microsoft Store, você precisa estar usando uma conta empresarial no Power BI. Se não tiver, ainda é possível acessar arquivos que já contenham o visual instalado para treinar e criar seus dashboards.

Se sua conta pessoal não permite baixar o visual, utilize um arquivo que já tenha o HTML Content instalado. Assim, você consegue experimentar todas as funcionalidades normalmente.

Passo 2: Gerando o código HTML com inteligência artificial

Com o visual HTML Content pronto para uso, é hora de criar o código HTML que será exibido no cartão. Usar inteligência artificial, como o ChatGPT, facilita (e muito) esse trabalho, especialmente se você não domina HTML.

1. No ChatGPT (ou outra IA), peça:

   "Crie um card com a medida total em vendas usando HTML para o Power BI"

2. A IA irá sugerir um código que, normalmente, utiliza uma medida chamada Total em Vendas.
3. Analise o código gerado — você precisará adaptar os nomes das tabelas e colunas para refletir sua base de dados real.

Ao receber o código, repare que a IA pode sugerir a criação de uma medida separada no Power BI (por exemplo, Total em Vendas). No entanto, é mais eficiente já embutir a fórmula de soma diretamente no código HTML, simplificando a manutenção e reduzindo erros.

Passo 3: Adaptando a medida ao seu contexto

É comum a IA não saber o nome exato das tabelas e colunas da sua base. Por isso, ajuste o código para refletir sua realidade. Por exemplo, se sua tabela se chama base e a coluna relevante é valor, substitua as referências no código:

Total em Vendas HTML =
"<div style='font-size:24px; font-weight:bold;'>Total em Vendas: R$ " &
FORMAT(SUM(base[valor]); "#,##0.00") & "</div>"

Você pode incorporar ainda mais elementos de formatação, como emojis, cores dinâmicas, bordas ou fontes personalizadas, solicitando à IA exemplos específicos ou ajustando manualmente os estilos do HTML.

Passo 4: Criando a medida personalizada no Power BI

1. No Power BI Desktop, selecione Nova Medida na guia de dados.
2. Cole o código HTML adaptado, conforme o exemplo anterior, e dê um nome claro para a medida (exemplo: Total em Vendas HTML).
3. Confirme a criação pressionando Enter. A medida estará disponível para uso nos visuais.

Esse passo é fundamental para garantir que o cartão exibirá o valor correto, já formatado, e pronto para ser apresentado de forma visualmente diferenciada no dashboard.

Passo 5: Inserindo o cartão HTML no dashboard

1. Clique no ícone do HTML Content entre os visuais.
2. Arraste o visual para a área do relatório.
3. No campo Valores do visual, arraste a medida Total em Vendas HTML recém-criada.

Após adicionar a medida ao visual, o cartão HTML aparecerá com toda a formatação, emojis e informações que você definiu. Para ajustar o posicionamento ou tamanho, basta selecionar e arrastar o visual na tela.

Personalização avançada: estilos, emojis e mais

Um dos maiores benefícios do cartão em HTML é a liberdade para personalizar cada detalhe. Por exemplo, você pode pedir à IA para inserir um emoji de dinheiro ao lado do valor, ou mudar a cor conforme o resultado. Exemplo de prompt para IA:

"Insira um emoji de dinheiro e destaque o valor em verde caso seja maior que 10.000"

Para inserir um emoji, basta adicionar o caractere Unicode correspondente no HTML. Exemplo simples:

"<div style='font-size:24px;'>💰 Total em Vendas: R$ " & FORMAT(SUM(base[valor]); "#,##0.00") & "</div>"

Essas pequenas adições elevam o impacto visual e tornam o dashboard mais intuitivo. Para outras dicas de design, acesse nosso Guia Prático de Dashboards Criativos.

Dicas práticas e cuidados ao usar cartões HTML

• Compatibilidade: Verifique se o visual HTML Content está instalado corretamente (principalmente em ambientes corporativos).
• Manutenção: Documente os códigos HTML utilizados para facilitar futuras atualizações do dashboard.
• Performance: Evite HTML muito pesado ou com scripts externos, pois pode impactar o desempenho em dashboards grandes.
• Consistência visual: Padronize os estilos de cartões para manter a identidade visual do relatório.

Resumo dos principais prompts para IA utilizados

Situação	Prompt sugerido
Criar card básico	"Crie um card com a medida total em vendas usando HTML para o Power BI"
Adicionar emoji	"Insira um emoji de dinheiro antes do valor"
Aplicar cor dinâmica	"Altere a cor do valor conforme o resultado da soma"
Formatação avançada	"Adicione borda arredondada e destaque o título em azul"

Exemplo prático: criando e aplicando o cartão com HTML

1. Solicite o código para IA, ajuste os nomes das tabelas e colunas.
2. Crie a medida personalizada no Power BI com o HTML adaptado.
3. Adicione o visual HTML Content ao dashboard.
4. Arraste a medida para o campo de valores do visual.
5. Personalize com emojis, cores ou estilos adicionais conforme desejado.

Perguntas frequentes

Preciso saber programar em HTML para usar cartões personalizados?

Não é obrigatório. A inteligência artificial pode gerar os códigos para você, bastando adaptar os nomes das tabelas e colunas conforme sua base.

Posso usar o visual HTML Content sem uma conta empresarial no Power BI?

Você só consegue baixar novos visuais com uma conta empresarial, mas pode usar arquivos que já tenham o visual instalado para praticar e criar dashboards.

É possível adicionar imagens ou gráficos dentro do cartão HTML?

O visual HTML Content permite elementos básicos de HTML, incluindo emojis e ícones Unicode, mas não permite scripts ou imagens externas por questões de segurança.

O cartão HTML impacta na performance do meu relatório?

Se usado com bom senso (códigos enxutos e objetivos), o impacto é mínimo. Códigos HTML muito extensos ou elaborados podem afetar dashboards muito grandes.

Consigo usar lógica condicional (ex: cor dinâmica) no cartão HTML?

Sim, é possível embutir lógicas DAX na medida para alterar o HTML conforme o resultado dos dados, como destacar valores positivos em verde e negativos em vermelho.

Conclusão

Criar cartões personalizados com HTML e inteligência artificial no Power BI é um diferencial importante para quem deseja apresentar dashboards mais profissionais e visualmente atraentes. Além de valorizar seus relatórios, essa habilidade demonstra atualização e criatividade no uso de ferramentas de dados. Explore também nosso artigo sobre acumulados no Power BI com DAX ou aprofunde seu conhecimento em como usar o ChatGPT para turbinar o Power BI.

Bons estudos e até o próximo conteúdo! 🚀