@rkumar wrote:
Hi,
Is there a way in Power BI (Embedded) by which we can restrict access of various tabs in Power BI report to different teams. eg securing different tabs of power BI report based on the username of the user logging in (belonging to some tenant) in our application.
If the tabs mean "pages", I think it is doable. However this approach is not that secure, for those who have javascript and html knowledge, they can hack and see every page. For more secure option, try to use Row level security in Power BI Embedded, though this will only limit the users accessing to see limited data, the users can still see all pages.
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script type="text/javascript">
window.onload = function () {
var embedConfiguration = {
type: 'report',
accessToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsIndjbiI6IlBvd2VyQmlBenVyZVNhbXBsZXMiLCJ3aWQiOiJmODFjMTk2Ni1lZGVlLTQxMWItOGY4YS1mODQ0NjAxOWIwNDQiLCJyaWQiOiJjNTJhZjhhYi0wNDY4LTQxNjUtOTJhZi1kYzM5ODU4ZDY2YWQiLCJpc3MiOiJQb3dlckJJU0RLIiwiYXVkIjoiaHR0cHM6Ly9hbmFseXNpcy53aW5kb3dzLm5ldC9wb3dlcmJpL2FwaSIsImV4cCI6MTg5MzQ0ODgwMCwibmJmIjoxNDgxMDM3MTY5fQ.m4SwqmRWA9rJgfl72lEQ_G-Ijpw9Up5YwmBOfXi00YU',
embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=c52af8ab-0468-4165-92af-dc39858d66ad',
settings: {
filterPaneEnabled: true,
//Set navContentPaneEnabled as false to hide page navigator. For demo purpose I set it true
navContentPaneEnabled: true
}
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
var $pageList = $('#pageList')
report.on('loaded', event => {
// Retrieve the page collection and loop through to collect the
// page name and display name of each page and display the value.
report.getPages()
.then(function (pages) {
var allpages=''
pages.forEach(function(page) {
allpages = allpages+'<button type="button" onclick=setPage(\''+page.name+'\')>' + page.displayName+'</button>';
});
console.log(allpages);
$pageList.html(allpages);
})
.catch(function (error) {
console.log(error);
});
//add you logic here to determine which page to set
//You'll find the ReposrtSection,ReposrtSection,ReposrtSection2,ReposrtSection3 etc by using the report.getPages()
setPage('ReportSection4')
});
}
function setPage(pagename){
// Get a reference to the embedded report HTML element
var reportContainer = $('#reportContainer')[0];
// Get a reference to the embedded report.
report = powerbi.get(reportContainer);
// setPage will change the selected view to the page you indicate.
// This is the actual page name not the display name.
report.setPage(pagename)
.then(function (result) {
console.log(result);
})
.catch(function (errors) {
console.log(errors);
});
// Report.off removes a given event handler if it exists.
report.off("pageChanged");
// Report.on will add an event handler which prints page
// name and display name to Log window.
report.on("pageChanged", function(event) {
var page = event.detail.newPage;
console.log(page.name + " - " + page.displayName);
});
}
</script>
<div id='pageList'> </div>
<div id="reportContainer" style="width:1600;height:900" ></div>
</html>
@rkumar wrote:
Hi,
Is there a way in Power BI (Embedded) by which we can restrict access of various tabs in Power BI report to different teams. eg securing different tabs of power BI report based on the username of the user logging in (belonging to some tenant) in our application.
If the tabs mean "pages", I think it is doable. However this approach is not that secure, for those who have javascript and html knowledge, they can hack and see every page. For more secure option, try to use Row level security in Power BI Embedded, though this will only limit the users accessing to see limited data, the users can still see all pages.
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script type="text/javascript">
window.onload = function () {
var embedConfiguration = {
type: 'report',
accessToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsIndjbiI6IlBvd2VyQmlBenVyZVNhbXBsZXMiLCJ3aWQiOiJmODFjMTk2Ni1lZGVlLTQxMWItOGY4YS1mODQ0NjAxOWIwNDQiLCJyaWQiOiJjNTJhZjhhYi0wNDY4LTQxNjUtOTJhZi1kYzM5ODU4ZDY2YWQiLCJpc3MiOiJQb3dlckJJU0RLIiwiYXVkIjoiaHR0cHM6Ly9hbmFseXNpcy53aW5kb3dzLm5ldC9wb3dlcmJpL2FwaSIsImV4cCI6MTg5MzQ0ODgwMCwibmJmIjoxNDgxMDM3MTY5fQ.m4SwqmRWA9rJgfl72lEQ_G-Ijpw9Up5YwmBOfXi00YU',
embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=c52af8ab-0468-4165-92af-dc39858d66ad',
settings: {
filterPaneEnabled: true,
//Set navContentPaneEnabled as false to hide page navigator. For demo purpose I set it true
navContentPaneEnabled: true
}
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
var $pageList = $('#pageList')
report.on('loaded', event => {
// Retrieve the page collection and loop through to collect the
// page name and display name of each page and display the value.
report.getPages()
.then(function (pages) {
var allpages=''
pages.forEach(function(page) {
allpages = allpages+'<button type="button" onclick=setPage(\''+page.name+'\')>' + page.displayName+'</button>';
});
console.log(allpages);
$pageList.html(allpages);
})
.catch(function (error) {
console.log(error);
});
//add you logic here to determine which page to set
//You'll find the ReposrtSection,ReposrtSection,ReposrtSection2,ReposrtSection3 etc by using the report.getPages()
setPage('ReportSection4')
});
}
function setPage(pagename){
// Get a reference to the embedded report HTML element
var reportContainer = $('#reportContainer')[0];
// Get a reference to the embedded report.
report = powerbi.get(reportContainer);
// setPage will change the selected view to the page you indicate.
// This is the actual page name not the display name.
report.setPage(pagename)
.then(function (result) {
console.log(result);
})
.catch(function (errors) {
console.log(errors);
});
// Report.off removes a given event handler if it exists.
report.off("pageChanged");
// Report.on will add an event handler which prints page
// name and display name to Log window.
report.on("pageChanged", function(event) {
var page = event.detail.newPage;
console.log(page.name + " - " + page.displayName);
});
}
</script>
<div id='pageList'> </div>
<div id="reportContainer" style="width:1600;height:900" ></div>
</html>
Helpful resources
Microsoft Fabric Learn Together
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Power BI Monthly Update - April 2024
Check out the April 2024 Power BI update to learn about new features.
Fabric Community Update - April 2024
Find out what's new and trending in the Fabric Community.
