Power BI Embed - Page Menu as List View

Anonymous — Fri, 12 May 2017 18:13:38 GMT

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 page name, then the navigation should happen
i disabled the page using the navContentPaneEnabled as false but now i am stuck with creating menu list view. i searched the github and there is a function available as below, but i am not a expert in MVC or java script
can someone help me here .

this is the reference code

// Get a reference to the embedded report HTML element
var reportContainer = $('#reportContainer')[0];
 
// Get a reference to the embedded report.
report = powerbi.get(reportContainer);
 
// 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) {
        pages.forEach(function(page) {
            var log = page.name + " - " + page.displayName;
            Log.logText(log);
        });
    })
    .catch(function (error) {
        Log.log(error);
    });

Re: Power BI Embed - Page Menu as List View

Eric_Zhang — Wed, 17 May 2017 07:23:14 GMT

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>

Re: Power BI Embed - Page Menu as List View

Anonymous — Wed, 17 May 2017 13:33:14 GMT

excellent

much thanks Eric_Zhang

topic Re: Power BI Embed - Page Menu as List View in Developer

Power BI Embed - Page Menu as List View

Re: Power BI Embed - Page Menu as List View

Re: Power BI Embed - Page Menu as List View