Forum Discussion
qc-technology
7 years agoRegular Visitor
sanity check --> while i work on other problems
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 ...
qc-technology
7 years agoRegular Visitor
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>- qc-technology7 years agoRegular Visitor
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>