This module provides a short introduction to the course and its contents.
Introduction to Developing Power BI Visuals
Overview
This course is for makers who want to learn how to use code to develop their own visuals for Power BI, using the visual Software Development Kit (SDK). We will do this by introducing you to the tooling that Microsoft provide for you to support your vision, spending some time understanding how custom visuals interact with Power BI and understanding some of the limits of the sandbox we get to play in.
We will build on this knowledge to ideate a simple visual of our own, write code to develop this and learn how we can distribute our visual so that other people can use it in their own reports. Because of the sheer wealth of possibilities on offer for developing a visual, we will also dedicate part of wrapping-up the course to how you can “think in Power BI visuals” when it comes to assessing whether a popular framework might be a good fit for your project.
Pre-requisites
Although it is not an essential foundation, learning to develop your own visuals will require familiarity with web development technologies, as well as a basic understanding of Power BI and data analytics.
Because we are spanning multiple disciplines the learning curve can appear to be steep, but whatever your level, you will be able to produce the examples we will be working through together.
Be aware, however, that we will only ever be deep-diving into features that relate specifically to Power BI and the visual SDK; we may only focus on specific elements of web development or a supporting framework when we really need to. While custom visuals are a small part of the Power BI offering, they represent a whole different paradigm to what you might already know about Power BI and even small parts of developing for the web can occupy entire courses of their own.
Course Structure
- Introduction to Visuals in Power BI
This part provides a high-level overview to how custom visuals fit into the Power BI ecosystem, and how you can ensure you have the tools you need to begin writing code:
- Why choose to develop a custom visual?
- How visuals interact with your data
- Setting up a development environment
- Anatomy of a custom visual project
- Visual lifecycle and events
- Testing and debugging in Power BI
- Approaching your Visual Project
Before we begin, it’s good to have a plan in mind. In this part, we will conceive a vision for our custom visual, and put some things in-place that will make our development process much more straightforward:
- Determining visual layout & DOM
- Data roles and data view mapping
- View model
- Setting-up source control
- Selecting, adding and updating modules
- Developing Basic Functionality
In this part we will take our approaches from the previous part to develop the basic functionality for our visual and produce a minimum viable product:
- Visual instantiation
- Prototyping with static data
- Validating the data view
- Binding the data view to your view model
- Managing state changes
- Adding and binding simple properties
- Enhancing Visual Functionality
In this part, we will build upon our initial work, to provide our users with a better experience in Power BI:
- Rendering events
- Tooltips
- Selection
- Data-bound properties
- Localisation
- Responsive sizing
- Packaging and Distribution
- In this part we will focus on how you can distribute your custom visual to other users, and how you can manage the update process as you continue to improve upon your work:
- Methods for sharing custom visuals
- Packaging your Custom Visual
- Submitting to the marketplace
- Managing updates
- Where to Next?
We have built our custom visual, but there’s so much more than we can cover in a single course. We will wrap-up this course by helping you to think about how you can keep developing, and some additional options we haven’t been able to cover in detail:
- R Visuals in the SDK
- Lifting and shifting online examples
- Assessing a potential framework for inclusion in your visual
- Unit testing and linting for consistent code standards
- Useful resources for further learning
Modules
Module 1: Introduction to Custom Visuals in Power BI
This module introduces us to the development ecosystem for visuals, interaction of visuals with Power BI, their permissions and privileges, as well as setting up and testing our development environment.
Lessons
- Module 1: Lesson 1 – Overview of Section
- Module 1: Lesson 2 – Visual Interaction with the Power BI Data Model
- Module 1: Lesson 3 – Custom Visual Privileges
- Module 1: Lesson 4 – Overview of Development Environment
- Module 1: Lesson 5 – Setting up Your Development Environment
- Module 1: Lesson 6 – Testing your Development Environment
Module 2: Custom Visual Anatomy
This module dives deeper into the structure of a visual project and its anatomy and lifecycle, so that we can understand the moving parts a bit further before we begin writing our code.
Lessons
- Module 2: Lesson 1 – Overview of Section
- Module 2: Lesson 2 – Visual Project Structure
- Module 2: Lesson 3 – Visual Interaction and Integration Reference
- Module 2: Lesson 4 – visual.ts Visual Life cycle and Events
- Module 2: Lesson 5 – capabilities.json Visual Capabilities
- Module 2: Lesson 6 – Using Packages
Module 3: Planning and Prototyping
This module introduces the course’s code repository and focuses on how to quickly prototype a visual idea by separating concerns from the data model and visual. We will start with some static data and use this to develop a ViewModel - which will consolidate our logic - before using this to generate a chart from this static data within Power BI.
Lessons
- Module 3: Lesson 1 – Overview of Section
- Module 3: Lesson 2 – Project Setup and Source Control
- Module 3: Lesson 3 – Visual Domain Object Model (DOM)
- Module 3: Lesson 4 – Building an Initial ViewModel with Static Data
- Module 3: Lesson 5 – Visual from Static Data – Initialisation
- Module 3: Lesson 6 – Visual from Static Data – Viewport
- Module 3: Lesson 7 – Visual from Static Data – Margin and SVG Coordinate System
- Module 3: Lesson 8 – Visual from Static Data – Scales and Axes
- Module 3: Lesson 9 – Visual from Static Data – Binding and Plotting Data Points
- Module 3: Lesson 10 – Visual from Static Data – Adding Labels
- Module 3: Lesson 11 – Visual from Static Data – Adding Simple Objects and Properties
Module 4: Binding Data from the Model
This module builds on the prototype created in the previous module, swapping-out the static data for that of our data model. We will focus on how to set up data roles, map the resulting data into the ViewModel and ensure that our prototype works dynamically.
Lessons
- Module 4: Lesson 1 – Section Overview
- Module 4: Lesson 2 – Adding Data Roles and Data View Mappings
- Module 4: Lesson 3 – Adding Conditions to Data View Mappings
- Module 4: Lesson 4 – Validating the Data View
- Module 4: Lesson 5 – Mapping Data to the View Model
- Module 4: Lesson 6 – Deciding When to Map Data
- Module 4: Lesson 7 – Homework Review
Module 5: Context and Selection
In this module and we will understand how data in our visual is referenced back to Power BI for interactivity purposes. We will use this knowledge to add more functionality to our visual, including cross-filtering, highlighting, drillthrough and tooltips.
Lessons
- Module 5: Lesson 1 – Section Overview
- Module 5: Lesson 2 – Adding Selection IDs to the View Model
- Module 5: Lesson 3 – Adding Data-Bound Objects
- Module 5: Lesson 4 – Selecting Data in Other Visuals
- Module 5: Lesson 5 – Adding Visual Effects to Selections
- Module 5: Lesson 6 – Clearing Selections
- Module 5: Lesson 7 – Completing Our Selectable Elements
- Module 5: Lesson 8 – Adding the Context Menu
- Module 5: Lesson 9 – Adding Tooltips
- Module 5: Lesson 10 – Extending Default Tooltips
- Module 5: Lesson 11 – Adding Cross-Highlighting
- Module 5: Lesson 12 – Enabling Drill-Down
Module 6: Polishing Visual Functionality
If planning to provide wider coverage for more end users, Power BI visuals need to be adaptable and more resilient than just a single use case. This module looks at the kinds of considerations that need to be made to add further functionality and polish to a visual, in order to improve the overall experience.
Lessons
- Module 6: Lesson 1 – Section Objectives
- Module 6: Lesson 2 – Adding Sorting
- Module 6: Lesson 3 – Simple Transitions
- Module 6: Lesson 4 – Rendering Events
- Module 6: Lesson 5 – Formatting Number Values
- Module 6: Lesson 6 – Making the Chart Orientation Configurable
- Module 6: Lesson 7 – Dynamic Margins and Tick Labels
- Module 6: Lesson 8 – Adding Valid Ranges to Numeric Properties
- Module 6: Lesson 9 – Conditionally Hiding Properties
- Module 6: Lesson 10 – Adding Localization
- Module 6: Lesson 11 – Adding A Landing Page
- Module 6: Lesson 12 – Interactivity Considerations for Dashboards
Module 7: Packaging and Distribution
This module discusses how you can approach sharing your visual with a wider audience, including how you can publish to AppSource, manage updates and prepare for certification, should you wish to do so. We will also discuss and walk-through potential approaches for “lifting and shifting” existing examples on the web and integrating them into Power BI as a jumping-off point.
Lessons
- Module 7: Lesson 1 – Sharing Options for Visuals
- Module 7: Lesson 2 – Packaging a Visual for Distribution
- Module 7: Lesson 3 – Submitting to AppSource (the Marketplace)
- Module 7: Lesson 4 – Managing Updates to your Visual
- Module 7: Lesson 5 – Considerations for Certifying your Visual
- Module 7: Lesson 6 – Approaches for Adapting D3.js Examples to Power BI
- Module 7: Lesson 7 – Exploring R Visuals
- Module 7: Lesson 8 – Resources for Further Learning