Forum Discussion

Juramirez's avatar
Juramirez
Resolver I
8 years ago
Solved

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

Need Help
Tips and Tricks
Tutorial Requests
  • Juramirez's avatar
    Juramirez
    8 years ago

    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.

     

     

8 Replies

  • Eric_Zhang's avatar
    Eric_Zhang
    Microsoft Employee
    8 years ago
    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>

     

     

    • Juramirez's avatar
      Juramirez
      Resolver I
      8 years ago

      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

      • Juramirez's avatar
        Juramirez
        Resolver I
        8 years ago

        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.