Preamble
It would not have escaped your notice that everything Microsoft produce for SharePoint is designed for ‘modern’ SharePoint. Whilst the marketing messages remain supportive of ‘classic’ SharePoint you cannot help thinking that classic SharePoint does not have long left (well from Microsoft’s perspective). With the emergence of ‘groupify’ you will be able to modernise many of your classic sites but classic sites will remain in your estate as the process cannot accomodate every site type, feature etc. . The ongoing presence of classic sites will induce tension as users bemoan the inability to do something in a classic site that they could easily achieve in a modern site. One area where this will be acutely felt is your Intranet as I’m betting that the vast majority of Intranets are built at great cost and effort using classic sites. Given the complexity and importance of your Intranet I doubt you will be ‘groupifying’ or replacing it with a Hub + Communication Sites model any time soon. One such example of the tension is the ability to embed a Power BI dashboard in a SharePoint page. I became aware of this tension when I was asked to add a dashboard to an Intranet page.
The embed process for Power BI in a modern site is click, click, done. The Power BI web part simplifies the process such that any user can embed a dashboard with minimal effort. However, in a classic page it is far from click, click, done. It is more like head, bang, desk, give up. Ok that is a little mean as it can be click, click, done for a classic page if you are willing to sacrifice the security of your information by publicly publishing your dashboard. But who would publish internal data publicly…
The purpose of this post is to demonstrate a method in which you can embed a Power BI dashboard in a classic page without publishing it externally. As stated in the title this approach is targeted towards the citizen developer as it needs to be as close to click, click, done as possible. The method has two key pre-requisites: licensing for Power BI Pro and PowerApps and so sadly will not be achievable for everybody. The licensing requirements adds to the tension between modern and classic. The tension is not helped by the confusing documentation for Power BI.
Whilst I’m on my soap box (cue Pythonesque cries to ‘get on with it’), you could develop a method following the ‘user owns data’ approach described in the Power BI documentation. This approach is definitely not for the citizen developer and is a fine example of how to make something so hard to drive you towards something else i.e. modern. If you go down this route then be prepared as it features lots of code, documentation that leaps and bites like the Rabbit of Caerbannog and conversations, with your Azure AD Global Administrator…
Pre-requisites
Licensing for Power BI Pro and PowerApps both for the developer and all consumers
Approach
- Create dashboard in an App Workspace in Power BI
- Share the dashboard with the target consumers
- Create a PowerApp to host the dashboard
- Share the PowerApp
- Embed the PowerApp in the classic page
Create dashboard in a App Workspace in Power BI
Whilst I’m not going to walk through the dashboard creation process I thought it worthwhile to pass on some lessons I learned through it.
Using an App Workspace is definitely the right approach as part from anything it gives your embed a fall back method. Once you have created your dashboards and published the app you can create direct links to the dashboard for use in pages (either modern or classic). You can also guide users to the App or install it for them.
This approach works best for dashboards or reports that are formatted in the web view. If you need a more responsive design then additional dashboards, reports and PowerApps will be required (and probably a chat with the Rabbit of Caerbannog). Even then you are really constrained to 2 sizes i.e landscape tablet and portait mobile. The fall back scenario should be links in all situations.
Share the dashboard with the target consumers
I have noticed that you need to be careful with the link you use when sharing a dashboard or report as in my experience not all links are static. For linking I navigate to the dashboard or report that needs to be linked and then grab the link from share menu and not the address bar.
When setting up a dashboard or report for sharing through embed it is important to share the dashboard or report first using the sharing control (shown above) and then at App level. In my experimentation I’ve noticed that it is insufficient to simply share at App level and expect a published item to appear in an embedded scenario. Seemingly Sharing at App level only provides access through the app to the published items with the result that the dashboard or report is not displayed in the embed scenario. So step 1 is to follow the sharing proceess for dashboards and then step 2 is to publish the app. It’s worth making your life easier by using the same permissions group when sharing and publishing as that eases the triage around who has access to what.
Be patient if you are sharing with or publishing to large numbers of people or an Active Directory – Dynamic Group. Power BI will advise that it might take 5 to 10 minutes for the change to cascade through. In my experience when sharing with or publishing to 16,000 users it can take a lot longer than that…
Create a PowerApp to host the dashboard
The process for creating the app is easy and follows the method in this blog post. My recommendation is to start with a blank tablet app template and expand the Power BI tile to fill the entire canvas. If the tile is smaller than the canvas you will introduce white space around the tile when it is embedded. The default canvas size for the tablet app is 1366 x 768 pixels which closely matches the default web view format in Power BI. Do not worry if the app is too big for the host page as you will reduce the size to match the page when it is embedded.
Share the PowerApp
When you are ready share, share it to the same group of people as the used by dashboard or share it to the entire organisation. Sharing to the organisation has the advantage of one less thing to change if you need to broaden or narrow who has access to the dashboard. If a user does not have access to the dashboard the app will load but the dashboard will be replaced by a message from Power BI that states it is unable to display the content. The final step in this section is to publish the app. When you publish an app you can set the colour of its icon to one of 25 colours. This colour is used whilst the app is loading. Make a note of the colour you chose as it is needed when you embed it in the page. The colours below correspond to those used in PowerApps.
rgba(0, 176, 240, 1)rgba(0, 134, 208, 1)rgba(0, 99, 177, 1)rgba(37, 62, 143, 1)rgba(44, 125, 154, 1)rgba(175, 229, 178, 1)rgba(105, 180, 69, 1)rgba(0, 138, 0, 1)rgba(1, 131, 134, 1)rgba(12, 193, 169, 1)rgba(253, 193, 2, 1)rgba(251, 101, 60, 1)rgba(208, 52, 56, 1)rgba(165, 34, 55, 1)rgba(243, 138, 122, 1)rgba(209, 74, 119, 1)rgba(168, 36, 120, 1)rgba(129, 42, 141, 1)rgba(104, 101, 171, 1)rgba(142, 140, 216, 1)rgba(126, 115, 95, 1)rgba(72, 104, 96, 1)rgba(81, 92, 107, 1)rgba(1, 60, 96, 1)rgba(76, 74, 72, 1)
Embed the PowerApp in the classic page
The final step in the methodology is to add a Script Editor web part to the classic page which will host the dashboard and display the PowerApp using an iFrame. The process uses a technique from this blog post. At its simplest the iFrame src value could be:
src="https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]"
In order to provide a better loading experience for your users, it is worthwhile setting the screenColor attribute of the iFrame to the one that matches the PowerApp’s icon colour. You can get the RGBA values from the table in the previous section. Additionally you should reduce the size of the iFrame to match the page content. For example if the surrounding page content is 1065 pixels wide you will need to scale the app down otherwise your embedded app will extend beyond the width of the page and a horizontal scroll bar will be introduced. If you have used the blank tablet app template then its aspect ratio is 16:9 (width:height). You can use the ratio to calculate the height of the iFrame that matches the desired width. Preserving the aspect ratio means that your dashboard will not be squashed nor additional scroll bars introduced. In this example the resulting iFrame height would be:
(1065 / 16 ) * 9 = 599 pixels wide
The resulting embed code for use in the web part would be:
buildbod.com 