PBI Embed: A Few Basic Questions

[sjungels]

Hi, 

I have some basic questions I need some help with:

1) if I simply include the following JS, I can use all of PBI functionality, i.e. I do not need to download the sources via nuget or npm, etc, correct? 

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>

2) I'd like to display a report with a default filter. All examples I am finding is to set the report filter afterwards. Can't I simply add a filter to the Embed Configuration?

3) When using the filters, do they need to be pre-defined as report / page filters or can I just pass anything?

Thanks!

[TedPattison]

You can reference the JavaScript library files from a CDN. That works fine. However, I wiould not use the links below because they point to a sample site.

Instead, use these:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script src="https://github.com/Microsoft/PowerBI-JavaScript/raw/master/dist/powerbi.js" ></script>x

 With filter, you can set any filter you want as long as you know the table name and column name to filter.

To set the filter before the report is displayed, you must use phased loading. Note that you should use powerbi.load instead of powerbi.embed to load the report without displaying it. Then when the load event fires you can set a report filter and then call report.render(config) to display the report after you set your filter.

// data required for embedding Power BI report
var embedReportId = "5dc619ea-d9ab-40cf-8a31-f1e0c480e520";
var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=5dc619ea-d9ab-40cf-8a31-f1e0c480e520&groupId=54afb565-3935-47e1-9a89-67e48a78ca45&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVVTLUVBU1QyLXJlZGlyZWN0LmFuYWx5c2lzLndpbmRvd3MubmV0In0%3d";
var accessToken = "H4sIAAAAAAAEAC2Wx66E7HJF3-WftiVysnQH8JEzNHlGDk3OcOV397mW5zUo7V1aq_79j50-_ZQW__z3P4Q9t7lvXHyVuL6cvX0lJG7wDmgXbVdHS5O__HhrFOH6CvOX_d4CXgxqwKl33oYq3ZbEmL-XFmq73OtWKYMha51YD8rFamQGhkX3uLAu3YcAvf3C9EgcsaCxSEuheG5tVdr5tEc5Fyyr3Pp7cjv3La6sKoPyNB-rIIldkeQBRw0sPSqR1K0XRdVUZvlwJNz1cULuuVZX86Z6RmmGzyn0wU4dmtITu-_C0ECXTr8t7jFBmsiTgbkXyx2pw1LjaOEBzAXRllM4rqPHty0nFv1iUWcvuWdpC9cvjyo4M1cO5XKbqiZcrIBq69jacKPHVasdzii8KiGppwFuMhtMbboY_jpn5faKIz9EBfCLAO6DwRkE5hvR8BSTiDrggh_pYY1uzyqzkcFKLYp_ttPHem44YxypaRXRRcRn7XtFKFPNcIEN02_BZu5usDrnp5TmFoq1YE16jj_IUAX7ygEFh-LO5vvBfL1nLhW_12UEV31VhVDu84N9JTjLuTyj9bzK4dx79ncv73BukJG8bc-bwFbs5Q6qWPqEdms6sclgd3kUEm2hNHslzxwmGfoKTE28hvE1oPGOvRIXtCfMYAfKi3W7UGr7trP-QmhY8WJDtcRI92Mj_mTc9x4BdYu3zQ2qqYtStD9K-MltVqPdcM5d1LqGXa0m_gy_2c8dqaUX0Ze-ULgM-qaQUM6-GmX3V3HFNvi7wGOw_nSutj0glgCVHcyRFEU-EjR3aqWpPzuHGS93CdaMO90kJdl3mLN4lyboUXxrloHs_lpIoog2OpwG2OHNzW_HOzDELEi_sZ_LxEaWZusvYFdZubKPMCcS9yTNkEndg6AoUc5PPH3ijivn_hKaUS3rxZjfr08s0LludmjjJ9IKGcFrG5eMZDY3HkcwZ9uMTkeoENCjkoByUXULwoTyd_OsmzN5qtljuAQ0ziSA9PeM_C712ON8NjhJHs9Wf5mdSPeONalmtMhSF6T4HMgSSe-28HJa1nw5pxwqwzCpruIa32xxJGWMPVPc1Ts28510MS6Sycgi_jwmX6Mz4B7cSRM9fzIu-wTrjKphqt5bSAXReyv7K20HGrsNfwCEgo2BqhvNlxfJR6qpJCrPbxmATbSt-OgopoJd-I1GY-0fJ3RI1ZGU5MUpkRyqM7Es4D_olqMS9jxWtCwV2CE4XUgyvG_sW6R9HD5B91ffGMd7xjtX6tKp92t0w5u9et2YcupwrgPkxo2LQF8XgRJ90YNr7-Km-ql5GWGaYgYzfvTLTq47mvV-vINgY4wgR-B1avVcDUATAOYhBm031yuSIvlkIA9nSHK-NVIngQIvFlr8PpDt1ls2o0wUtXwnXsPs4NfidcRbeLiDcG3k36bz8akeRHhoTB-ow70O8E4eS491MWCaSa-AX-qbFMzSKIV9j-2p-8RWAU-bDvfdjo171IT3ZfaXFle9i2amfhR7wJZXDxE6JJMgFT3sPsnh9QAWtQ3Kk-04dTTWNFKslf2dSkPtfMlge-RNC3cacfZxcS61zBKneYme3rIo93tjUXF2YmbveM1DuptD9hDqvH-KvdNgjAOW7HUucYXJuB_gnADtmD4n8MWNTXVIO4Fiy87AbflD5gmBvbUldmKt8RHi9LNiVU2pfkVFMSrP0fuePponDT-c_NCEkkxQyFXf7Oi4RE89Qo292o2bYQaIC6ywGhW7hioHU9jqZjeDkycTTVkbKJhyDpiRT-6JI-FYPw7U1Mtll8oSkB6KNFZghG1NuaSvN7NgL6BoGLfvitnJF8ImWS4sfIPZB3PXtO1xoqLO4vzOPZuk4bfoPyuy1OI1RlGXWPSm5GazTN4X3P-hudOkSTnpPxsro1b4c8cn_kJOsF2bcEKRVNdxLRgFJJbGzGNJ0d7pJCx_C6JRvd3FT0fJeYkVH2n2P4-Yw4_u5Bi6C14-7aTduByF-C0-jXU3HLah8k1w036z7QYEeXYj6nhm4WBG5gZ3vufTbhRZV76ktMf9jF0DWr-YkRDw3WTTWVtlo47-wtWkribK2HrWN77-rThlx6scQddTGnHZiGvGUiVm-jgaCMJrSUvQf0odxGk4G7pZFEV3thoVPZlXxSvRwb8w8QEIXkxWi2E6ZG58C8uCykZi51M63NMvhcoQbD1rAHlUruwHSzxyEaRBD8mPHciYtUy7pVn4PtxaS9Ta82NC374Rqyc457R7aVqQhPjPQiQJBRkP0ORW2hSDK9kE9EK0RDBLq-h8pWyMKKEMYxssaQXVwPxKFYKLDULWu9467s6yA_nO1lSRYjSgOn_Pc3RWbIx_E5ClsyN_PkdkeCdsEfr14Mf9iGYlOEKLXiQSYyZmBvW__vXPf_0D1mfeJ618_t6kzCoeE9Yjo_wKkyCKG6q24Kr81utxcMPleL1HoeIGVQ06qnhwo4Pdv6Y_GUIapxlTS6XVLLR6dFKLm5ofCoWu2YnccUh55s9qmQatuiJw37LiGIpfkL8IPyJRcsh0y3-Quxy3bkSlg8agexlp5tD6j7xxPCn19KO_qJg82RcAd1wg2pMUyGPrXB239e9GaLuON_VsGrhjmGR83qtchV3xPUkylg7mAKs4o9ydg1DebvozKz9sOy9k2VVlP197YCggc1ESzTsSQK3X3Q5j-8Zv2ia9UNYtppLbPaGfao4c0cSpKkxTVgqoA-zJy_7KRKUdk6gOGcAR3InBvCsyyB1RePr_x_zMTbkqwV_K-itGdXh5YYajVKyzyw8btOv_pr5tPab7sZZ_Y4lsbAcS8C1ZwfVwh6OFyfQkqOdGt7dtTrJxhLq4Qe2fXlsYqsT0k4hNONWUkULCcGFJ-BFNO6rlacw3jDKfe7wX-p5Lsu6RG9jjW-HJF5mJDPpMfb0temtUiQkDozXOKXZjpb124iE8gqIakTK1EQ0OmoRZSlq-H6_ieZc9-yEy8EU_qd8SolPAML2avexykqfWhNKdZMVQBTrOQTr23N_3x8QDLGn3tk7viitiSA8fL6j3z0ey3AatUPckTV89c53v5owKNWQ9D91R0e-WYEqHC_eUTgyrH8ze6HBr8zusYVFnQ2ey2Lyk7NCobL-Dojt1v265egBTLx7pogWgjWGK_xPz__wvlOIwVhoMAAA=";

// Get models object to access enums for embed configuration
var models = window['powerbi-client'].models;

var config = {
  type: 'report',
  id: embedReportId,
  embedUrl: embedUrl,
  accessToken: accessToken,
  tokenType: models.TokenType.Embed,
};

// Get a reference to the embedded report HTML element
var reportContainer = document.getElementById('embedContainer');

// call load() instead of embed() to load the report while delaying the rendering process
var report = powerbi.load(embedContainer, config);

// when loaded event occurs, set current page then call render()
report.on("loaded", function () {

  const basicStateFilter = {
    $schema: "http://powerbi.com/product/schema#basic",
    target: { table: "Customers", column: "State" },
    operator: "In",
    values: ["FL", "GA", "TX"]
  }

  report.setFilters([basicStateFilter]);
  // display the report
  report.render(config);

});

[sjungels]

Thanks, Ed, for your answer. 

When  I include the github link, I still get an error:

>> Refused to execute script from 'https://raw.githubusercontent.com/Microsoft/PowerBI-JavaScript/master/dist/powerbi.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

When I use my old include, I get this:

 

Thanks!