- 1. Session 1 - Setup
- 1.1. 🔱 Fork this repository!
- 1.2. Start a Codespace
- 1.3. Open Terminal
- 1.4. Open the Codespace in Desktop Visual Studio Code
- 1.5. Run the Visual
- 1.6. Open PowerBI Portal
- 1.7. Create a new Report
- 1.8. Save your new report
- 1.9. Enable developer mode visuals in settings
- 1.10. Enable Edge/Chrome Support for HTTPS / Local Host
- 1.11. Add the development mode visual to the report
- 1.12. Generate and install a certificate (MAYBE NOT REQUIRED)
- 2. Session 2 - Modifying the visual Template
We will be roughly following the following tutorial in the microsoft documentation:
https://learn.microsoft.com/en-us/power-bi/developer/visuals/develop-power-bi-visuals
Use Github to fork this repository
The following are already installed in the codespace:
NodeJSis installed;- This lets javascript run outside of the browser, like python.
npmis installed- This is like python's
pippackage installer
- This is like python's
- Required libraries are pre-installed
- Such as
Typescript,Webpacketc
- Such as
pbivizis installed- This is Microsoft's helper tool which they provide for developing custom visuals
These are all pre-installed thanks to the configuration file inside the /.devcontainer folder.
First we create a new visual named mychart
pbiviz new mychartThis generates a new visual template inside a folder called /mychart/.
We would prefer it is not in this subfolder; so we need to either
- manually move all files out of the folder using VSCode's explorer
- OR run the following two lines in the terminal:
# move files out of mychart subfolder (include items starting with `.`, like the .vscode folder)
mv -f mychart/{.*,*} .# delete the mychart folder
rmdir mychartWe need to use some special features of the desktop version of visual studio code. So from this point we cant use the browser based vscode editor.
Open the terminal in vscode desktop and type
pbiviz startVisuals cannot be previewed in PowerBI desktop during development.
To see the running visual we need to create a report in the PowerBI portal.
You can use this link https://app.powerbi.com/home
From the portal create a new blank report
- Select
Paste or manually enter data - Select and paste the following data using
Ctrl+CthenCtrl+V:
Road Carriageway SLK From SLK To Offset Colour (CSS)
H001 LRS 3 5 0 cyan
H015 L 0 2 -10 yellow
H016 L 4 8 -10 magenta
H016 L 4 7 -20 magenta
- Click use first row as headers
- Click create report
Click File Save to save your report and give it a name.
Store it in My Workspace to keep it in your own workspace.
- In the top right select settings
- Under developer tick the box to enable development mode visuals
Since we are loading secure HTTPS from vscode/localhost, we need to relax a security setting in edge or chrome to allow development:
This setting only applies to things loaded from your own machine and does not affect normal web browsing security.
You may see some warnings from your browser:
Click here for detailed explanation
Normally your browser would not allow data served from your own PC (localhost)
to be considered secure HTTPS. This is because HTTPS requires thats data is
served from a registered unique domain name such as google.com or
app.powerbi.com. In our case the custom visual is
- served on the codespace,
- forwarded and served on your local computer by visual studio code
(try open https://localhost:8080/assets) - loaded from your local machine onto your report in the portal (at
https://app.powerbi.com/...)
Even though the entire process is encrypted and served over HTTPS and the traffic to and from the visual is safe, your browser unable to verify the HTTPS connection because it does not come from a registered domain name.
Back in your new report
- Click the edit button to go into edit mode
- Create a new page
- Thens select the development mode visual
You should now see development mode visual with Update count: as shown in the screenshot above.
Click here to expand instructions if the process above did not work
While we are developing the visual, we need to provide evidence to our computer that it is talking to a legitimate custom visual source.
The process is slightly more complicated than usual because we are working in a codespace
but you can do it! :)
Click here to expand instructions if the process above did not work
# this command generates the certificate file and prints out the location to the terminal
# it does not actually install anything because we are in a codespace
pbiviz --install-certClick here to expand instructions if the process above did not work
# this command copies the certificate to our working directory so that we can download it
# note that you may need to modify the command below to reflect what was printed out by the previous command
cp /usr/local/share/nvm/versions/node/v19.6.0/lib/node_modules/powerbi-visuals-tools/certs/PowerBICustomVisualTest_public.crt .Then use the explorer in visual studio code to download the PowerBICustomVisualTest_public.crt file
Click here to expand instructions if the process above did not work
Once downloded, double click PowerBICustomVisualTest_public.crt and
- Click Install Certificate button
- Select current user
- Place in the following store
- Browse and select
Trusted Root Certification Authorities - Finish
Under Construction
Under Construction
Under Construction
Under Construction