topic Re: Custom visual - tables with tabs in Developer

Custom visual - tables with tabs

satishr — Tue, 06 Feb 2018 12:13:31 GMT

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.

Re: Custom visual - tables with tabs

v-viig — Wed, 07 Feb 2018 18:15:19 GMT

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

pbicvsupport@microsoft.com

Re: Custom visual - tables with tabs

satishr — Thu, 08 Feb 2018 08:51:16 GMT

@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?

Re: Custom visual - tables with tabs

v-viig — Fri, 09 Feb 2018 07:39:57 GMT

That depends on what library you use. The common way is to add an event handler for click event:

Vanila JS: element.addEventListener("click", () => {// TODO: Do something });
D3.js / jQuery: selection.on("click", () => {// TODO: Do something })

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Custom visual - tables with tabs

satishr — Fri, 09 Feb 2018 08:19:57 GMT

Thanks, I used the D3 option and it is working.

d3.select("#id").on('click', function() { ... }

Re: Custom visual - tables with tabs

Anonymous — Wed, 03 Mar 2021 14:45:38 GMT

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

Re: Custom visual - tables with tabs

Maho — Tue, 15 Jun 2021 11:10:13 GMT

Perfect, thanks' this link was really useful for me. 🙏