Commands
Power BI visuals have two menus: Context and Option.
Open the Options by clicking the icon (indicated by three dots) in the top-right corner of the visual. When open, you'll see options for that visual.
Open the Context menu by right clicking on the data. When open, you'll see the commands available for the visual.
Both menus can be extended for each visual by using command extensions. Add personalized actions available to your users that enhance your apps experience. To extend the menus, define and pass an extension object in settings object in embed configuration.
var embedConfig = {
...
settings: {
extensions: [...]
}
};In addition, both menus built-in commands display can be personalized. To control the built-in commands display option, define and pass a command object in embed configuration settings.
var embedConfig = {
...
settings: {
commands: [...]
}
};To learn more, see Embed Configuration Details.
Use the updateSettings method to update the added items when the report is loaded. To learn more, see Update Settings.
export type Extensions = IExtension[];
export interface IExtension {
command?: ICommandExtension;
}
export interface IExtensionItem {
name: string;
extend: IExtensionPoints;
}
export interface ICommandExtension extends IExtensionItem {
title: string;
icon?: string;
selector?: CommandExtensionSelector;
}
export interface IExtensionPoints {
visualContextMenu?: IMenuExtension;
visualOptionsMenu?: IMenuExtension;
}
export interface IExtensionPoint {
}
export interface IMenuExtension extends IExtensionPoint {
title?: string;
icon?: string;
menuLocation?: MenuLocation;
}
- Define an Extensions array which contains the commands you want to include for report visuals. For each command, define:
- Command name
- Text
- Icon
- Extension points. These are points you want to attach the command to. Currently, two extension points are supported: visual context menu and visual options menu. You can decide to attach the command to just one or both. Each extension point can be customized with different text and icons.
extensions: [
{
command: {
name: "command name",
title: "command title",
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
extend:
{
visualContextMenu: {
title: "context menu title",
},
visualOptionsMenu: {
title: "options menu title",
}
}
}
}
]-
Pass the Extensions object in settings object in report load, as shown in the full code example below.
-
When app end-users click a menu item added by the extension array, the commandTriggered event is raised.
-
Listen on the commandTriggered event by using report.on and implement an event handler.
report.on("commandTriggered", function(event) {
// Handler code
}); // Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
embedUrl: 'https://app.powerbi.com/reportEmbed',
tokenType: models.TokenType.Aad,
accessToken: 'e4...rf',
settings: {
extensions: [
{
command: {
name: "command name",
title: "command title",
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
extend:
{
visualContextMenu: {
title: "context menu title",
},
visualOptionsMenu: {
title: "options menu title",
}
}
}
}
]
}
};
// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('embedContainer');
// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, embedConfiguration);
// Report.on will add an event handler to commandTriggered event which prints to console window.
report.on("commandTriggered", function(command) {
console.log(command);
});"data:image/png;base64,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"
You can now control the location of the menu command extension, by using the menuLocation property.
The menu command extension can be placed at the top or at the bottom of the menu.
Note: When adding more than one command to the top of the menu, the last command added will be at the top.
For example, using the code below you can set the options menu command extension at the top of the menu, and the context menu command at the bottom of the menu (default).
extensions: [
{
command: {
name: "command name",
title: "command title",
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
extend:
{
visualContextMenu: {
title: "context menu title",
menuLocation: models.MenuLocation.Bottom
},
visualOptionsMenu: {
title: "options menu title",
menuLocation: models.MenuLocation.Top
}
}
}
}
]By using commands configuration in Power BI Embedded, you can control the display of the built-in commands, per visual.
For each built-in command you can choose between three display options:
- Enabled - The command will appear if it is available for the visual.
- Disabled - The command will appear if it is available for the visual, but, it will be grayed out (and the user will not be able to click the command).
- Hidden - The command will not appear.
commands: [
{
exportData: {
displayOption: models.CommandDisplayOption.Enabled,
},
drill: {
displayOption: models.CommandDisplayOption.Disabled,
}
}
] export type VisualCommandSelector = IVisualSelector | IVisualTypeSelector;
export enum CommandDisplayOption {
Enabled,
Disabled,
Hidden
}
export interface ICommandSettings {
displayOption: CommandDisplayOption;
selector?: VisualCommandSelector;
}
export interface ICommandsSettings {
copy?: ICommandSettings;
drill?: ICommandSettings;
drillthrough?: ICommandSettings;
expandCollapse?: ICommandSettings;
exportData?: ICommandSettings;
includeExclude?: ICommandSettings;
removeVisual?: ICommandSettings;
search?: ICommandSettings;
seeData?: ICommandSettings;
sort?: ICommandSettings;
spotlight?: ICommandSettings;
}Selectors are the way to indicate on which objects the settings are applicable. The selector is optional, and when it doesn't appear, it means the settings are applicable for all the visuals in the report. Both menu commands extensions and built-in commands display support selectors. You will find more details about selectors in this page.