Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

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.

Reply
qc-technology
Regular 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 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>
2 REPLIES 2
qc-technology
Regular 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>

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>

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.