[MUSIC].
>> Module 04, Part 2,
Embed Power BI Content.
Hello, I'm Peter Myers and I will now
demonstrate how to embed Power BI content in a web app.
This demo has two parts:
In the first part, I'll create and set up an
ASP.NET Core MVC app.
In the second part,
I'll embed the reports from my Sales Reports workspace.
To create the web app, here in Visual Studio Code,
I'll go ahead and open an existing folder.
Then in the terminal, I'll create the MVC web app.
Next, I need to add three packages.
First I add Microsoft.Identity.Web.
It's a set of ASP.NET Core libraries that simplify
adding authentication and authorization
support to web apps.
Next, I add the Power BI API.
It provides service endpoints for embedding,
administration, and user resources.
Lastly, I add Json.NET.
Now in the Explorer pane,
I expand the Views folder and
the Shared folder and open the Layout file.
Here, I'm going to perform
a search-and-replace to replace
any instances of "SalesReporting"
with the "Tailspin Toys Sales."
Then on line six,
I just adjust the title element to
show just the "Tailspin Toys sales app" title.
I save and close the Layout file.
Next, I open the appSettings file,
and then I paste in some new sections,
specifically Azure AD, Power BI, and current user.
Into Azure AD, I'm going to
copy-paste values from MySettings, like the tenant,
the tenant ID,
and the client ID,
and then its secret.
Lastly, for Power BI settings,
I then copy-paste in the workspace ID.
This informs the application of
the workspace that contains the content to embed.
The third section for the
current user will be covered
later with data permissions and row-level security.
I'll go ahead and save and close the appSettings.
Now I go ahead and replace
the default style sheet with a pre-developed one.
That way the app will look respectable.
In the Explorer pane, I go ahead and expand
the wwwroot and CSS folders.
Then from a file resource that I pre-developed,
I just drag-drop the site.css file and
paste it over the top, and confirm to replace.
I then close that file.
Before I embed any content,
it's now time to test the app
to see that all this is in order.
On the Run pane, I go ahead and create a
launch.json file using .NET Core.
I then close that file and then I proceed to run the app.
The web app opens in a new browser tab,
and there's no content to see; all looks good.
I'm now ready to continue the development of
the app to embed Power BI reports.
I go ahead and close the web tab,
return to Visual Studio Code,
and stop the running of that app.
Now it's time for the second part of
the demo to embed Power BI reports.
In the Explorer pane,
I expand the Models folder.
I then use the drag-drop technique to add
a pre-developed file, EmbeddedDataset, into that folder.
This file contains a single class that
comprises properties of a Power BI dataset.
Then we go ahead and add a second file
for EmbeddedReport.
Now I have three files in the Models folder.
Next, I will add the ViewModel class to the web app.
I create a new folder named ViewModels.
I then add the WorkspaceViewModel
pre-developed file into that folder.
The file contains a single class
that comprises properties describing
the datasets and reports, and
the embed token, all in JSON.
An object of this type will describe
all reports and datasets for a workspace,
and the embed token required to
embed the content in the app.
It will be available client-side
to support the embedding operations.
Now I'm ready to add the service logic to
create an access token and connect to
the Power BI service to retrieve details of
workspace artifacts and generate the embed token.
I create a new folder named Services.
Then I create a file in that folder
named PowerBiApiService.cs.
I then paste into this file
the namespace directive that will be
required and the definition of a namespace.
Within the namespace, I enter some code.
Let me go ahead and select everything and format it.
What I've just added into the namespace are
some member declarations and also a constructor.
The constructor sets private members on how
to connect and authenticate with Power BI.
Beneath the constructor, I go ahead and add a new method.
This method is the GetAccessToken.
Beneath that method, I then add another method.
This is GetPowerBiClient,
then beneath that method,
I add an additional method.
Now, this method is to GetReportsEmbeddingData.
To step through the logic,
it connects to Power BI.
It enumerates all reports within the workspace,
retrieving their ID, name,
and embed URL properties.
It then enumerates all of the datasets in the workspace,
again, retrieving ID, name,
and embed URL properties.
It then generates the token request for the workspace,
bundles those requests together,
and generates the embed token.
Finally, it returns the report
embedding data to the caller.
I then save and close the open files.
Next, I configure the view which
comprises div and script elements.
Here in the Home folder,
I go ahead and use
the drag-drop technique to replace the Index file.
In this file, notice that at line one,
the model directive allows accessing
the embedding content that
the controller passed to the view.
At lines 6-18,
div elements are used to display workspace artifacts.
At line 22, you can see
the embedding container which will
contain embedded Power BI content.
At line 28, a reference
to the Power BI client-side script.
Then it lines 29-33, client-side variables
that will be assigned embeddable
content and the embed token.
I'll go ahead and close that file.
Next, I add client-side logic to generate
nav links, and embed reports in the Q&A experience.
Now I use the drag-drop technique to drag the
embed.js file into the js folder of the wwwroot folder.
In this pre-developed report, at line 7,
you can see a function to generate
nav links for the reports and datasets.
At line 39, there's a function to embed a report,
noting the creation of
the config object and the final line
using the embed method to embed
in that div using the config object.
Then at line 66, there's the function to embed
the Q&A experience for
a dataset with its config object and again,
embedding into the div using that object.
I close the embed file and then I open the Index File.
Then at the very bottom of this file,
beneath the second script element,
I add a third script element.
The view now has a reference to
the client-side logic that I added previously.
I save and close the file.
I'm now ready to add the controller.
Within the Controllers folder,
I opened the HomeController file.
I go ahead and add a new namespace directive,
and then in the HomeController class
I remove some default code.
I will remove the Ilogger read-only member,
and also the constructor.
I then paste in a new member and a new constructor.
With this logic, adding a private member to
store a reference to the Power BI service,
and then beneath it the constructor
that sets the private member.
I then replace the Index method.
Then I go ahead and save and
close the HomeController file.
I'm now ready to add dependency injection.
I go ahead and open up the Startup file,
and then I paste in two additional namespace directives.
Then in the ConfigureServices method,
I go ahead and add some new logic.
I then save and close the startup file.
Finally, I'm ready to test the app.
I press F5 to run.
Then here in the Navigation pane,
I can see the two reports and the one dataset.
To embed a report,
I simply click a report link.
Here's the Sales Analysis report.
Completely interactive.
I can also open the Sales Map report.
When I click the Sales Analysis dataset,
it opens the Q&A experience.
I could select a suggested question,
or I could enter my own.
What were the average unit price by date,
year as a column chart?
There I go, I've completed the creation of
a new web app and have embedded Power BI content.