Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
I have a requirement to create a custom visual where I have to create a tabbed interface each containing tables something similar to the image. Please help me with any code examples. I'm trying to create a table using D3 but facing some issues. I saw few examples in jQuery for creating tabs. I'm not sure how to use jQuery in custom visual code.
Solved! Go to Solution.
That depends on what library you use. The common way is to add an event handler for click event:
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Another option is to use book marks to show/hide the visuals. Each visual can have filters applied to it.
Here are the steps:
https://www.aerieconsulting.com/blog/how-to-hide-and-show-visuals-in-power-bi
Perfect, thanks' this link was really useful for me. 🙏
Is changing tabs going to filter data? If so, you might use table + slicer to reach the same behavior.
If you want to build the visual from scratch you should take a look at D3.js gallery for more examples.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
@v-viig Couldn't get anything from the D3 gallery. My requirement is very simple. There are four tabs. The data should be split into four tables based on a logic and should be displayed one in each tab. I'm trying to implement https://www.w3schools.com/howto/howto_js_vertical_tabs.asp but couldn't do it. I know it is very simple but I'm new to Typescript and custom visual coding. I implemented the HTML and the CSS part from the above link. There is a line which says onclick="openCity(event, 'London')" in the HTML. How to do this in typescript?
That depends on what library you use. The common way is to add an event handler for click event:
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Thanks, I used the D3 option and it is working.
d3.select("#id").on('click', function() { ... }
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
14 | |
2 | |
2 | |
1 | |
1 |