Packaging Your Power BI Custom Visual

Packaging Your Power BI Custom Visual

This video explains how to package your Power BI Custom Visual for distribution to your users. This is video #19 of the Power BI Custom Visual Development Fundamentals series, please check the playlist below for the set.

Resources

Transcript

Hello again and welcome back to this series on developing Power BI Custom Visuals.

Today, you will learn how to package your custom visual for distribution to your team.

This lets other people use your visual in their reports, either in Power BI Desktop or in the portal itself.

So, let’s get to it.

Before you begin packaging, make sure you stop pbiviz if it’s running at the moment.

You can do this by typing control-c on the console and then entering Y to confirm.

This will stop pbiviz detecting changes to your files and compiling on the fly.

That and because, for packaging, you also need to use pbiviz.

The difference, instead of running pbiviz start as before, you can now run pbiviz package.

When you run this, the utility compiles your whole code at once and produces an output in the form of a custom visual package file.

You can find this file in a new subfolder called dist that the utility will create for you, if it’s not there yet.

This little pbiviz file is in fact a zip file.

If you open it, you will find a json file which contains a merged and minified version of your code base.

The smaller size and condensed code means your packaged visual will load and run slightly faster than what you have been accustomed to in the dev tools.

So once you have this file, you can share it with your team and your company for them to use in their own reports.

How you do this exactly, will vary from company to company and from project to project.

Regardless, while in the beginning of development, it may be enough to share this manually, as your project grows, you will want to include this pbiviz package command as a step in your continuous build process.

So how can users start taking advantage of your new visual once you give them this file?

Well, let’s start with Power BI Desktop.

I have a brand new report here, and I have already imported the video games sales dataset.

This is the same data set we have been using throughout the course and you can find a link for it in the video description.

To start using that new visual, I just have to come here to the visual selection pane and click these three little dots.

This gives you three options to manage custom visuals in your report.

You can import a custom visual from a file, which is what I’m going to do.

But you can also import one straight the office store if you want.

In addition, you can also remove a custom visual from your report, if you no longer need it.

In my case, I’m just going to click “Import from file”.

This will pop a message warning you about importing from untrusted sources.

This is not the case, so I’m going ahead and import that custom visual package file in the distribution folder.

So it tells me everything’s fine and as soon as I close this window I can see the little custom bar chart in visual pane, just asking me to use it.

It would not be polite to make it wait, now would it.

And there you go, we now have the visual working in a Power BI Desktop report and we’re free to start exploring data.

If you want to use visual in the Power BI Portal on the other hand, the process is identical.

You can also see the three dots here in the visual pane and you can import the custom visual just as you did in Power BI Desktop.

And that’s it really, there’s nothing to it.

That’s it for today.

If you have any questions, let me know and I’ll get back to you.

In next video in this series, you will learn how to set up unit testing, code coverage and linting using Karma, Jasmine and tslint.

Get ready, that will be a good one.

Until then, take care and see you next time.

Jorge Candeias's Picture

About Jorge Candeias

Jorge helps organizations build high-performing solutions on the Microsoft tech stack.

London, United Kingdom https://jorgecandeias.github.io