Forum Discussion
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 ...
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>