This video explains how to run a Power BI custom visual from the code editor. This is video #7 of the Power BI Custom Visual Development Fundamentals series, please check the playlist below for the set.

Video Transcript:

Start with command line at project directory

So now you have created your new Custom Visual Project, you can try it out in the Power BI designer itself.

The first step is to type this command in the project folder.

This command does a couple of neat things for you.

The first thing it does, is, it looks at your project folder and validates and compiles all the files in there. Then, it stays awake, looking for any changes in your files and validating them accordingly. This saves you from manually having to compile all those files you see all the time.

The second thing it does, is it starts up a mini web server from your machine, which is going to serve the files for your custom visual to whoever is asking.

And that is what makes the magic of the next step work.

With that in mind, let’s move to the Power BI report designer on the web.

Note that I’m using the web designer, not Power BI Desktop.

Now, to do any reporting here whatsoever, you need a dataset to begin with, even if you’re not going to use any data right now.

So what I did is I went to Kaggle and downloaded a sample dataset.

What I have is a dataset with video game sales up to 2016.

I will make of this dataset throughout the course, however you can use your own datasets as well.

If you want to download this and use it as well, you can find a link for it in the video description box.

So with that sorted, let’s get your custom visual going.

To see your custom visual in action, all you have to do is look for this little icon on the visual toolbar that says “developer visual” and click on it.

Now here, you see some magic happening already.

This visual is being served straight from your local machine and any changes you make in your code will immediately appear here once you refresh.

Getting this magic to work without the browser complaining is why you had to install that certificate beforehand.

Now the visual also has a special toolbar to aid in development.

The first button forces a reload of the visual code just for the visual, which is useful for refreshing without having to reload the entire page.

The second button this automatic reload on and off, if you want to.

Now the third button is the one who’s going to be your friend.

When you click this, you get to see what data is Power BI making available to the visual.

Which, right now, is nothing as we haven’t selected any data to start with.

But look at what happens when I try to put some data into the visual.

Well, something happened, let’s see what we have here.

If we drill into this we see a hierarchy of data in a format that quite resembles json.

This is how Power BI makes data available to your visual and you will see this at work in a later video.

This Data View button is here to help you when you’re not too sure how to access the data you want and need a reminder.

Now let’s get back to the visual itself.

This visual comes with some sample code that simply updates a counter by 1 any time it needs to update.

You can see this happen if you try to add other field to the visual.

Granted it may a bit a useless a visual per se, but it’s enough to go back at the template code and understand how this is doing its thing.

Let’s get back to the visual.ts file in the project and take a look at the various elements here that make this work.

Now you can see you have this class called Visual here.

This is typescript class and it means the same as a class in C# or Java.

This class is here to hold the code for your visual.

You can also see it implements the IVisual interface.

Again, this is typescript sugar, same as C# and Java.

The IVisual interface the Custom Visual API know how to call your code so it updates properly.

This interface requires that you implement an update method in certain way, so the api can give some useful information when it’s time to update the visual.

To make the visual work you also need to implement a constructor that can receive a VisualConstructorOptions object.

If you don’t know what a constructor is, well, it’s simply a method that can run when an instance of this class starts.

In this case, the Power BI api will run this constructor when it initially creates your visual on the report canvas and provide that VisualConstructorOptions object for you.

Now this object gives useful information such as the html parent element that the visual need to render to.

As you can see here, the constructor code here then hangs on to it, so it can use later, during an update.

This constructor also initializes an updatecount variable to, and you can probably see where this is going now.

If you come back to the update method itself now, it’s now easy to see what’s going on.

Every single time this update method is called by the api, this line increments the counter by 1 and displays the message in an html paragraph element, neatly inside the parent element for the visual.

And there you have it.

Now you understand how to set up your environment for creating visuals and how to get the development tools up and running.

Now you just to install some extra libraries and you’ll be ready for some proper charting.