Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
hi guys,
have a lot going on, hoping to get a quick sanity check on using page buttons to control power bi embedded
i have worked through the examples and i think this is right, but this is not an area of my expertise.
the power BI embedded works fine, what i want to know is how close / far am i from getting a print button to work based on the power bi javascript API ?
i cannot test it just yet as there are other build issues i'm resolving 🙂
@using Website.Features.Report.Requests @model Website.Features.Report.Requests.EmbeddableReport @{ var id = Guid.NewGuid().ToString("N"); } <div id="powerbibuttoncontrols" class="responsive-embed widescreen"> <input type="button" onclick="printPBI()" value="Print"/> </div> <div id="powerbi-@id" class="responsive-embed widescreen"></div> <script> var models = window['powerbi-client'].models; var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: '@Model.EmbedToken', embedUrl: '@Html.Raw(Model.EmbedUrl)', id: '@Model.Id', permissions: models.Permissions.Read, viewMode: models.ViewMode.View, pageView: 'fitToWidth', settings: { filterPaneEnabled: true, navContentPaneEnabled: true } }; powerbi.embed($('#powerbi-@id')[0], config); </script> <script type="text/javascript"> function printPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Trigger the print dialog for your browser. report.print() .catch(function (errors) { Log.log(errors); }); } </script>
her problems out of the way, i have print and full screen working;
the data and edit buttons are not yet functional;
@using Website.Features.Report.Requests @model Website.Features.Report.Requests.EmbeddableReport @{ var id = Guid.NewGuid().ToString("N"); } <div id="powerbi-js-buttons"> <input type="button" onclick="printPBI()" value="Print" /> | <input type="button" onclick="fullscreenPBI()" value="Full Screen" /> | <input type="button" onclick="clearFiltersPBI()" value="Clear Filters" /> | <input type="button" onclick="exportSummaryPBI()" value="Data Summary Data" /> | <input type="button" onclick="exportDataPBI()" value="Export Full Data" /> | <input type="button" onclick="editPBI()" value="Edit Mode" /> | <input type="button" onclick="viewPBI()" value="View Mode" /> </div> <div id="powerbi-@id" class="responsive-embed widescreen"></div> <script> var models = window['powerbi-client'].models; var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: '@Model.EmbedToken', embedUrl: '@Html.Raw(Model.EmbedUrl)', id: '@Model.Id', permissions: models.Permissions.Read, viewMode: models.ViewMode.View, pageView: 'fitToWidth', settings: { filterPaneEnabled: true, navContentPaneEnabled: true } }; powerbi.embed($('#powerbi-@id')[0], config); </script> <script type="text/javascript"> function printPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Trigger the print dialog for your browser. report.print() .catch(function (errors) { Log.log(errors); }); } function fullscreenPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Displays the report in full screen mode. report.fullscreen(); } function clearFiltersPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Retrieve the page collection and remove the filters for the first page. report.getPages() .then(function (pages) { // Retrieve active page. var activePage = pages.filter(function (page) { return page.isActive })[0]; activePage.removeFilters() .then(function () { Log.logText("Page filters were removed."); }) .catch(function (errors) { Log.log(errors); }); }) .catch(function (errors) { Log.log(errors); }); } function exportSummaryPBI() { // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Retrieve the page collection and get the visuals for the first page. report.getPages() .then(function (pages) { // Retrieve active page. var activePage = pages.filter(function (page) { return page.isActive })[0]; activePage.getVisuals() .then(function (visuals) { // Retrieve the wanted visual. var visual = visuals.filter(function (visual) { return visual.name == "VisualContainer4"; })[0]; // Exports visual data visual.exportData(models.ExportDataType.Summarized) .then(function (result) { Log.logCsv(result.data); }) .catch(function (errors) { Log.log(errors); }); }) .catch(function (errors) { Log.log(errors); }); }) .catch(function (errors) { Log.log(errors); }); } function exportDataPBI() { // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Retrieve the page collection and get the visuals for the first page. report.getPages() .then(function (pages) { // Retrieve active page. var activePage = pages.filter(function (page) { return page.isActive })[0]; activePage.getVisuals() .then(function (visuals) { // Retrieve the wanted visual. var visual = visuals.filter(function (visual) { return visual.name == "VisualContainer4"; })[0]; // Exports visual data visual.exportData(models.ExportDataType.Underlying) .then(function (result) { Log.logCsv(result.data); }) .catch(function (errors) { Log.log(errors); }); }) .catch(function (errors) { Log.log(errors); }); }) .catch(function (errors) { Log.log(errors); }); } function editPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Switch to edit mode. report.switchMode("edit"); } function viewPBI(){ // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Switch to view mode. report.switchMode("view"); } </script>
so this is where i'm up to, the export functions are not yet working, i think this is due to an old version of the power bi API.
i'm trying to get the app to do a 'save as' when you click on export.
i have commented out the button for the time being
@using Website.Features.Report.Requests @model Website.Features.Report.Requests.EmbeddableReport @{ var id = Guid.NewGuid().ToString("N"); } <div id="powerbi-js-buttons"> <input type="button" class="button" onclick="printPBI()" value="Print" /> | <input type="button" class="button" onclick="fullscreenPBI()" value="Full Screen" /> <!--| <input type="button" onclick="exportSummaryPBI()" value="Data Summary Data" /> | <input type="button" class="button" onclick="exportDataPBI()" value="Export Full Data" /> | <input type="button" class="button" onclick="editPBI()" value="Edit Mode" /> | <input type="button" class="button" onclick="viewPBI()" value="View Mode" />--> </div> <div id="powerbi-@id" class="responsive-embed widescreen"></div> <script> var models = window['powerbi-client'].models; var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: '@Model.EmbedToken', embedUrl: '@Html.Raw(Model.EmbedUrl)', id: '@Model.Id', permissions: models.Permissions.Read, viewMode: models.ViewMode.View, pageView: 'fitToWidth', settings: { filterPaneEnabled: true, navContentPaneEnabled: true } }; powerbi.embed($('#powerbi-@id')[0], config); </script> <script type="text/javascript"> function printPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Trigger the print dialog for your browser. report.print() .catch(function (errors) { alert(errors); }); } function fullscreenPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Displays the report in full screen mode. report.fullscreen(); } function editPBI() { // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Switch to edit mode. report.switchMode("edit"); } function viewPBI(){ // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Switch to view mode. report.switchMode("view"); } function exportSummaryPBI() { // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Retrieve the page collection and get the visuals for the first page. report.getPages() .then(function (pages) { // Retrieve active page. var activePage = pages.filter(function (page) { return page.isActive })[0]; activePage.getVisuals() .then(function (visuals) { // Retrieve the wanted visual. var visual = visuals.filter(function (visual) { return visual.name == "VisualContainer4"; })[0]; // Exports visual data visual.exportData(models.ExportDataType.Summarized) .then(function (result) { exportCSV("qcPowerBISummary.csv",result.data); }) .catch(function (errors) { alert(errors); }); }) .catch(function (errors) { alert(errors); }); }) .catch(function (errors) { alert(errors); }); } function exportDataPBI() { // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; // Get a reference to the embedded report HTML element var embedContainer = $('#powerbi-@id')[0]; // Get a reference to the embedded report. report = powerbi.get(embedContainer); // Retrieve the page collection and get the visuals for the first page. report.getPages() .then(function (pages) { // Retrieve active page. var activePage = pages.filter(function (page) { return page.isActive })[0]; activePage.getVisuals() .then(function (visuals) { // Retrieve the wanted visual. var visual = visuals.filter(function (visual) { return visual.name == "VisualContainer4"; })[0]; // Exports visual data visual.exportData(models.ExportDataType.Underlying) .then(function (result) { exportCSV("qcPowerBIData.csv",result.data); }) .catch(function (errors) { alert(errors); }); }) .catch(function (errors) { alert(errors); }); }) .catch(function (errors) { alert(errors); }); } function exportCSV(filename, data) { var blob = new Blob([data], {type: 'text/csv'}); if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, filename); } else{ var elem = window.document.createElement('a'); elem.href = window.URL.createObjectURL(blob); elem.download = filename; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } </script>
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
13 | |
2 | |
2 | |
1 | |
1 |
User | Count |
---|---|
20 | |
3 | |
2 | |
2 | |
2 |