Embedded Power BI Custom Print Functionality

How to print an entire Power BI report content with a single click

As a data visualization tool, Power BI provides rich visualization, self-service functionalities, as well as the ability to embed Power BI reports into your organization’s applicationsfeature that helps organizations to securely embed dashboards into an application in order to provide seamless integration in a costeffective way. 

Today, Power BI has limitations when it comes to the printing of the entire report content. The tool only allows you to print the visuals and the data currently shown on the screen while skipping or ignoring the content which is hidden behind the table scrollbar

This forces many organizations to use either SQL Server Reporting Services (SSRS), or paginated reports in Power BI Premium. However, both these options have multiple limitations.

To solve this common challenge, CloudMoyo has developed a customizable module that can be plugged into your application to support all your Power BI reports printing needs.  

In this blog post, we’ll explore how we can print the entire embedded Power BI report with the help of the custom, CloudMoyo module. For the purpose of this blog post, we’ve used Java (Spring MVC) and AngularJS to show the stepbystep implementation of the custom print functionality.   

Some background  

Normally, Power BI prints the entire visuals on the report. However, this is not applicable to the table visual. If we try to print the entire content of the Power BI table, the current Power-BI print functionality will print only the records that are visible on the screenas shown in the screenshot below of the table visual. The records are present in the table visual but are not visible due to the preset height and width of the table, which are not included in the print.

Dashboard-1
Figure. 1: By-default Power–bi embedded report print (sample)

Ithe case of reports that are embedded in an external web app (i.e., Power-BI embedded)we have developed custom code using AngularJS and JavaScript to print the entire content of the Power-BI table visual 

Microsoft has provided a set of APIs to embed Power BI reports in an external web app. In this set of APIs, Microsoft has also provided code block feature: 

” Export visual data – summarized ” in their official webpage [1].  

By using this API, we obtain the pointer to the table that needs to be printed. Once we get this pointer, we can iterate through each row in the table and copy it into an HTML table. This HTML table will be in-memory, created dynamically, and will be invisible to the end-users. Finally, we will pass this HTML table on for printing. 

Here is a diagram which will walk you through the custom print logic:

Dashboard-2
Figure. 2: Flow diagram of custom print logic

There are 3 possible scenarios that need to be considered during the development of this code. They are: 

  1. Print single table without “Total” row 
  1. Print single table with “Total” row 
  1. Print multiple tables on the same page 

A quick overview of the code  

Here’s a quick-and-dirty overview of the code. 

  1. Write the common HTML code for all scenarios, as shown below: 

<div id=“customtable3” style=”display:none;align-contentcenter;vertical-alignmiddle;” >

<div id=“customtable1” style=”align-contentcenter;align-selfcenter;justify-contentcenterpage-break-afteralways;” > </div> 

<div id=“customtable2” style=”align-contentcenter;align-selfcenter;justify-contentcenterpage-break-afteralways;” > </div> 

</div>

2. Get the visual IDsof the table(s) that needs to be printed

3. Check if a specific row(s) has been selected to print 

Some important parameters : Following are the parameters that needs to be passed to the function that prints the table. Based on these parameter values the function identifies which table to print with total row. 

  1. visual1: This is a first table visual ID/Name (an autogenerated, embedded, visual Name/ID). 
  1. visual2: This is a second table visual ID/Name (an autogenerated, embedded, visual Name/ID).
  1. isSingleTable: This is Boolean. Type. ‘true’ if you want to print just the first table, or type  false’ if you want to print both of the tables.  
  1. isTotalRowAdded: This is Boolean. Type ‘true’ if the total row added into the table and  ‘false’ if the total row is not added into the table 
  1. selectedArray: This is an Array type, with stored, selected data from the first table or the second table 

Some important events in the print processFollowing are the Power BI lifecycle events which need to be executed before called to the print function:   

  1. On-loaded: This is when the Power BI report will be loaded for the first time in I-frame 
  1. On-data-Selected: When user selects any specific row(s) of the Power BI table 
  1. On-button-Clicked: When user clicks on any button in the Power BI report 

By using the parameters and events listed aboveall these 3 scenarios can be covered 

How to capture data from the table with enduser specific row(s) of the table 

At this point, an “if- else” block is used to identify which table is selected by the user, and the identity [number] is used to identify the unique row of that table.

Dashboard-3

<insert short blurb about introducing the scenarios, what these scenarios are for, etc.> 

Scenario 1Print a single table without the “Total” row 

For this scenario, take a look at this single table, which has multiple rows and columns in it. Because of this, a horizontal and vertical scrollbar is visible.  

Input table:

Dashboard-4
Figure 3: A single table which has multiple rows and columns

Here is the call print functionality:

Dashboard-5

Output table:

Dashboard-6
Figure 4: Print preview single table with no single record selected by the end user from the multiple columns table
Dashboard-7
Figure 5: Print preview single table with multiple records selected by the end-user from the multiple columns table

Scenario 2: Print a single table with the “Total” row. 

For this scenario, consider single table having the “Total row present at the end. One of the limitations of Power Bi export is that it never exports the “Total row. Because of this, we need to calculate this row manually and add it at the end of the table as shown below.   

Input table:

Dashboard-8
Figure 6: A single table having the “Total” row present in it

This is what the call print functionality looks like:

Dashboard-9

Output:

Dashboard-10
Figure 7: Print preview of a single table having the “Total” row present in it

Scenario 3: Print multiple tables on the same page 

For this scenario, consider if two tables are present on the same page of a report. These two tables interact with each other so that data will be filtered vice versa of the tables. As a result, both tables will print simultaneously when we pass two visuals to the function. Here, we programmatically added page break after the new table, so that the next table will start on new page of the print, as shown below, 

Input table: 

Dashboard
Figure 8: Both tables on the same page of the report

This is what the call print functionality looks like:

Dashboard-12

Output:

Dashboard-13
Figure 9: Print preview of both tables simultaneously
Dashboard-14
Figure 10: Print preview of both tables simultaneously, with selected data from the first table. It also works vice versa

JavaScript print preview code 

This is the final code that we pass to the printer so that document gets printed with all the records:

Dashboard-15

More resources on using the Power BI embedded playground code can be found here 

Have any questions about Power BI, custom printing, or other data visualization solutions? you can explore our data visualization services here for more resources, or talk to one of our BI experts.

Sign up for a consultation today and explore more about our services offering