Customize Embed Content in Power BI

1. Customize Embed Content in Power BI

2. Using Power BI JavaScript API, we can a embed report in an application that can be consumed by our clients. Using the configuration object, we store our report details, and when we have to embed our report, we pass this object to the JavaScript API. However, giving the user only reading rights to the embedded reports will be normal and humdrum. Sure, the report consumers can interact with each visualization but the report box is specified, we cannot interact with the report as a whole. Hence to overcome it, Power BI JavaScript API provides developers to use configuration objects to customize the report’s appearance and behavior in the application. Furthermore, we can provide our users with some control in the application, such as printing reports, navigation access, editing reports, and many more.

3. Some of the most common and useful features that we can add to our applications are as follows: • Embedding Configuration details • Panes • We can change the appearance of panes and add selected panes in the embedded Power BI Report. The supported panes are visualization, fields, bookmarks, filters, navigation, selection, and sync slicers that can be added or removed as per the requirements. var embedConfig = { ... settings: { panes:{ bookmarks: { visible: true }, fields: { expanded: false }, filters: { expanded: false, visible: true },

4. page Navigation: { visible: false }, selection: { visible: true }, syncSlicers: { visible: true }, visualizations: { expanded: false } } }}; • If we want any of the panes enabled, we set the value as true or else set it as false if not needed. Further, we can even decide for the panes to be expanded or not. • Moreover, there are multiple ways that you can enable page Navigation and filter pane. For alternate way you can refer the documentation - https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details

5. Bars The action bar can be controlled with the bars object. var embedConfig = { ... settings: { bars:{ actionBar: { visible: true } } }};

6. Locale Settings • Locale setting is used for formatting the dashboard and defining the language. language defines the language that power BI uses for localization. Format Locale defines the text formatting that power BI uses for dates, currency etc. var embedConfig = { ... settings: { localeSettings: { language: "en", formatLocale: "es" } }};

7. Transparent Settings • By default, the report background is grey/white in color, but sometimes it does not goes with the application theme. So, we can set the background as transparent and the container div element will appear. So, this way we can customize the container div as required. let embedConfig = { ... settings: { background: models. Background Type. Transparent }};

8. Default Page By default, the embedding solution will load the active page during the last save. So, this can be overwritten by the specified report page. var embedConfig = { ... pageName: 'ReportSection3' };

9. Embedding basic interactions Assume that your report is embedded. So now to get your embed report in a variable, you can use the following JavaScript code for your embed div: var element = $(‘#report-container’)[0]; var report = powerbi.get(element);

10. Here, #report-container is the id of the HTML div element which contains the embedded report. Using the above code snippet, we can get the report which we will reference in the variable report. • With the help above retrieved variable report we can now print, reload, refresh our report and open it in full screen mode as well.

11. Print a report report.print(); Open in full-screen mode report.fullscreen(); Refresh a report report.refresh(); Reload a report report.reload(); This blog contains the a few of most common used embedding configurations. To explore more Power BI JavaScript API you can visit the official Microsoft documentation - https://github.com/Microsoft/powerbi-javascript/wiki

12. About Addend Analytics • Addend Analytics is a Microsoft Power BI partner based in Mumbai, India. Apart from being authorized for Power BI implementation, Addend has successfully executed Power BI projects for 100+ clients across sectors like financial services, banking, insurance, retail, sales, manufacturing, real estate, logistics, and healthcare in countries like the US, Europe, Australia, and India. Companies partnering with us save their valuable time and efforts of searching and managing resources while saving hugely on the development costs and hence, most small and medium enterprises in North America prefer Addend to their Power BI implementation partner. Get a free consultation now by emailing us at kamal.sharma@addendanalytis.com.