Skip to main content
cancel
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
Juramirez
Resolver I
Resolver I

Embedding report and dashboard at the same time

Hi! Can I embed a dashboard and a report and show only the dashboard and when a tile is clicked that the  embedded report opens in the page of this one that I want? I mean, by example, I have a dashboard with 2 tiles and a report with 2 pages. Only the dashboard is shown to the client (when he get into the page) and when he clicked on tile 2 that the report opens in the page 2 (i don't know if this can be done modifying the JS of the embedded dashboard).

1 ACCEPTED SOLUTION

I just solved this! I used the code to embed Reports and Dashboard simultaneously donwlodable here: Power BI Developer

The code provided by @Eric_Zhang goes in EmbedDashboard.cs like this: 

if(clickedTile = 'TILE ID'){
	window.open('EmbedReport', '_blank');
	}

 It opens the EmbedReport.cs and you just need to set the needed configuration to open in the page that you want depending the tile clicked.

 

 

View solution in original post

8 REPLIES 8
Eric_Zhang
Employee
Employee


@Juramirez wrote:

Hi! Can I embed a dashboard and a report and show only the dashboard and when a tile is clicked that the  embedded report opens in the page of this one that I want? I mean, by example, I have a dashboard with 2 tiles and a report with 2 pages. Only the dashboard is shown to the client (when he get into the page) and when he clicked on tile 2 that the report opens in the page 2 (i don't know if this can be done modifying the JS of the embedded dashboard).


@Juramirez

The event "tileClicked" of dashboard is for your requirement. You can try

 

<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 () {
 // Read embed application token from Model
    var accessToken = "H4sIAxxxxxCwAA";

    // Read embed URL from Model
    var embedUrl = "https://msit.powerbi.com/dashboardEmbed?dashboardId=66d6daf2-53e7-4f9e-a196-13e88c1cbdde&groupId=dc581184-a209-463b-8446-5432f16b6c15";

    // Read dashboard Id from Model
    var embedDashboardId = "66d6daf2-53e7-4f9e-a196-13e88c1cbdde";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models	

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'dashboard',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
		pageView: "fitToWidth",
        id: embedDashboardId
    };

    // Get a reference to the embedded dashboard HTML element
    var dashboardContainer = $('#dashboardContainer')[0] ;

    // Embed the dashboard and display it within the div container.
    var dashboard = powerbi.embed(dashboardContainer, config);  
	 	
	dashboard.on("tileClicked", function(event) { 
	
    var clickedTile = event.detail.tileId;
	
	if(clickedTile = '0484db13-1cf5-4820-8309-788e6bb9b80b'){
	window.open('http://www.ReportPage1URL.com', '_blank');
	}
	else
	{
	window.open('http://www.ReportPage2URL.com', '_blank');
	}	
});
	 
 
}
   
</script> 

<p><input type="hidden" id="Textinput" /></p> 
<div id="dashboardContainer"></div>
   
</html>  

 

 

Hi @Eric_Zhang. It looks good but :

if(clickedTile = '0484db13-1cf5-4820-8309-788e6bb9b80b'){
	window.open('http://www.ReportPage1URL.com', '_blank');
	}

 What is the token associated to clickedTile?  Where can i get it for each tile? 

And the url in window.open is from a pubished report, am i wrong? I want this but from a embedding report, how can I do this? I can't see a tutorial for this at the documentation.

 

Thanks in advance!

Julian

I just solved this! I used the code to embed Reports and Dashboard simultaneously donwlodable here: Power BI Developer

The code provided by @Eric_Zhang goes in EmbedDashboard.cs like this: 

if(clickedTile = 'TILE ID'){
	window.open('EmbedReport', '_blank');
	}

 It opens the EmbedReport.cs and you just need to set the needed configuration to open in the page that you want depending the tile clicked.

 

 

Anonymous
Not applicable

@Juramirez : i am very much new to powerbi embedded .can you help here please

Sure, what do you need?

Anonymous
Not applicable

@Juramirez i am more of new to embedded reporting . I want to check with you on the steps on implementation since i am not a developer of any code till now . Small code i can work . Will RLS works for embedded reporting?

Hi @Anonymous 

 

Follow all documentation in here https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html#

There are example codes which allows you to set your app to use Power BI Embedded and you can see some examples of how it works. In here: https://azure.microsoft.com/es-mx/updates/power-bi-embedded-track-your-free-embed-token-api/ you can see license pricing to have in mind before start implementening Power BI embedded

 

Regards,

Julian

Hi @Juramirez and @Eric_Zhang,

  I am trying to  achieve the same by embedding the report in SharePoint Online page.

I am slightly confused about where exactly the html part should go?

 

Can we edit the Dashboard page in powerBI itself and embed this scriptings? If so should we using powerBI desktop or we can achieve in browser itself

 

I have raised case in Developer forum for same

 

Anyhelp regarding this would be highly appreciated.    

Helpful resources

Announcements
LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.