Skip to content

Instantly share code, notes, and snippets.

@itsananderson
Last active November 25, 2015 07:26
Show Gist options
  • Save itsananderson/14a179174ea65e246ce7 to your computer and use it in GitHub Desktop.
Save itsananderson/14a179174ea65e246ce7 to your computer and use it in GitHub Desktop.
Loading a Power BI dashboard tile in a XAML app

This example assumes you already know how to get an OAuth token and an embed URL for your tile. Use this documentation to get started: https://msdn.microsoft.com/en-US/library/mt450498.aspx#gettile

  1. Add a JS file to your project, with contents of "postActionLoadTile.js"
  2. Reference the JS file in your WebView string <script src=\"ms-appx-web:///postActionLoadTile.js\"></script>
  3. Use the WebView's InvokeScriptAsync method to call the postActionLoadTile JS function.
<Page
x:Class="App2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="myTextBox" />
<Button x:Name="myButton">Load</Button>
<WebView x:Name="myWebView" Height="700" FrameDOMContentLoaded="myWebView_FrameDOMContentLoaded" />
</StackPanel>
</Page>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App2
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SetEmbedUrl("{Your Tile Embed URL}");
}
private void SetEmbedUrl(string embedUrl)
{
myWebView.NavigateToString("<iframe id=\"iFrameEmbedTile\" src =\"" + embedUrl + "\" style=\"width: 400px; height: 405px\"></iframe><script src=\"ms-appx-web:///postActionLoadTile.js\"></script>");
}
private void myWebView_FrameDOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
var result = await myWebView.InvokeScriptAsync("postActionLoadTile", new[] { myTextBox.Text, "400", "400" });
}
}
}
function postActionLoadTile(accessToken, h, w) {
// Generate a message for the iframe
var m = { action: "loadTile", accessToken: accessToken, height: h, width: w };
var message = JSON.stringify(m);
// Push the message to the iframe
var iframe = document.getElementById('iFrameEmbedTile');
iframe.contentWindow.postMessage(message, "*");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment