Forum Discussion

qc-technology's avatar
qc-technology
Regular Visitor
7 years ago

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 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>
Need Help

2 Replies

  • qc-technology's avatar
    qc-technology
    Regular Visitor
    7 years ago

    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-technology's avatar
      qc-technology
      Regular Visitor
      7 years ago

      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>