Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
9 years ago
Solved

Power BI Embed - Page Menu as List View

Hi,  i am able t embed the power bi into MVC application. what i want is , i need to hide the page in the report and provide the list of pages as list view and when user click on the particular pag...
Need Help
  • Eric_Zhang's avatar
    Eric_Zhang
    9 years ago

    Anonymous

    Check this demo in Chrome.

     

    <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,
		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);
    });

});

}

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>

     

Eric_Zhang's avatar
Eric_Zhang
Microsoft Employee
9 years ago

Anonymous

Check this demo in Chrome.

 

<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,
		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);
    });

});

}

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>

 

Anonymous's avatar
Anonymous
Not applicable
9 years ago

excellent 

much thanks Eric_Zhang