Update report component to get filterPaneEnabled and navContentPaneEn…

…abled settings from powerbi-settings attributes.

CHANGELOG.md

@@ -50,7 +50,7 @@
       
 - Embed url attribute changed from `powerbi-embed` to `powerbi-embed-url`
 - Component type is specified by attribute `powerbi-type`. Use `powerbi-type="report"` instead of applying the attribute `powerbi-report`
-- Configuration option attributes all start with prefix `powerbi-options-`. Example (`powerbi-options-filter`)
+- Configuration settings attributes all start with prefix `powerbi-settings-`.
 
 ## Changes
 

README.md

@@ -69,13 +69,21 @@ If your app is dynamically adding new embed components after page load you will
 
 # Embed configuration and other options
 
-All configuration and options will be provided as attributes prefixed with `powerbi-options-` on the containing html element.
+All configuration and settings will be provided as attributes prefixed with `powerbi-settings-` on the containing html element.
+
 
 1. **Filter Pane**
 
-	FilterPane is enabled by default but can be disabled by adding the attribute:
+	FilterPane is enabled/visible by default but can be disabled/hidden by adding the attribute:
+	```
+	<div ... powerbi-settings-filter-pane-enabled="false"></div>
+	```
+
+2. **Page Navigation**
+
+	Page navigation is enabled/visible by default but can be disabled/hidden by adding the attribute:
 	```
-	<div ... powerbi-options-filter-pane-enabled="false"`></div>
+	<div ... powerbi-settings-nav-content-pane-enabled="false"></div>
 	```
 
 ## Setting the size of embedded components

src/report.ts

@@ -3,14 +3,26 @@ import * as embed from './embed';
 import * as models from 'powerbi-models';
 import * as wpmp from 'window-post-message-proxy';
 import * as hpm from 'http-post-message';
+import * as utils from './util';
 
 export class Report extends embed.Embed {
     static allowedEvents = ["dataSelected", "filterAdded", "filterUpdated", "filterRemoved", "pageChanged", "error"];
     static reportIdAttribute = 'powerbi-report-id';
+    static filterPaneEnabledAttribute = 'powerbi-settings-filter-pane-enabled';
+    static navContentPaneEnabledAttribute = 'powerbi-settings-nav-content-pane-enabled';
+    static typeAttribute = 'powerbi-type';
     static type = "Report";
 
     constructor(service: service.Service, element: HTMLElement, config: embed.IEmbedConfiguration) {
-        super(service, element, config);
+        const filterPaneEnabled = (config.settings && config.settings.filterPaneEnabled) || !(element.getAttribute(Report.filterPaneEnabledAttribute) === "false");
+        const navContentPaneEnabled = (config.settings && config.settings.navContentPaneEnabled) || !(element.getAttribute(Report.navContentPaneEnabledAttribute) === "false");
+        const settings = utils.assign({
+            filterPaneEnabled,
+            navContentPaneEnabled
+        }, config.settings);
+        const configCopy = utils.assign({ settings }, config);
+
+        super(service, element, configCopy);
         Array.prototype.push.apply(this.allowedEvents, Report.allowedEvents);
     }
 

test/test.spec.ts

@@ -213,6 +213,34 @@ describe('service', function () {
       expect(report.config.uniqueId).toEqual(jasmine.any(String));
     });
 
+    it('should get filterPaneEnabled setting from attribute from config and then attribute', function () {
+      // Arrange
+      const testUniqueId = 'fakeUniqueId';
+      const embedUrl = `https://embedded.powerbi.com/appTokenReportEmbed`;
+      const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}" powerbi-type="report" powerbi-report-id="abc123" powerbi-settings-filter-pane-enabled="false"></div>`)
+        .appendTo('#powerbi-fixture');
+
+      // Act
+      const report = powerbi.embed($reportContainer[0]);
+
+      // Assert
+      expect(report.config.settings.filterPaneEnabled).toEqual(false);
+    });
+
+    it('should get navContentPaneEnabled setting from attribute from config and then attribute', function () {
+      // Arrange
+      const testUniqueId = 'fakeUniqueId';
+      const embedUrl = `https://embedded.powerbi.com/appTokenReportEmbed`;
+      const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}" powerbi-type="report" powerbi-report-id="abc123" powerbi-settings-nav-content-pane-enabled="false"></div>`)
+        .appendTo('#powerbi-fixture');
+
+      // Act
+      const report = powerbi.embed($reportContainer[0]);
+
+      // Assert
+      expect(report.config.settings.navContentPaneEnabled).toEqual(false);
+    });
+
     it('if component is already embedded in element re-use the existing component by calling load with the new information', function () {
       // Arrange
       const $element = $('<div powerbi-embed-url="https://app.powerbi.com/reportEmbed?reportId=ABC123" powerbi-type="report"></div>')