topic Re: Embed Power reports in Salesforce using LWC in Developer

Embed Power reports in Salesforce using LWC

Anonymous — Thu, 02 Dec 2021 08:33:42 GMT

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.

Re: Embed Power reports in Salesforce using LWC

Anonymous — Mon, 06 Dec 2021 02:08:57 GMT

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

Re: Embed Power reports in Salesforce using LWC

Anonymous — Wed, 09 Mar 2022 07:19:35 GMT

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

Re: Embed Power reports in Salesforce using LWC

MeghaMalhotra_7 — Mon, 18 Apr 2022 08:58:10 GMT

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.

Re: Embed Power reports in Salesforce using LWC

irakleiner — Tue, 13 Sep 2022 13:19:08 GMT

<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>

Re: Embed Power reports in Salesforce using LWC

irakleiner — Tue, 13 Sep 2022 13:20:16 GMT

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#M6374

//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();

}

Re: Embed Power reports in Salesforce using LWC

Anonymous — Wed, 14 Sep 2022 10:22:56 GMT

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>

Re: Embed Power reports in Salesforce using LWC

Akii112_ — Thu, 19 Jan 2023 07:26:36 GMT

Hii

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