Skip to content

Commit f66369f

Browse files
tapanm-MSFTtapanm-MSFT
committed
updates
1 parent fba47c9 commit f66369f

File tree

1 file changed

+131
-4
lines changed

1 file changed

+131
-4
lines changed

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

Lines changed: 131 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,151 @@ For example:
5353
> [!div class=mx-imgBorder]
5454
> ![Power BI dashboard tile ID](../media/powerbi-dashboard-tile-id.png "Power BI dashboard tile ID")
5555

56-
## Hide the Filters pane in portals web page
56+
## How to use powerbi-client JavaScript library in portals
57+
58+
You can use [powerbi-client JavaScript library](https://github.com/microsoft/PowerBI-JavaScript#powerbi-client) while embedding Power BI reports or dashboards in portals. See [Power BI JavaScript wiki](https://github.com/Microsoft/PowerBI-JavaScript/wiki) for more details.
59+
60+
For example, here's a sample JavaScript that can be used to update the report settings, or to handle events. This sample disables filters pane, disables page navigation and enables *dateSelected* event.
61+
62+
```javascript
63+
$(function(){
64+
var embedContainer = $(".powerbi")[0];
65+
var report = powerbi.get(embedContainer);
66+
report.on("loaded", function(){
67+
report.updateSettings({
68+
panes: {
69+
filters :{
70+
visible: false
71+
},
72+
pageNavigation:{
73+
visible: false
74+
}
75+
}
76+
}).catch(function (errors) {
77+
console.log(errors);
78+
});
79+
})
80+
report.on('dataSelected', function(event){
81+
console.log('Event - dataSelected:');
82+
console.log(event.detail);
83+
})
84+
})
85+
```
86+
87+
To add custom JavaScript to a web page:
88+
89+
1. Open the [Portal Management](../configure/configure-portal.md) app.
90+
1. Select **Web Pages** from the left-pane.
91+
1. Select the web page that contains the Power BI report or dashboard.
92+
1. Select **Advanced** tab.
93+
1. Copy and paste the JavaScript inside the **Custom JavaScript** section.
94+
1. Select **Save & Close**.
95+
96+
Let's understand the sample JavaScript operations, and different options.
97+
98+
### Get a reference to the embedded report HTML
99+
100+
Get a reference to the embedded report HTML.
101+
102+
```javascript
103+
var embedContainer = $(".powerbi")[0];
104+
```
105+
106+
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)
107+
108+
### Get a reference to the embedded report
109+
110+
```javascript
111+
var report = powerbi.get(embedContainer);
112+
```
113+
114+
### Work with Power BI panes
115+
116+
You can use the *Panes* related settings 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.
117+
118+
Panes can be updated using JavaScript directly as shared in the [previous example](#how-to-use-powerbi-client-javascript-library-in-portals), or you can use HTML with the `<div>` tags.
119+
120+
The following samples show how to use both methods, using JavaScript directly, or through HTML.
121+
122+
#### Change panes using JavaScript
123+
124+
To hide the Filters pane using above JavaScript sample, use the following format.
125+
126+
```javascript
127+
report.updateSettings({
128+
panes: {
129+
filters :{
130+
visible: false
131+
},
132+
}
133+
```
134+
135+
Similarly, if you want to work with page navigation in addition to filters:
136+
137+
```javascript
138+
report.updateSettings({
139+
panes: {
140+
filters :{
141+
visible: false
142+
},
143+
pageNavigation:{
144+
visible: false
145+
}
146+
}
147+
```
57148
58-
Power BI allows you to [hide the Filters pane](https://docs.microsoft.com/power-bi/create-reports/power-bi-report-filter#hide-the-filters-pane-while-editing) allowing extra space on screen when Filters pane isn't needed. Similarly, you can hide the Filters pane for a dashboard or a report embedded on a web page in your portal. To hide, you can use the [Power BI JavaScript embed configuration](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details) attribute called `powerbi-settings-filter-pane-enabled` and set its value to `false`.
149+
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)
59150
60-
For example, use the following sample code in your web page's [copy (HTML)](../configure/web-page.md#web-page-attributes) attribute to hide Power BI Filters pane in portals.
151+
#### Change panes using HTML
152+
153+
You can also use the attribute called `powerbi-settings-filter-pane-enabled` and set its value to `false` to hide the Filters pane. You can add this sample code in a web page's [copy (HTML)](../configure/web-page.md#web-page-attributes) attribute.
61154
62155
```html
63156
<div id="hide-powerbi-filters">
64157
{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/00000000-0000-0000-0000-000000000000/reports/00000000-0000-0000-0000-000000000000/" %}
65158
</div>
66159
<script>
67160
$(function() {
68-
//Set the "powerbi-settings-filter-pane-enabled" setting to "false" to hide the Power BI Filters pane.
69161
$('#hide-powerbi-filters.powerbi').attr("powerbi-settings-filter-pane-enabled", "false");
70162
})
71163
</script>
72164
```
73165
166+
Similarly, to work with page navigation, change the `powerbi-settings-nav-content-pane-enabled` setting:
167+
168+
```html
169+
<div id="hide-powerbi-pagenav">
170+
{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/00000000-0000-0000-0000-000000000000/reports/00000000-0000-0000-0000-000000000000/" %}
171+
</div>
172+
<script>
173+
$(function() {
174+
$('#hide-powerbi-pagenav.powerbi').attr("powerbi-settings-nav-content-pane-enabled", "false");
175+
})
176+
</script>
177+
```
178+
179+
More information: [Embed configuration - Settings](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details#settings)
180+
181+
### Handle events
182+
183+
The embedded component can emit events upon invoking a completion of an executed command. For example, `dataSelected`.
184+
185+
To turn an existing event listener off:
186+
187+
```javascript
188+
report.on('dataSelected', function(event){
189+
console.log('Event - dataSelected:');
190+
console.log(event.detail);
191+
```
192+
193+
To turn an event listener on:
194+
195+
```javascript
196+
report.off("dataSelected");
197+
```
198+
199+
More information: [Handling events](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events)
200+
74201
### See also
75202
76203
- [Add a Power BI component to a webpage using the portals Studio](../compose-page.md#add-power-bi)

0 commit comments

Comments
 (0)