Disable right context menu from powerbi visuals

Viewed 147

I am using powerbi-client to embed Power BI reports into Angular8 project. I do not want to show right context menu on Power BI visuals by disabling a right click on angular side (highlighted in red square box).

enter image description here

I tried to prevent this on "loaded" event but it doesn't allow due to CORS issue.

enter image description here

Can any one suggest how to disable a right context menu from Power BI report ?

Can this be achieved using Java Script ?

1 Answers

For now, I don't think there is a way to disable a right click on a visual. Even solutions like <body oncontextmenu="return false"> would work on the web page "around" the embedded content, but not on the iFrame itself.

So it seems this cannot be achieved using JS

But, the powerbi-client allows you to use the config object to set different things, that's why I can highly recommend this article : https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/change-visual-commands#customize-menu-commands

For example, you can disable the Include/Exclude option (which can be disturbing on some visual to be honest) :

let embedConfiguration = {
  type: 'report',
  id: 'abc-...-123',
  embedUrl: 'https://app.powerbi.com/reportEmbed',
  tokenType: models.TokenType.Aad,
  accessToken: 'e4...rf',
  settings: {
    ...
    extensions: {
      commands: [{
        includeExclude: {
          displayOption: models.CommandDisplayOption.Disabled,
        }
      }]
    }
  }
};

// Embed the report with your custom settings
let report = powerbi.embed(embedContainer, embedConfiguration);

So, in the context menu, if there's a particular field you want to hide, that's a solution you can use. It's not perfect but it's the best I've found so far

Related