Maklum balas Edit

Add a context menu to your Power BI Visual

  • Artikel
  • 2 minit untuk dibaca

Every Power BI visual can display a context menu. The context menu allows you to perform various operations on the visual, such as analyzing, summarizing, or copying it. When you right-click anywhere inside a visual's viewport (or long-press for touch devices) the context menu displays. There are two modes of context menus for each visual. The mode that displays depends on where you click inside the visual:

  • Calling the context menu on empty space gives you the basic context menu for the visual.
  • Calling the context menu on a specific data point gives you added options that can be applied to that data point. In this case, the context menu also contains the options Show data point as a table, Include, and Exclude which will apply the corresponding filter to that data point.

How to add a context menu

Use selectionManager.showContextMenu() with parameters selectionId and a position (as an {x:, y:} object) to have Power BI display a context menu for your visual.

Note

  • The selectionManager.showContextMenu() is available from Visuals API version 2.2.0.
  • All visuals published to AppSource must support both ContextMenu modes (empty space and data point).

The following example shows how to add a context menu to a visual. The code is taken from the barChart.ts file, which is part to the sample BarChart visual:

public update(options: VisualUpdateOptions) {
    //...
    //handle context menu
    this.svg.on('contextmenu', (event) => {
        let dataPoint: any = d3Select(event.target).datum();
        this.selectionManager.showContextMenu((dataPoint && dataPoint.data && dataPoint.data.identity) ? dataPoint.data.identity : {}, {
            x: event.clientX,
            y: event.clientY
        });
        event.preventDefault();
    });
}

Next steps

Make visual interactive

Build a bar chart