>> [MUSIC] Module 4, Embed Power BI Content.
Hello, I'm Peter Myers, the course developer.
>> I'm Noam Raveh. I'm a product manager
from the Power BI Embedded team.
>> In this video, we will describe
the development methodology for
embedding Power BI content.
We will cover registering
an Azure AD app, importing NuGet packages,
adding app settings, and then
the mechanics of embedding Power BI content.
Here we are at Stage 3 of the development methodology,
registering an Azure AD app.
>> An Azure AD app is
required to establish an identity for
your app and to specify
permissions to Power BI REST resources.
It's required when requesting an access token.
There are two registration tools that you can
use to register an Azure AD application:
There's the Azure portal and there's an Embed setup tool.
Lastly, permissions can also be
granted programmatically in your code.
>> Let's now describe each of those registration tools.
Use the Azure portal to register an app.
The advantages are it exposes all supported permissions,
it allows granting permissions, it allows reviewing,
modifying, deleting an app,
and it allows setting a service principal.
However, there's one disadvantage:
It requires accessing the Azure portal,
which can be time consuming and complex.
>> You will need to grant permissions for the master user
to avoid being prompted for consent by Azure AD.
A Global admin can grant permissions to
all users within the organization for this application.
However, the master user,
which is not a Global admin,
can grant permissions only to
the master account for this application.
>> Note that granted permissions are not required
when using a service principal embedding identity.
>> You can also use the embed setup tool
to accelerate embedding.
It provides you two paths:
There is "Embed for your customers"
and "Embed for your organization."
The Embed setup tool lets you register an Azure AD app,
which allows delegation of common permissions.
It also allows you to create a workspace.
Import Power BI Desktop file;
you can either select a sample or use
your own file, and also
grant permissions for the Azure AD app.
It provides the resources,
including the configuration values for your app,
workspace, and report,
and also a downloadable sample solution with
your configuration values already
inserted into its config file.
You can open the sample app in
Visual Studio, insert your password
into the config file and simply
run it to achieve your first embed.
>> Use the Embed setup tool to
accelerate embedding for your organization.
It's targeted at enterprises that want to embed
analytic content on behalf of their internal users.
The workflow involves signing in to Power BI,
registering your app, creating
a workspace, and importing content.
Use the Embed setup tool to
accelerate embedding for your customers,
which this time is targeted at those
that want to embed analytic content.
The workflow involves signing in to
Power BI, registering your app,
creating a workspace, importing
content and granting permissions.
Note this tool does not support using
service principal embedding identity.
Now we've arrived at stage 4 of
the development methodology; Importing NuGet packages.
>> Once you've created a web project,
you can import the following packages:
There's the Microsoft.Identity web package and
also the Microsoft.PowerBI.API package.
The powerbi.js script can be imparted using npm or CDN.
>> Let's now introduce those packages to you.
The Microsoft.Identity web package enables ASP.NET core
web apps and web APIs to
use the Microsoft Identity platform.
The Microsoft.PowerBI.API package is a .Net client
library for Microsoft Power BI public REST endpoints, and
it provides access to Power BI workspaces and
content identifiers for datasets,
reports, dashboards, and tiles.
Here we are at stage 5 of
the development methodology; Adding app settings.
>> We need to now add
our app settings to the appsettings.json file.
For Azure AD, you will need to add your domain,
tenant ID, client application ID, and client secret.
For Power BI, you will need to add
the service root URL and optionally the workspace IDs.
>> Here's what an app settings file might look like:
It includes values for
all the settings we just mentioned.
Now here we are at Stage 6
of the development methodology;
Embedding Power BI content.
>> The embedding web page must
include at minimum two things:
There's the script element to
source the client-side library,
and also the div element in which you'll be embedding.
>> Server-side, the web app should
generate an access token and generate
an embed token that would then represent
a list of dataset IDs and report IDs,
access level, optional effective identities if there's
row-level security, and optionally a target workspace
if you're saving reports.
Note that access level only applies to
Power BI reports, not paginated reports.
Then retrieve the resource IDs,
be it your report ID,
dashboard ID or tile ID,
and then retrieve the embed URLs.
>> On the client side,
you will need to output embed artifacts
inside a script element.
Then the configuration object will be
used to describe what and how to embed.
In this example, you
can see that we're embedding a report.
The artifact type could also be a visual,
a dashboard, a tile, or qna.
The ID will be the unique ID of your embedded content.
The token type can either be Embed
or Aad, when embedding for our organization.
Lastly, you can set resource-specific settings.
In this example you can see that we are
hiding the filters and page navigation panes.
>> Let's now discuss report specific settings.
There's type, which must be "report,"
there're optional settings that allow you to hide
certain panes or to control language and many others.
There's the optional "pageName" to
focus on a page in the report.
There are optional permissions, if required,
especially when creating or modifying reports,
and lastly, there's the "viewMode."
Is it view or does it support edit?
Do note that embed tokens must have acquired
relevant privileges for that edit to work.
>> There are also specific settings
when embedding report visuals.
In this case, the type will be set to "visual,"
and you must also provide a page name and a visual name.
They're optional settings which you can set, such as
language settings, and locale settings, and many others.
Optionally, you can also set
the height and width of your element.
However, if not provided,
the div size will be used.
>> There are also dashboard and
dashboard tile specific settings.
For dashboards the type is set to "dashboard" and
there's the optional "pageView;" it can use actual size,
fit to width, or one column.
For dashboard tiles, you will set the type to "tile."
>> There are also Q&A specific settings.
Here the type will need to be set as "qna,"
and you will need to select the view mode,
either interactive or resultOnly.
ResultOnly mode uses a pre-populated question,
while interactive mode allows
your users to input their own questions.
Providing a question is
optional if using interactive mode,
however, mandatory if using a resultOnly mode.
>> A final step is to invoke the powerbi.embed method,
and that's done by passing in
the div element and the configuration object.
Let's now describe some optimization
steps you might want to take.
>> In order to improve the end user experience
and provide more flexibility for developers,
the API calls can add phases to the embedding process.
There are two functions to
consider when using phased embedding:
There's the load function, which
retrieves information on the embedded object and
dynamically changes any settings or
the containing div element in
the background before the object appears.
Then there's the render function,
which makes the object visible.
Let's say you would like to embed content,
but first you would like to perform actions such as
selecting a specific visual or page.
In this case, you would first call the load function.
Once this function is called,
you can add any additional code for performing
you're filtering or any other desired actions.
Lastly, you will use
the render function to display your content.
Consider using bootstrap to
prepare and initialize the iFrame while
waiting for the server side calls
to return the resources and tokens.
When using bootstrap,
report ID embed URL and access token are not required.
Keep in mind that this is not
supported for paginated reports.
>> Let's lastly consider report layout customizations.
A custom layout allows you to set
a personalized layout for
the report visuals at runtime or on load.
Display options can be fit to page,
fit to width, and actual size.
A report with a default layout will
render in the given div size.
To avoid scroll bars adjust
the div size to the size of the report.
To seamlessly integrate a report in your application,
consider removing the iFrame border,
setting the report background to transparent in
order to reveal the web application background.
Note custom layouts can also be
achieved by using report bookmarks.
In the next video, I'll demonstrate
how to embed Power BI reports.