Skip to content

Commit 6328cb0

Browse files
tapanm-MSFTtapanm-MSFT
authored
Merge pull request #3284 from MicrosoftDocs/portals-1988990
Portals Power BI ICMs 193147361 / 190709805 fix - 1988990
2 parents d51ed8d + 26ac3b2 commit 6328cb0

File tree

1 file changed

+114
-3
lines changed

1 file changed

+114
-3
lines changed

‎powerapps-docs/maker/portals/admin/add-powerbi-report.md

Lines changed: 114 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ author: neerajnandwana-msft
55
ms.service: powerapps
66
ms.topic: conceptual
77
ms.custom:
8-
ms.date: 05/13/2019
8+
ms.date: 09/03/2020
99
ms.author: nenandw
1010
ms.reviewer: tapanm
1111
---
1212

13-
1413
# Add a Power BI report or dashboard to a web page in portal
1514

16-
You can add a Power BI report or dashboard to a web page in portal by using the [powerbi](../liquid/portals-entity-tags.md#powerbi) Liquid tag. You can add the tag in the **Copy** field on a web page or in the **Source** field on a web template. If you adding a Power BI report or dashboard created in the new workspace in Power BI, you must specify the authentication type as **powerbiembedded** in the *powerbi* Liquid tag.
15+
You can add a Power BI report or dashboard to a web page in portal by using the [powerbi](../liquid/portals-entity-tags.md#powerbi) Liquid tag. Use the `powerbi` tag in the **Copy** field on a web page or in the **Source** field on a web template.
16+
17+
If adding a Power BI report or dashboard created in the new workspace in Power BI, you must specify the authentication type as **powerbiembedded** in the *powerbi* Liquid tag.
1718

1819
> [!TIP]
1920
> This article explains how to add a Power BI report or dashboard using *powerbi* liquid tag. To add **Power BI component** on a webpage in your portal using the portals Studio, go to [Add a Power BI component to a webpage using the portals Studio](../compose-page.md#add-power-bi).
@@ -54,6 +55,116 @@ For example:
5455
> [!div class=mx-imgBorder]
5556
> ![Power BI dashboard tile ID](../media/powerbi-dashboard-tile-id.png "Power BI dashboard tile ID")
5657

58+
## How to use powerbi-client JavaScript library in portals
59+
60+
You can use [powerbi-client JavaScript library](https://github.com/microsoft/PowerBI-JavaScript#powerbi-client) while embedding Power BI reports or dashboards in portals. For more information about powerbi-client JavaScript library, see [Power BI JavaScript wiki](https://github.com/Microsoft/PowerBI-JavaScript/wiki).
61+
62+
Below is a sample JavaScript to update the report settings, or to handle events. This sample disables filters pane, disables page navigation, and enables *dataSelected* event.
63+
64+
```javascript
65+
$(function(){
66+
var embedContainer = $(".powerbi")[0];
67+
var report = powerbi.get(embedContainer);
68+
report.on("loaded", function(){
69+
report.updateSettings({
70+
panes: {
71+
filters :{
72+
visible: false
73+
},
74+
pageNavigation:{
75+
visible: false
76+
}
77+
}
78+
}).catch(function (errors) {
79+
console.log(errors);
80+
});
81+
})
82+
report.on('dataSelected', function(event){
83+
console.log('Event - dataSelected:');
84+
console.log(event.detail);
85+
})
86+
})
87+
```
88+
89+
To add custom JavaScript to a web page:
90+
91+
1. Open the [Portal Management](../configure/configure-portal.md) app.
92+
1. Select **Web Pages** from the left-pane.
93+
1. Select the web page that contains the Power BI report or dashboard.
94+
1. Select **Advanced** tab.
95+
1. Copy and paste the JavaScript inside the **Custom JavaScript** section.
96+
1. Select **Save & Close**.
97+
98+
Let's understand the sample JavaScript operations, and different options.
99+
100+
### Get a reference to the embedded report HTML
101+
102+
Get a reference to the embedded report HTML.
103+
104+
```javascript
105+
var embedContainer = $(".powerbi")[0];
106+
```
107+
108+
More information: [Get a reference to an existing Power BI component given the containing element](https://github.com/microsoft/PowerBI-JavaScript/wiki/Service-Details#get-a-reference-to-an-existing-power-bi-component-given-the-containing-element)
109+
110+
### Get a reference to the embedded report
111+
112+
```javascript
113+
var report = powerbi.get(embedContainer);
114+
```
115+
116+
### Work with Power BI panes
117+
118+
You can use the settings for panes to work with Power BI panes on a portals web page. For example, you can use the filters setting to hide or show the pane. Or, use the paging with page navigation setting.
119+
120+
Below is the sample to remove filters pane:
121+
122+
```javascript
123+
report.updateSettings({
124+
panes: {
125+
filters :{
126+
visible: false
127+
}
128+
}
129+
}).catch(function (errors) {
130+
console.log(errors);
131+
});
132+
```
133+
134+
Sample to work with both page navigation, and filters:
135+
136+
```javascript
137+
report.updateSettings({
138+
panes: {
139+
filters :{
140+
visible: false
141+
},
142+
pageNavigation:{
143+
visible: false
144+
}
145+
}
146+
}).catch(function (errors) {
147+
console.log(errors);
148+
});
149+
```
150+
151+
More information: [Update settings](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Update-Settings) and [Embed configuration - Settings](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details#settings)
152+
153+
### Handle events
154+
155+
The embedded component can emit events upon invoking a completion of an executed command. For example, below is a sample for `dataSelected` event.
156+
157+
```javascript
158+
//Report.off removes a given event listener if it exists
159+
report.off("dataSelected");
160+
//Report.on will add an event list
161+
report.on('dataSelected', function(event){
162+
console.log('Event - dataSelected:');
163+
console.log(event.detail);
164+
})
165+
```
166+
167+
More information: [Handling events](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events)
57168

58169
### See also
59170

0 commit comments

Comments
 (0)