Configuration

The WireBootstrap for Power BI Tile Component code uses Power BI's client embed APIs to embed tiles from dashboards as individual visualizations.

Use the following configuration options to bind the WireBootstrap Power BI Tile Component.

Property Name	Description
accessToken	The security token needed to access the dashboard tile in Power BI. See accessToken for more information.
appOwnsData	The type of authenticated user that will be accessing the tile. Defaults to false. See accessToken for more information.
groupId	The group or workspace id containing the dashboard tile. See dashboardId for details.
dashboardId	The dashboard id containing the tile. See dashboardId for details.
tileTitle	The title of the tile on the dashboard. See tileTitle for details.
filters	The fields that will be used as filters for the tile. See Filters for details.

accessToken

An access token must be created in order make calls into Power BI from custom applications. Visit Access Tokens for details on creating an access token. Once the access token has been created, configure the component to use the token using the accessToken configuration property.

When using the embed for your organization solution (also known as user owns the data), the access token can be used directly to access the dashboard tile in Power BI. The appOwnsData property tells the component which type of embed solution it should use. Since this property defaults to false, there is no need to set this when using the embed for your organization solution.

When using embed for your customers (also knowns as app owns the data), set the appOwnsData property to true. This forces the component to create an embed token from the access token. The embed token is then used internally to access the dashboard tile.

For more on these tokens, visit Access Tokens.

dashboardId

The groupIdand dashboardIdproperties of a tile can easily been seen in the URL to a dashboard page in Power BI. This URL syntax along with an example can be seen below.

https://app.powerbi.com/groups/{groupId}/dashboards/{dashboardId}

https://app.powerbi.com/groups/efb178c2-31ec-4753-b4a6-98bbdf6d6300/dashboards/31f7bc8a-4a63-4ddb-86fb-84ced3ac8836

The following example binds the WireBootstrap Qlik Component to the sheet in the example above using plain JavaScript by setting the component's appid and sheet properties. It also sets the rootURL to the service location of the Qlik instance.

new wire.pbiTile().render("#tile", {         
    groupId: "efb178c2-31ec-4753-b4a6-98bbdf6d6300",
    dashboardId: "31f7bc8a-4a63-4ddb-86fb-84ced3ac8836"
    ...
});

tileTitle

Specify the dashboard tile to use in the component using its title. A tile's title is at the top of the tile on a Power BI dashboard as seen in the picture below.

Dashboard Tile Titles

The title can be edited in Power BI by editing the tile details and changing the Title property.

Edit a Tile Title

Once the tile's title is located, use the tileTitle configuration property to render the tile using the WireBootstrap component.

new wire.pbiTile().render("#tile", {         
    tileTitle: "Opportunity Size"
    ...
});

Filters

Power BI field filters allow data in embed dashboard tiles to be filtered by selections made inside other components on a custom page.

Use the filters property to configure the fields to be used as filters in the visualization. This property contain an array of filter objects.

Set the field property on a filter to the name of a data field in Power BI to be used as the filter.

new wire.pbiTile().render("#tile", {    
    ... 
    filters: [
        { field: "Region" },
        { field: "Channel" }
    ]
});

This will set up WireBootstrap data event listeners that will watch for data changes initiated by users on a page and send those changes as filters to Power BI in order that the visualization be refreshed.

[pic]

Default Filter Values

In order to setup a default filter value, use the value property of a filter.

new wire.pbiTile().render("#tile", {    
    ... 
    filters: [
        { field: "Region", value: "Central" },
        { field: "Channel", value: "Catalog" }
    ]
});