Aprenda a usar HTML e CSS no Power BI para criar um menu interativo, usando um visual personalizado e publicando seus dashboards na web!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, quero mostrar para você como construir um menu no Power BI utilizando HTML e CSS.
Iremos criar um menu interativo com 4 dashboards estilizados diferentes, permitindo que o usuário selecione aquele que deseja visualizar no momento.
O objetivo desta aula é demonstrar como criar visuais e interfaces personalizadas dentro do Power BI, sem a necessidade de dominar profundamente essas duas linguagens. Assim, você poderá usar o HTML e o CSS no Power BI para aprimorar ainda mais seus projetos.
Faça o download do material disponível e aprenda como criar um menu no Power BI usando HTML e CSS.
O HTML e o CSS são considerados linguagens de marcação e estilização, respectivamente, e são amplamente utilizados no desenvolvimento web para criar e estilizar páginas da internet.
No Power BI, é possível empregar o HTML e o CSS para criar interfaces personalizadas, como no caso do menu apresentado anteriormente e que desenvolveremos ao longo desta aula.
No entanto, para construir um layout, interface ou menu no Power BI usando HTML e CSS, é necessário ter instalado o visual personalizado adequado.
Caso você não saiba como instalar visuais personalizados no Power BI, recomendo que assista a essa aula em que te ensino como criar sua conta gratuita no Power BI, seguida dessa outra aula em que demonstro como utilizar e instalar visuais personalizados no Power BI.
No entanto, para a aula de hoje, basta baixar o arquivo da aula que já estará incluso e instalado o visual personalizado que iremos utilizar.
Como dito anteriormente, o objetivo desta aula é permitir que você crie e edite um menu no Power BI usando HTML e CSS, mesmo sem dominar essas ferramentas. Para isso, podemos contar com a ajuda de alguns sites que disponibilizam códigos HTML prontos para facilitar o processo.
Um site que nos oferece diversas opções de códigos prontos para o uso é o Codepen.
Ao acessar o site, você pode se cadastrar gratuitamente e fazer o login. Em seguida, selecione a opção Trending.
Nessa seção, você encontrará os modelos mais populares em destaque no site. Foi nessa parte que encontrei o template que utilizaremos na aula de hoje, chamado Card Hover Interactions.
Um cuidado que você deve ter ao utilizar o Codepen e escolher algum template para incorporar ao seu projeto no Power BI é observar se o layout requer apenas código HTML e CSS.
Por exemplo, o template a seguir utiliza JavaScript, tornando-o incompatível com o Power BI.
Além disso, é importante destacar que esses menus personalizados não podem ser usados para navegar entre abas no Power BI. No entanto, eles podem ser empregados para abrir links na internet, o que faremos para acessar as páginas dos dashboards que queremos exibir.
Antes de importarmos os códigos para o Power BI, é necessário fazer algumas edições e adaptações. Você pode realizar essas edições usando o Bloco de Notas, mas eu recomendo o uso de um editor de códigos para facilitar a visualização e organização do código.
Eu utilizarei o VS Code para conduzir esta etapa de edição e adaptação do código. Com o VS Code instalado, basta abrir um novo arquivo HTML em branco.
Agora, retorne à página do template escolhido no Codepen e alterar tanto o código HTML quanto o código CSS para a versão compilada deles.
Uma vez feito isso, copie o código HTML inteiro e cole-o no VS Code.
No final do código, após a tag de fechamento </main>, insira uma nova tag de abertura <style> e a tag de fechamento </style>. Entre essas tags, cole o código CSS.
Feito isso, é necessário fazer uma modificação antes de importar todo esse código para o Power BI, que é substituir todas as aspas duplas por aspas simples, já que dentro do Power BI o código todo precisará ficar entre aspas duplas.
Para facilitar essa substituição, você pode usar o atalho Ctrl + H no VS Code. Na janela que irá abrir, insira o valor que deseja encontrar e o valor pelo qual deseja substituir, e clique no ícone destacado na imagem abaixo para efetuar a mudança para o código todo.
Com o código adaptado, copie-o e cole-o em uma nova medida no Power BI.
Lembre-se de copiar o código completo, incluindo tanto a parte HTML quanto a parte do estilo CSS, e mantê-lo entre aspas duplas no Power BI.
Para visualizar nosso código dentro do Power BI, basta selecionar o visual personalizado HTML Content, que é o leitor HTML, e adicionar a medida HTML Hashtag aos seus valores.
Dessa forma, conseguiremos visualizar o template que escolhemos no site do Codepen diretamente no Power BI.
Como vimos no exemplo no início da aula, nosso objetivo é exibir um menu com os 4 dashboards que desejamos mostrar, 2 acima e 2 abaixo, de modo que, ao clicar sobre eles, sejamos direcionados para as páginas correspondentes.
Para alcançar essa funcionalidade, precisamos fazer algumas edições em nosso código. Essas edições podem ser feitas diretamente dentro da medida no Power BI, ou você pode realizar todas elas no VS Code e, em seguida, copiá-las para o Power BI.
A primeira mudança que precisamos fazer é ajustar a altura (height) e largura (width) de nossos cartões para torná-los mais retangulares. Vamos localizar o seguinte trecho de código (linha 85):
@media (min-width: 600px) {
.card {
height: 350px;
}
}Substitua o valor de 350px por 320px:
@media (min-width: 600px) {
.card {
height: 320px;
}
}Dessa forma, ajustaremos a altura dos cartões. Para a largura, localize o trecho de código abaixo (linha 73):
.card {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 1rem;
width: 100%;
text-align: center;
color: whitesmoke;
background-color: whitesmoke;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}Altere a largura (width) de 100% para 580px:
.card {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 1rem;
width: 580px;
text-align: center;
color: whitesmoke;
background-color: whitesmoke;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}Feitas essas alterações, nossos cartões terão a seguinte aparência dentro do Power BI:
Perceba que que os cartões estão dispostos lado a lado em vez de dois acima e dois abaixo. Para ajustar essa disposição, localize o seguinte trecho de código (linha 67):
@media (min-width: 800px) {
.page-content {
grid-template-columns: repeat(4, 1fr);
}
}Substitua por:
@media (min-width: 800px) {
.page-content {
grid-template-columns: repeat(2, 1fr);
}
}Nosso template ficará assim:
Observe que há uma margem considerável à esquerda. Vamos corrigi-la alterando o seguinte trecho de código (linha 54):
.page-content {
display: grid;
grid-gap: 1rem;
padding: 1rem;
max-width: 1024px;
margin: 0 auto;
font-family: var(--font-sans);
}Substitua o valor de max-width de 1024px por 1200px para aumentar a largura do nosso menu e reduzir a margem:
.page-content {
display: grid;
grid-gap: 1rem;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
font-family: var(--font-sans);
}Após essas modificações, nosso menu no Power BI usando HTML e CSS terá a seguinte aparência:
Nosso menu está começando a se assemelhar ao que foi apresentado no início da aula, mas ainda precisamos fazer alguns ajustes. Um deles é adicionar uma imagem que represente cada um dos dashboards disponíveis para acesso.
Para isso, tirei print screen de cada dashboard, salvei as imagens em meu computador e as enviei para o site ImgBB, onde é possível fazer o upload de imagens e gerar links diretos gratuitamente.
Os links das imagens que utilizei estão disponíveis nos arquivos do material da aula, mas você pode optar por criar seus próprios links a partir de seus dashboards, usando o ImgBB ou até mesmo o Google Drive.
Em nosso código, procure pela linha 115 e substitua os links correspondentes a cada cartão do menu. Troque o código original:
.card:nth-child(1):before {
background-image: url(https://images.unsplash.com/photo-1517021897933-0e0319cfbc28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.card:nth-child(2):before {
background-image: url(https://images.unsplash.com/photo-1533903345306-15d1c30952de?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.card:nth-child(3):before {
background-image: url(https://images.unsplash.com/photo-1545243424-0ce743321e11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.card:nth-child(4):before {
background-image: url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}Por este código, que utiliza os links das imagens correspondentes aos dashboards:
.card:nth-child(1):before {
background-image: url(https://i.ibb.co/DLxCX9r/Dashboard-1-Vendas.png);
}
.card:nth-child(2):before {
background-image: url(https://i.ibb.co/4TXYwBX/Dashboard-2-Produ-o.png);
}
.card:nth-child(3):before {
background-image: url(https://i.ibb.co/pyvKygk/Dashboard-3-Compras.png);
}
.card:nth-child(4):before {
background-image: url(https://i.ibb.co/1GnyJCL/Dashboard-4-Financeiro.png);
}Após atualizar nosso código no Power BI, nosso menu terá a seguinte aparência:
Observe que, embora as imagens estejam sendo exibidas, elas estão cortadas. Vamos corrigir isso, indo até a linha 90 e alterando o seguinte trecho de código:
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
background-size: cover;
background-position: 0 0;
transition: transform calc(var(--d) * 1.5) var(--e);
pointer-events: none;
}Precisamos trocar a altura (height) de 110% para 100%:
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: 0 0;
transition: transform calc(var(--d) * 1.5) var(--e);
pointer-events: none;
}Feito isso, nossas imagens serão exibidas completamente dentro dos cartões do menu.
Agora, precisamos alterar os textos presentes em cada um dos cartões do nosso menu para textos correspondentes aos dashboards que eles irão direcionar.
Se procurarmos no código que estamos editando, veremos que logo no início do código, na parte HTML, existem algumas tags <h2> com a classe ‘title’, referentes ao título de cada cartão, seguidas por uma tag <p> com a classe ‘copy’, que apresenta a descrição.
Vamos alterar esses textos para títulos e descrições correspondentes aos nossos dashboards. Você pode inserir os títulos e descrições que considerar mais adequados.
Além disso, em cada cartão do nosso menu, temos um botão identificado no código HTML pela tag <button> na sequência das tags <h2> e <p>. Também iremos alterar o texto desses botões para ‘Acessar Dashboard’.
Você pode personalizar de acordo com seus modelos e necessidades, mas como exemplo, o meu ficou da seguinte forma:
<main class='page-content'>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard de Vendas</h2>
<p class='copy'>Visão completa dos indicadores da área de Vendas</p>
<button class='btn'> Acessar Dashboard </button>
</div>
</div>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard Produção</h2>
<p class='copy'>Visão analítica da fábrica</p>
<button class='btn'> Acessar Dashboard </button>
</div>
</div>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard Compras</h2>
<p class='copy'>Indicadores do setor de suprimentos da empresa</p>
<button class='btn'> Acessar Dashboard </button>
</div>
</div>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard Financeiro</h2>
<p class='copy'>STodos os indicadores contábeis da empresa</p>
<button class='btn'> Acessar Dashboard </button>
</div>
</div>
</main>Dessa forma, quando posicionarmos o mouse sobre um dos cartões em nosso menu no Power BI, poderemos visualizar a descrição e o botão de acesso.
Nosso visual já está quase pronto; agora, precisamos habilitar os botões do menu para que realizem a ação de nos levar para as páginas dos dashboards.
Para isso, vamos selecionar o nosso menu, ir em Formatar visual, Content Formatting e selecionar a opção Allow opening URLs.
Em seguida, precisamos retornar aos trechos do nosso código referentes aos botões de cada cartão e substituir a tag <button> pela tag <a>. A tag <a> é uma tag de ancoragem no HTML que nos permite criar links para outros recursos, como as páginas dos dashboards que queremos acessar.
Nosso código ficará da seguinte forma:
<main class='page-content'>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard de Vendas</h2>
<p class='copy'>Visão completa dos indicadores da área de Vendas</p>
<a href='https://app.powerbi.com/view?r=eyJrIjoiNzNkNmI3ODUtZWE4Yi00Y2Y3LTg4MTItMGQzZGRhM2QyYzg3IiwidCI6IjU2Zjk1OGFhLTk1OWYtNDBjZS05Zjg0LTgxODYzMTZiMzIxOSJ9' class='btn'> Acessar Dashboard </a>
</div>
</div>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard Produção</h2>
<p class='copy'>Visão analítica da fábrica</p>
<a href='https://app.powerbi.com/view?r=eyJrIjoiYjZhOWY0NzMtNzdiMS00Yjc4LWFhY2YtNTZiYjQ0MWE4NDgzIiwidCI6IjU2Zjk1OGFhLTk1OWYtNDBjZS05Zjg0LTgxODYzMTZiMzIxOSJ9' class='btn'> Acessar Dashboard </a>
</div>
</div>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard Compras</h2>
<p class='copy'>Indicadores do setor de suprimentos da empresa</p>
<a href='https://app.powerbi.com/view?r=eyJrIjoiMjJjZTRlMDEtZTliZS00MjI1LThlODQtYjE5OTAzNWZlOTEyIiwidCI6IjU2Zjk1OGFhLTk1OWYtNDBjZS05Zjg0LTgxODYzMTZiMzIxOSJ9' class='btn'> Acessar Dashboard </a>
</div>
</div>
<div class='card'>
<div class='content'>
<h2 class='title'>Dashboard Financeiro</h2>
<p class='copy'>STodos os indicadores contábeis da empresa</p>
<a href=https://app.powerbi.com/view?r=eyJrIjoiZTI3NmI0MmEtNzJlNy00NTgwLWE3MGUtNjExYWQ1ZjhhYmJlIiwidCI6IjU2Zjk1OGFhLTk1OWYtNDBjZS05Zjg0LTgxODYzMTZiMzIxOSJ9' class='btn'> Acessar Dashboard </a>
</div>
</div>
</main>Após essa alteração, agora, ao clicarmos em algum dos dashboards em nosso menu no Power BI, ele nos redirecionará para a página correspondente ao dashboard.
Nosso menu no Power BI usando HTML e CSS já está funcionando perfeitamente. Agora podemos publicá-lo e compartilhá-lo com outras pessoas
Para publicar esse dashboard, é necessário ter uma conta gratuita no Power BI. Caso você não saiba como fazer isso, acesse essa aula para aprender o passo a passo e criar sua conta.
Com sua conta feita, basta clicar em Publicar e selecionar Meu workspace.
Feito isso, o dashboard estará disponível no Power BI Online. Lá, você pode escolher compartilhá-lo de forma privada, apenas com as pessoas com quem compartilhar o link. No entanto, essas pessoas também precisarão ter uma conta no Power BI.
Ou você pode postá-lo de forma pública. Indo em Arquivo > Inserir relatório > Publicar na Web (Público):
Assim, seu menu no Power BI usando HTML e CSS estará publicado e funcional para todas as pessoas. Elas poderão usá-lo para acessar seus outros dashboards de forma prática e intuitiva.
Na aula de hoje, mostrei como usar o CSS e o HTML no Power BI para construir um menu interativo dentro do Power BI.
De forma prática e passo a passo, você aprendeu a criar esse menu interativo com 4 dashboards diferentes, permitindo que o usuário interaja com ele e seja direcionado para o dashboard desejado.
Além disso, vimos como buscar códigos HTML e CSS para utilizar em seus projetos e como adaptá-los de acordo com suas necessidades.
O exemplo da aula demonstrou a construção de um menu no Power BI usando HTML e CSS, mas esse visual personalizado do Power BI pode ser usado para criar diversos projetos e tornar seus dashboards visualmente mais atraentes e interativos.
Para acessar outras publicações de Power BI, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador