Learn how to enhance your Power BI reports with custom HTML buttons for improved interactivity and design
Take your Power BI report design to the next level with HTML Buttons Power BI. By incorporating custom HTML buttons; you can create visually appealing and interactive reports that stand out. Follow these steps to integrate HTML Buttons Power BI into your reports seamlessly.
1. Edit Your Button Code in an IDE
The best way to create and test your HTML Buttons for Power BI is to write and edit the code in an Integrated Development Environment (IDE) like Visual Studio Code or CodePen. CodePen is a convenient online platform for quick prototyping. It is the suggested method for ease of use.
Remember, HTML buttons in Power BI cannot include JavaScript for security and functionality reasons.
How to Get the Code
Self-Writing: Write your HTML button code manually. This method allows you to have complete control over the design and functionality of your buttons, allowing for precise customization.
Getting Samples from CodePen: Explore platforms like CodePen to find sample HTML button codes. Effective search terms to use include "HTML button", "CSS button styles", "custom button", and "responsive button design". You can use these samples as a starting point and modify them to suit your needs.
Using ChatGPT: Leverage ChatGPT to generate HTML button code based on your requirements. Describe the design and functionality you need, and ChatGPT can provide the corresponding code. Here is an effective prompt to use with ChatGPT:
Chat, please help me create an HTML button; consider the following indications:
- There should be three buttons: Finance, Operation and HR.
- The button(s) should be modern and nice-looking, with an icon from Material Design.
- The button should include hover and press states.
- Use single quotes (') instead of double (") and add the CSS in a style tag in the head.
- Remove all body padding and margins.
- Centre the button horizontally and vertically in the body.
- The button should have a href as action on a new page.
- Please include this CSS:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}You can efficiently create HTML buttons that meet your specific needs and preferences using these methods.
2. Get an HTML Visual for Power BI
To display HTML buttons in Power BI, you must use a visual supporting HTML content. Several custom visuals are available that can render HTML code. Any of these visuals allows you to embed and display HTML directly within your Power BI reports, enabling interactive buttons and other HTML elements to enhance your data presentations.
Visual Name | Certified | Print PDF/PPT | Access external resources | Free |
✔ | ✔ | ✔ | ||
✔ | ✔ | |||
✔ | ✔ | |||
✔ | ✔ | |||
✔ | ✔ | |||
✔ |
When choosing an HTML visual, you need to consider two functionalities: the ability to print to PDF and the possibility of accessing external resources.
Print to PDF/PPT: Power BI lets you export reports to PDF and PowerPoint; this feature is only available for default and certified custom visuals.
Access External Resources: Certified visuals in Power BI cannot access external resources. Therefore, you can not use external stylesheets. This means you are limited on supporting design tools, and all styling and functionality must be contained within the HTML code embedded in the visual.
Follow these quick steps to add a custom visual from the store:
Open Power BI Desktop.
Import Custom Visuals from the Store:
Click on the Visualizations pane.
Click the three dots (…) and select Get more visuals.
Choose the Custom Visual:
Browse the store to find the visual you want.
Click Add to import the visual into Power BI.
Add and Configure:
Click the new visual icon in the Visualizations pane to add it to your report.
Drag fields to the visual’s configuration areas.
Use the Format pane to customize the appearance.
3. Create Measures to Store HTML Code
Store your HTML button code as text within Power BI measures. You can also use DAX expressions to generate HTML code dynamically based on report data.
Important: When embedding HTML code in DAX, use single quotes only. Double quotes can cause DAX errors.
HTML Button = "<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Modern Buttons</title>
<style>
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
.btn {
display: flex;
align-items: center;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
font-family: 'Arial', sans-serif;
color: white;
background-color: #6200ea;
transition: background-color 0.3s, transform 0.1s;
}
.btn .material-icons {
margin-right: 8px;
}
.btn:hover {
background-color: #3700b3;
}
.btn:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<div class='container'>
<a href='finance.html' class='btn'>
<span class='material-icons'>account_balance</span>Finance
</a>
<a href='operation.html' class='btn'>
<span class='material-icons'>build</span>Operation
</a>
<a href='hr.html' class='btn'>
<span class='material-icons'>people</span>HR
</a>
</div>
</body>
</html>"4. Considerations and Use Cases
While HTML buttons can greatly enhance the design of your Power BI reports, there are some important limitations to consider:
No In-Page Navigation: HTML buttons cannot be used for in-page navigation within the Power BI report. They can only be used to navigate to external URLs.
Limited Interactivity: Due to the restriction on JavaScript, the interactivity of HTML buttons is limited compared to native Power BI buttons.
Use Cases for HTML Buttons
Despite these limitations, HTML buttons can be effectively used for several purposes:
Navigating to Different Reports: Use HTML buttons to link to other Power BI reports or dashboards.
External Links: Create buttons that direct users to external websites or resources.
Starting a Team Chat: Use buttons to initiate a chat in Microsoft Teams.
Sending Emails: Design buttons that open the default email client with a predefined email address.
5. Samples
Here are a few sample HTML button codes you can use.
Starting a chat team.
In the HREF of the HTML code, you can also create a deep link for starting a chat using the following format:
https://teams.microsoft.com/l/chat/0/0?tenantId=<tenantId>&users=<user1>,<user2>,...&topicName=<chat name>&message=<precanned text>Query Parameters:
users: A comma-separated list of user IDs representing the chat participants. The user initiating the action is always included. This parameter supports the Microsoft Entra UserPrincipalName, such as an email address.
topicName: An optional parameter for the chat's display name if there are three or more participants. If not specified, the display name defaults to the names of the participants.
message: An optional parameter for the message text to be pre-filled in the compose box of the current app user while the chat is in draft state.
Open Teams Chat = "<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Modern Buttons</title>
<style>
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
height: 100vh;
width: 100%;
}
.btn {
display: flex;
align-items: center;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
font-family: 'Arial', sans-serif;
color: white;
background-color: #6200ea;
transition: background-color 0.3s, transform 0.1s;
}
.btn .material-icons {
margin-right: 8px;
}
.btn:hover {
background-color: #3700b3;
}
.btn:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<div class='container'>
<a href='https://teams.microsoft.com/l/chat/0/0?users=joe@contoso.com,bob@contoso.com&topicName=Prep%20For%20Meeting%20Tomorrow&message=Hi%20folks%2C%20kicking%20off%20a%20chat%20about%20our%20meeting%20tomorrow' class='btn'>
<span class='material-icons'>chat</span>Start Teams Chat
</a>
</div>
</body>
</html>"Sending a mail from Outlook.
Following these guidelines, you can enhance the visual appeal and functionality of your Power BI reports with HTML Buttons Power BI.
Feel free to reach out if you have any questions or need further assistance in creating your HTML buttons for Power BI!