> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/powerbi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/powerbi/tile-component/configuration.md).

# Configuration

The WireBootstrap for Power BI Tile Component code uses [Power BI's client embed APIs](https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/) 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](#undefined) for more information.                   |
| appOwnsData   | The type of authenticated user that will be accessing the tile.  Defaults to `false`.  See [accessToken](#undefined) for more information. |
| groupId       | The group or workspace id containing the dashboard tile.  See [dashboardId](#appid-sheet) for details.                                     |
| dashboardId   | The dashboard id containing the tile.  See [dashboardId](#appid-sheet) for details.                                                        |
| tileTitle     | The title of the tile on the dashboard.  See [tileTitle](#undefined) for details.                                                          |
| filters       | The fields that will be used as filters for the tile.  See [Filters](#filters) for details.                                                |

## accessToken

An access token must be created in order make calls into Power BI from custom applications.  Visit [Access Tokens](/powerbi/access-tokens.md) 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](/powerbi/access-tokens.md).

### dashboardId

The `groupId`and `dashboardId`properties 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.

```javascript
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](https://3603789314-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVRCnHctU4Ce171IO9sfH%2Fuploads%2F4JFdVtLdetJGWDIHZ67Z%2Fimage.png?alt=media\&token=25012eca-6a97-4829-8ddb-8986c4424e7d)

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

![Edit a Tile Title](https://3603789314-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVRCnHctU4Ce171IO9sfH%2Fuploads%2Fwksej5jZOF3aKW5oaRkd%2Fimage.png?alt=media\&token=b119faf8-9cb3-4127-9c65-55ac1a593332)

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

```javascript
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. &#x20;

Set the `field` property on a filter to the name of a data field in Power BI to be used as the filter. &#x20;

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

This will set up WireBootstrap [data event listeners](https://docs.wirebootstrap.com/wirebootstrap/data-events/raising-events) 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. &#x20;

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