I am working on a project where we need to embed a Power BI Report but not with the EmbedType of a Report - it should be visual. What I did is to embed each visual of the report into a separate DIV and what I have to do now is to apply the filters on each.
Sample Code (cshtml):
var embedContainer = '';
var pageName = '';
var visualName = '';
var type = '';
var DisplayObject = [
{
embedContainer: $('#report-container_hSlicer')[0],
pageName: 'ReportSection',
visualName: '0e2d3a2ad25c8c8c224b',
type: 'visual',
},
{
embedContainer: $('#report-container_lSlicer')[0],
pageName: 'ReportSection',
visualName: "1f1841a2b8b3414a4318",
type: 'visual',
},
{
embedContainer: $('#report-container_fSlicer')[0],
pageName: 'ReportSection',
visualName: "3acac86be0dd995b34b1",
type: 'visual',
},
{
embedContainer: $('#report-container_index')[0],
pageName: 'ReportSection',
visualName: '802df8d5bc156f326b5a',
type: 'visual',
},
{
embedContainer: $('#report-container_cbCity')[0],
pageName: 'ReportSection',
visualName: "3cd8ddf8eb40dcc35d4d",
type: 'visual',
},
{
embedContainer: $('#report-container_All')[0],
type: 'report',
},
]
On the JS for embedding:
var resultModel = {};
var report = null;
var pages = [];
var config = {};
var reports = [];
function getParameters() {
var model = {
"workspace": "8b4f5f85-02a4-4afe-9104-3d4929d025c4",
"report": "038b5e5b-4b51-40ae-91f6-580c745b32c3"
}
$.ajax({
type: "POST",
url: "/embedinfo/getembedinfo",
contentType: 'application/json',
data: JSON.stringify(model),
success: function (data) {
resultModel = {
token: data.embedToken.token,
embedUrl: data.embedReport[0].embedUrl,
reportID: data.embedReport[0].reportId,
type: data.type
}
//Display each visual
DisplayObject.forEach(e => {
embedContainer = e.embedContainer;
pageName = e.pageName;
visualName = e.visualName;
type = e.type;
embedPowerBIReport(resultModel.token, resultModel.embedUrl, resultModel.reportID, resultModel.type);
});
console.log(resultModel);
console.log('Got tokens');
},
error: function (err) {
alert(err);
}
});
};
let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
models = window["powerbi-client"].models;
function embedPowerBIReport(accessToken_, embedURL, embedReportID, TokenType) {
// Read embed application token
let accessToken = accessToken_;
// Read embed URL
let embedUrl = embedURL;
// Read report Id
let embedReportId = embedReportID;
// Read embed type from radio
let tokenType = TokenType;
// We give All permissions to demonstrate switching between View and Edit mode and saving report.
let permissions = models.Permissions.All;
// Create the embed configuration object for the report
// For more information see https://go.microsoft.com/fwlink/?linkid=2153590
if (type == 'report') {
config = {
type: type,
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
settings: {
panes: {
filters: {
visible: false
},
}
}
};
}
else {
config = {
type: 'visual',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: permissions,
pageName: pageName,
visualName: visualName,
navContentPaneEnabled: false,
settings: {
panes: {
filters: {
visible: false
},
}
}
};
}
// Get a reference to the embedded report HTML element
//let embedContainer = $('#report-container')[0];
// Embed the report and display it within the div container.
report = powerbi.embed(embedContainer, config);
// report.off removes all event handlers for a specific event
report.off("loaded");
// report.on will add an event handler
report.on("loaded", function () {
loadedResolve();
report.off("loaded");
});
// report.off removes all event handlers for a specific event
report.off("error");
report.on("error", function (event) {
console.log(event.detail);
});
// report.off removes all event handlers for a specific event
report.off("rendered");
// report.on will add an event handler
report.on("rendered", function () {
renderedResolve();
report.off("rendered");
});
reports.push(report);
}
async function main() {
await getParameters();
await reportLoaded;
console.log('Report Loaded');
// Insert here the code you want to run after the report is loaded
await reportRendered;
console.log('Report Rendered');
//console.log('got all page');
//var reportAll = reports.filter(function (report) {
// return report.embedtype == 'report';
//})[0];
console.log('got all page');
// Insert here the code you want to run after the report is rendered
const filter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tblLifeStage",
column: "Life Stage"
},
operator: "In",
values: ["F2 - Upscale Earners"],
filterType: models.FilterType.BasicFilter,
requireSingleSelection: true
};
//// Retrieve the page collection and get the visuals for the active page.
//pages = await reportAll.getPages();
//// Retrieve the active page.
//let page = pages.filter(function (page) {
// return page.isActive;
//})[0];
//const visuals = await page.getVisuals();
//console.log(visuals);
//// Retrieve the target visual.
//let slicer = visuals.filter(function (visual) {
// return visual.type === "slicer" && visual.name === "1f1841a2b8b3414a4318";
//})[0];
//console.log(slicer);
// Set the slicer state which contains the slicer filters.
for (const report of reports) {
console.log(report);
await report.setSlicerState({ filters: [filter] });
console.log("slicer was set.");
};
};
//Calling Async function
main();
We can Apply Visual level filters to every Visual. You can use updateFilters to set new filter to the Visual our Update the filters.
Simply add this piece of code On the js for embedding in the display each Visual section or you use the variable visualName and apply filters later to the visual.
await visualName.updateFilters(models.FiltersOperations.Replace, filtersArray);
Reference: