Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

Reply
Anonymous
Not applicable

Power BI Embed - Page Menu as List View

‎05-12-2017 11:13 AM

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);
    });
Labels:
Message 1 of 3
3,454 Views
0
1 ACCEPTED SOLUTION
Eric_Zhang
Employee
Employee

‎05-17-2017 12:22 AM

@Anonymous

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

Message 2 of 3
4,519 Views
2 REPLIES 2
Eric_Zhang
Employee
Employee

‎05-17-2017 12:22 AM

@Anonymous

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>

 

Message 2 of 3
4,520 Views
Anonymous
Not applicable
In response to Eric_Zhang

‎05-17-2017 06:33 AM

excellent 

much thanks @Eric_Zhang

Message 3 of 3
3,408 Views
0

Helpful resources

Announcements
RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.

LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.

View All