Embed Power reports in Salesforce using LWC

[Anonymous]

Hello Team,

I had a use-case where we had to embed the PowerBI reports into the salesforce org using LWC.

I did a POC which involved deploying an open source project built by Microsoft (https://github.com/PowerBiDevCamp/SalesforceAppOwnsDataEmbedding)

I am facing few issues :

1. OnLoad of the component, i face multiple javascript pop-up errors, for around 4-5 times, and after that the report is loaded into the lwc component.

After a thorough debugging, i found the issue is from the powerbi.js static resource which we uploaded.

Has any body faced this issue?

Is there any way i can get rid of these javascript error pop-ups?

Attaching screenshots for reference.

[Akii112_]

Hii

How we can hide filters section of powerBi reports on lwc component??

[MeghaMalhotra_7]

Hello
I am referring same GITHub code for embedding power bi report in salesforce. But i need to append filter in the URL. I tried this link Filter a report using query string parameters in the URL - Power BI | Microsoft Docs. But I am unable to get power bi report in salesforce. Please guide. Thanks in advance.

[irakleiner]

<apex:page showHeader="true" standardStylesheets="false"  >

  <h1>Power BI User Owns Data Embed PowerBI w. Parameter Example - ikleiner</h1>

  <iframe 

    width="1200" 

    height="720" 

    src="https://ec2-52-54-65-73.compute-1.amazonaws.com/index.html?table=Geo&column=State&value=FL&reportId=ca1b2314-46ea-4de8-83ef-921c006a6fe2" 

    frameborder="0" 

    allowFullScreen="true">

  </iframe>

</apex:page>

[irakleiner]

let clientId = "8eee109b-30a5-40d7-9f80-d1743745266b";

let tenant = "019dd3cd-6d48-4d28-aafc-00f1ea5bf100";

let authority = "https://login.microsoftonline.com/" + tenant;

const msalConfig = {

  auth: {

    clientId: clientId,

    authority: authority,

  },

  cache: {

    cacheLocation: "localStorage",

    storeAuthStateInCookie: false,

  },

  system: {

    allowRedirectInIframe: true,

    asyncPopups: true

  }

};

const loginScopes = {

  scopes: [

    "openid",

    "profile",

    "email",

    "https://analysis.windows.net/powerbi/api/Report.Read.All",

  ]

};

const requestScopes = {

  scopes: [

    "https://analysis.windows.net/powerbi/api/Report.Read.All",

  ]

};

$(async function () {

  const params = new URLSearchParams(window.location.search)

  let reportId = params.get("reportId");

  if (!reportId) {

    DisplayError("!!The report is not configured with a valid report ID.");

    return;

  }

  let aadApplication = new msal.PublicClientApplication(msalConfig);

  // check if there is a cached identity for user

  const currentAccounts = aadApplication.getAllAccounts();

  if (currentAccounts.length > 0) {

    // user identity found - get access token and embed report

    accountId = currentAccounts[0].homeAccountId;

    let tokenRequest = requestScopes;

    tokenRequest.account = accountId;

    let tokenResponse = await aadApplication.acquireTokenSilent(tokenRequest);

    EmbedReport(tokenResponse.accessToken, reportId);

  }

  else {

    // user identity not found - show Sign-in button added xfilter

   $("#signin").click(async function () {

      let aadApplication = new msal.PublicClientApplication(msalConfig);

      aadApplication.loginPopup(loginScopes)

        .then(function (response) {

          EmbedReport(response.accessToken, reportId);

        })

        .catch(function (error) {

          DisplayError("!User login was not successful. Please try again.");

        });

    });

    $("#toolbar").show();

  }

});

let EmbedReport = function (token, reportId) {

  $("#toolbar").hide();

  $("#error-panel").hide();

  let padding = 8;

  $("#report-container")

    .width(window.innerWidth - padding)

    .height(window.innerHeight - padding);

  $("#loading")

    .width(window.innerWidth - padding)

    .height(window.innerHeight - padding)

    .show();

  let models = window["powerbi-client"].models;

//ikleiner

//https://community.powerbi.com/t5/Developer/Embedded-Report-add-filter-to-EmbedConfig/m-p/199918#M637...

//make sure you retype 'single quotes' if you copied from somewhere else 

//added  ikleiner 8/29/22

//let xfilter = params.get("filter");

//let xtable = params.get("table");

//let xcolumn = params.get("column");

//let xvalue = params.get("value");

const params2 = new URLSearchParams(window.location.search)

let xtable = params2.get("table");

let xcolumn = params2.get("column");

let xvalue = params2.get("value");

window.alert("<<table: >> "+xtable+ "<< column: >> "+xcolumn+"<<value: >>"+xvalue+"<<reportId: >>"+reportId );

//let xtable = 'Geo';

//let xcolumn = 'State';

//let xvalue = 'NJ'

const Filter1 = {

  $schema: "http://powerbi.com/product/schema#advanced",

  target: {

    table: xtable,

    column: xcolumn

  },

  operator: "Eq",

  values: [xvalue]

}

const Filter2 = {

  $schema: "http://powerbi.com/product/schema#advanced",

  target: {

    table: xtable,

    column: xcolumn

  },

  operator: "Eq",

  values: [xvalue]

}

//modified filters: to pass basicFilter construct 8-31-22 ikleiner

  reportLoadConfig = { type: "report", 

    id: reportId, 

    embedUrl: "https://app.powerbi.com/reportEmbed", 

    accessToken: token, 

    tokenType: models.TokenType.Aad, 

    filters: [Filter1], //filter array here -can add multiple blocks like [filter1, filter2]

    settings: { 

      filterPaneEnabled: true,

      navContentPaneEnabled: false,

      personalBookmarksEnabled: true,

        panes: {

            bookmarks: { visible: true },

            pageNavigation: { visible: true }

        } 

      } 

    };

  let reportContainer = document.getElementById("report-container");

  let report = powerbi.embed(reportContainer, reportLoadConfig);

//Add filter to the report

report.on("loaded", function () {

     $("#loading").hide();

     $("#report-container").show();

   });

  report.on("error", function (error) {

    console.log(error.detail.detailedMessage);

    DisplayError(error.detail.detailedMessage);

    $("#loading").hide();

  });

}

let DisplayError = function (msg) {

  $("#error-panel")

    .text("Error: " + msg)

    .show();

}

[Anonymous]

hi @Anonymous can you please provide how to you solve this issue as i am also working on the same and my requirement is to embeded power bi report in lwc it would be very helpful

thanks 

Rahul Singh Yadav

[Anonymous]

Hi I got the Solution it can be implemented using visualFore Page and by Using Remote@RemoteAction in the apex class and thet VF page can be embeded in LWc component

<apex:page controller="PowerBiEmbedManager" >


<html>

<head>

</head>
<apex:includeScript value="{! $Resource.powerbijs }"/>

<apex:form >
<apex:pageBlock >
<apex:actionFunction name="refreshAccessToken" action="{!getEmbeddingDataForReport}"/>
</apex:pageBlock>
</apex:form>
<div id="myReport" style="height: 2000px;"/>

<script>
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.PowerBiEmbedManager.getEmbeddingDataForReport}',
function(result,event)
{
if(result.embedUrl && result.embedToken){
let reportContainer = document.getElementById('myReport');
let reportId = result.reportId;
let embedUrl = result.embedUrl;
let token = result.embedToken;

let config = {
type: 'report',
id: reportId,
embedUrl: embedUrl,
accessToken: token,
tokenType: 1,
settings: {
panes: {
filters: { expanded: false, visible: false },
pageNavigation: { visible: false }
}
}
};

// Embed the report and display it within the div container.
let report = powerbi.embed(reportContainer, config);

}
})

</script>
</html>

</apex:page>

[Anonymous · Accepted solution]

Hi @Anonymous,

I think these should be more related to the LWC limitations, you can check the below link of limitations if they meet your scenario:

Supported Salesforce Targets and Tools - Salesforce Lightning Component Library
Regards,

Xiaoxin Sheng