Skip to content

Commit 8db7735

Browse files
committed
fixes
1 parent f66369f commit 8db7735

File tree

1 file changed

+20
-52
lines changed

1 file changed

+20
-52
lines changed

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

Lines changed: 20 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,16 @@ author: neerajnandwana-msft
55
ms.service: powerapps
66
ms.topic: conceptual
77
ms.custom:
8-
ms.date: 08/21/2020
8+
ms.date: 09/01/2020
99
ms.author: nenandw
1010
ms.reviewer: tapanm
1111
---
1212

1313
# Add a Power BI report or dashboard to a web page in portal
1414

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. You can add the tag in the **Copy** field on a web page or in the **Source** field on a web template. If you're 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.
1618

1719
> [!TIP]
1820
> 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).
@@ -55,9 +57,9 @@ For example:
5557

5658
## How to use powerbi-client JavaScript library in portals
5759

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.
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).
5961

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.
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.
6163

6264
```javascript
6365
$(function(){
@@ -113,26 +115,23 @@ var report = powerbi.get(embedContainer);
113115

114116
### Work with Power BI panes
115117

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
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.
123119

124-
To hide the Filters pane using above JavaScript sample, use the following format.
120+
Below is the sample to remove filters pane:
125121

126122
```javascript
127123
report.updateSettings({
128124
panes: {
129125
filters :{
130126
visible: false
131-
},
127+
}
132128
}
129+
}).catch(function (errors) {
130+
console.log(errors);
131+
});
133132
```
134133

135-
Similarly, if you want to work with page navigation in addition to filters:
134+
Sample to work with both page navigation, and filters:
136135

137136
```javascript
138137
report.updateSettings({
@@ -144,56 +143,25 @@ report.updateSettings({
144143
visible: false
145144
}
146145
}
146+
}).catch(function (errors) {
147+
console.log(errors);
148+
});
147149
```
148150

149151
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)
150152

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.
154-
155-
```html
156-
<div id="hide-powerbi-filters">
157-
{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/00000000-0000-0000-0000-000000000000/reports/00000000-0000-0000-0000-000000000000/" %}
158-
</div>
159-
<script>
160-
$(function() {
161-
$('#hide-powerbi-filters.powerbi').attr("powerbi-settings-filter-pane-enabled", "false");
162-
})
163-
</script>
164-
```
165-
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-
181153
### Handle events
182154

183155
The embedded component can emit events upon invoking a completion of an executed command. For example, `dataSelected`.
184156

185-
To turn an existing event listener off:
186-
187157
```javascript
158+
//Report.off removes a given event listener if it exists
159+
report.off("dataSelected");
160+
//Report.on will add an event list
188161
report.on('dataSelected', function(event){
189162
console.log('Event - dataSelected:');
190163
console.log(event.detail);
191-
```
192-
193-
To turn an event listener on:
194-
195-
```javascript
196-
report.off("dataSelected");
164+
})
197165
```
198166

199167
More information: [Handling events](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events)

0 commit comments

Comments
 (0)