Sharing your Custom Power BI Visual (code) online (on medium f.e.)

[stevedep]

Perhaps you would like to share your Custom Power BI visual with others online or collaborate during the development of a custom Visual. In that case, it's useful to run your visual project in Codesandbox.io so you can share your visual across platforms, like f.e. medium.

In this article, I will explain the steps required to make this happen.

The result looks like this.

When you view the code in the above Sandbox you will probably recognize a regular Custom Power BI Visual project. We do need to make a few changes though to make this work.

Steps required

1. Upload / connect your Visual project to Github.
2. Import the project in Codesandbox.io
3. Copy and add sample data
4. Make changes to the code

 

Upload / connect your Visual project to Github

Personally, I like to create a Github repository from Visual Studio (where I edit my Custom Visual).

Import the project in Codesandbox.io

Within Codesandbox.io, you can import a Github repository. So here we import our custom Visual project.

Copy and add sample data

In our codesandbox solution we will need to add some sample data from our Power BI dashboard. In order to do so we will copy the options object and add it as a json file in codesandbox.

First we start the debugger;

On our dashboard page we press F12 (with the visual selected) and re-run the visual. This will open up DevTools (in Chrome). In the section Sources -> Scope, we can copy the ‘options’ object.

In codesanbox we add a data.json file and paste the contents.

We also add an index.ts file where we instantiate the Visual class.

Make changes to the code

From here we need to make a few more (small) changes to the code. The primary changes made are;

The syntax to load modules has changed,
A few changes in the Visual.ts file:
- The settings are not imported,
- The visual is attached to the SVG element ‘app’,
- References to Visual settings have been hard-coded, as we can’t access these settings.

Please follow the links for the details.

 

Conclusion

After following the above steps we are able to demonstrate a running version of the visual on the web without the need to access the Power BI service. This allows us to share (code for) visuals on platforms like Medium ealisy.

Hope it works for you!

p.s. this is a repost from Medium. I am the original author.