Developing PowerBI Visuals

Question

I find it difficult to wrap my head around developing a PowerBI visual from scratch. I was reading wiki, guide, inspecting examples, but still feel like there's a huge gap in understanding how it works internally - it did not 'click'. (I understand basics of how D3 works so not too worried about that part)

---

Question:

I hope I'm not asking too much, but could someone, using this barchart as an example, post a sequence of which methods in the visual source are called (and how the data is converted and passed) when:

• The visual is added to the dashboard in PowerBI,

• A category and a measure are assigned to the visual,

• Data filter in PowerBI changes,

• An element on our custom visual is selected.

• Your option which you think may be relevant

---

I used this specific visual as an example because it was mentioned as meeting minimum requirements for contributing a new custom visual, which sounds like a good starting point, source:

New Visual Development

Please follow our minimum requirements for implementing a new visual. See the wiki here.

(the link references the barchart tutorial)

However, if you have a better example visual - please use that instead.

---

This is all I got:

---

Many thanks in advance.

Answer 1

I also have some extra and more generic additions:

• Power BI uses the capabilities.json structure to determine a) what should be data pane (dataRoles) and how Power BI bind that data to your visual (dataViewMappings) and b) what can be shown in the formatting pane (e.g. placeholders).
• the enumerateObjectInstances() is an optional method that is used by Power BI to initialize the formatting pane. The structure returned by this method should be equal to the structure in the capabilities.json file.
• the update() method (required) is called when something is changing regarding your visual. Besides databinding changes, also a resize of the visual or a format option triggers the method.
• the visualTransform() method is indeed an internal method and not directly called by Power BI. In case of the BarChart it is called by the update() method so the arrow is correct. Most visuals have some kind of method and it is used to convert the Power BI DataView structure to the internal structure (and sometimes to some extra calculations).
• Both the constructor and the update() method have parameters (options) which provides callback mechanisms to Power BI, like the ISelectionManager (via options.host.createSelectionManager()), which alters the interaction of the visual with the rest of the Power BI visuals.

The structure of how custom visuals are interacting with Power BI hasn't changed that much since the beginning. Only with the new API the interaction and possibilities has changed: is used to be an open world, but now it is limited.

Hope this helps you in gaining a better overview of a Power BI custom visual.

-JP

Answer 2

A few comments on your graphic. You are obviously using the view model (good):

• After any data change, filter change, or object change (format in your pic), visualTransform() is called. The data comes in odd formats so will need repackaging (for anything other than simple). That gets done here and a data object that the developer defines gets returned. I build this data object as an array because d3 loves arrays.
• update() is then called (I think your arrow in the pic here is the wrong way around). This is slightly tricky because d3 interaction now comes into play. If you have used d3().enter (and you probably have) then that executes only once so on a subsequent PBI update() only d3() non-enter instructions are followed. If you put everything in d3().enter then any subsequent data update won't appear to work.
• Alternatively you can d3().remove() and rebuild the svg on each PBI update(). Whether this is practical will depend on your data and the visual.

Thank you for having a crack at documenting the flow. MS documentation is very lame at the moment.