cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Sarr
Advocate III
Advocate III

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 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);
    });
1 ACCEPTED SOLUTION
Eric_Zhang
Microsoft
Microsoft

@Sarr

Check this demo in Chrome.

Capture.PNG

 

<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>

 

View solution in original post

2 REPLIES 2
Eric_Zhang
Microsoft
Microsoft

@Sarr

Check this demo in Chrome.

Capture.PNG

 

<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>

 

excellent 

much thanks @Eric_Zhang

Helpful resources

Announcements
Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

charticulator_carousel_with_text (1).png

Charticulator Design Challenge

Put your data visualization and design skills to the test! This exciting challenge is happening now through May 31st!

Power BI Dev Camp Session 22 768x460.jpg

Check it out!

Mark your calendars and join us on Thursday, May 26 at 11a PDT for a great session with Ted Pattison!

Top Solution Authors