Take your PBI report design to the next level.
This post will explain how to create an HTML button on Power BI desktop.
Search for your Awesome Button
I always start by googling something like "CSS-HTML Button." This search will provide results like the ones shown below:
I will then skim through the pages and focus on those examples that I like that have the code stored on CodePen and are "Pure CSS and HTML" buttons, avoid any code that has JS, too; it will not work.
A "pure CSS and HTML" code stored in CodePen will look like the one below (link.) Observe how the first two boxes indicate HTML and CSS, and the JS box is empty.
Adapt your code for Power BI
Now, copy and paste the code in any text editor, I use Visual Studio code, but even a notepad will do; replace all the double quotes (") for single quotes (').
Get an HTML Visual for Power BI
Several Power BI visuals can display HTML code, I use "HTML Content," if you want to know more detail about the different visuals available and their characteristics, visit my GitHub repository,
Create measures
Store the code as text within measures. You have two options:
1. Store HTML and CSS in a single measure:
09 HTML & CSS =
"<html>
<head>
<title>Title of the document</title>
<style>
.button {
background-color: #1c87c9;
border: none;
color: white;
padding: 20px 34px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<a href='https://www.bibb.pro/' class='button'>BIBB</a>
</body>
</html>"2. Store it in two measures, one for CSS the other for HTM:
CSS =
" <style>
.button {
background-color: #1c87c9;
border: none;
color: white;
padding: 20px 34px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
</style>"HTML =
[09 CSS]
&
"<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href='https://www.bibb.pro/' class='button'>BIBB</a>
</body>
</html>"Share!
Once you have created your awesome HTML Button, share it with the community in the HTML & CSS GitHub Repository I've created for this.
Considerations and use cases
HTML buttons in Power BI will bring your buttons to the next design level; though the buttons have an important drawback, they can not do in-page navigation.
You can use HTML buttons in a PBI report to navigate in your browser to a different URL, but you can not tell PBI's frame to navigate to a separate page in your report;
The lack of in-report-page-navigation limits the use cases to:
Different report navigation
External links
Start a Team chat
Send email
