Forum Discussion
Anonymous
5 years agoNot applicable
power bi embedded
Hello all, I am trying to embed Power BI report into React website. import { Report } from 'powerbi-report-component';<Report tokenType="Embed" // or, "Aad" accessToken="" // accessToken...
- 5 years ago
Hi Anonymous ,
Try to modify the following code to meet your requirements:
// Get a reference to the embedded report HTML element var embedContainer = $('#embedContainer')[0]; // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; // Define default visual layout: visible in 400x300. let defaultLayout = { width: 400, height: 250, displayState: { mode: models.VisualContainerDisplayMode.Hidden } }; // Define page size as custom size: 1000x580. let pageSize = { type: models.PageSizeType.Custom, width: 1000, height: 580 }; // Page layout: two visible visuals in fixed position. let pageLayout = { defaultLayout: defaultLayout, visualsLayout: { "VisualContainer1": { x: 70, y: 100, displayState: { mode: models.VisualContainerDisplayMode.Visible } }, "VisualContainer3": { x: 540, y: 100, displayState: { mode: models.VisualContainerDisplayMode.Visible } } } }; let settings = { layoutType: models.LayoutType.Custom, customLayout: { pageSize: pageSize, displayOption: models.DisplayOption.FitToPage, pagesLayout: { "ReportSection600dd9293d71ade01765": pageLayout } }, panes: { filters: { visible: false }, pageNavigation: { visible: false } } } // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Update the settings by passing in the new settings you have configured. try { await report.updateSettings(settings); Log.logText("Custom layout applied, to remove custom layout, reload the report using 'Reload' API."); } catch (error) { Log.log(error); }Reference: Power BI Embedded custom layout | Azure updates | Microsoft Azure
Best regards
Icey
If this post helps, then consider Accepting it as the solution to help other members find it faster.
Icey
5 years agoCommunity Support
Hi Anonymous ,
Try to modify the following code to meet your requirements:
// Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
// Define default visual layout: visible in 400x300.
let defaultLayout = {
width: 400,
height: 250,
displayState: {
mode: models.VisualContainerDisplayMode.Hidden
}
};
// Define page size as custom size: 1000x580.
let pageSize = {
type: models.PageSizeType.Custom,
width: 1000,
height: 580
};
// Page layout: two visible visuals in fixed position.
let pageLayout = {
defaultLayout: defaultLayout,
visualsLayout: {
"VisualContainer1": {
x: 70,
y: 100,
displayState: {
mode: models.VisualContainerDisplayMode.Visible
}
},
"VisualContainer3": {
x: 540,
y: 100,
displayState: {
mode: models.VisualContainerDisplayMode.Visible
}
}
}
};
let settings = {
layoutType: models.LayoutType.Custom,
customLayout: {
pageSize: pageSize,
displayOption: models.DisplayOption.FitToPage,
pagesLayout: {
"ReportSection600dd9293d71ade01765": pageLayout
}
},
panes: {
filters: {
visible: false
},
pageNavigation: {
visible: false
}
}
}
// Get a reference to the embedded report.
report = powerbi.get(embedContainer);
// Update the settings by passing in the new settings you have configured.
try {
await report.updateSettings(settings);
Log.logText("Custom layout applied, to remove custom layout, reload the report using 'Reload' API.");
}
catch (error) {
Log.log(error);
}
Reference: Power BI Embedded custom layout | Azure updates | Microsoft Azure
Best regards
Icey
If this post helps, then consider Accepting it as the solution to help other members find it faster.