diff --git a/CHANGELOG.md b/CHANGELOG.md index 23024590..9e5bfa50 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index ba81ccf8..2cc21742 100644 --- a/README.md +++ b/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: + ``` +
+ ``` + +2. **Page Navigation** + + Page navigation is enabled/visible by default but can be disabled/hidden by adding the attribute: ``` -
+
``` ## Setting the size of embedded components diff --git a/src/report.ts b/src/report.ts index 3c7cc33e..cd12a0f1 100644 --- a/src/report.ts +++ b/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); } diff --git a/test/test.spec.ts b/test/test.spec.ts index 17ba88b0..c2c2527f 100644 --- a/test/test.spec.ts +++ b/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 = $(`
`) + .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 = $(`
`) + .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 = $('
')