Powerbi embed settings in javascriptfile dosent work?

Question

Hope someone can help me. I have embedded a Power BI solution, and it work so fine, but when i try to hide the filter pane or apply a filter, it dosen't work. My javascript file is here:

$(function () {
var models = window["powerbi-client"].models;
var reportContainer = $("#report-container").get(0);

// Initialize iframe for embedding report
powerbi.bootstrap(reportContainer, { type: "report" });

$.ajax({
    type: "GET",
    url: "/embedinfo/getembedinfo",
    success: function (data) {
        embedData = $.parseJSON(data);
        reportLoadConfig = {
            type: "report",
            tokenType: models.TokenType.Embed,
            accessToken: embedData.EmbedToken.Token,
            // You can embed different reports as per your need
            embedUrl: embedData.EmbedReport[0].EmbedUrl,
            permissions: permissions,
            settings: {
                panes: {
                    filters: {
                        visible: false
                    },
                    pageNavigation: {
                        visible: false
                    }
                }
            }
            

            // Enable this setting to remove gray shoulders from embedded report
            // settings: {
            //     background: models.BackgroundType.Transparent
            // }
        };

and it looks still:

What's wrong with my code?

Answer 1

I find and use this, and it works:

// ---- Embed Code ----------------------------------------------------

$(function () {
  var models = window["powerbi-client"].models;
  var reportContainer = $("#report-container").get(0);

  // Initialize iframe for embedding report
  powerbi.bootstrap(reportContainer, { type: "report" });

  $.ajax({
    type: "GET",
    url: "/embedinfo/getembedinfo",
    success: function (data) {
      embedData = $.parseJSON(data);

      var models = window["powerbi-client"].models;

      // Read embed application token from textbox
      var txtAccessToken = embedData.EmbedToken.Token;

      // Read embed URL from textbox
      var txtEmbedUrl = embedData.EmbedReport[0].EmbedUrl;

      // Read embed type from radio
      var tokenType = models.TokenType.Embed;

      // Get models. models contains enums that can be used.
      var models = window["powerbi-client"].models;

      // We give All permissions to demonstrate switching between View and Edit mode and saving report.
      var permissions = models.Permissions.All;

      // Embed configuration used to describe the what and how to embed.
      // This object is used when calling powerbi.embed.
      // This also includes settings and options such as filters.
      // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.

      const myFilter = {
        $schema: "http://powerbi.com/product/schema#advanced",
        target: {
          table: "myTable",
          column: "myColumn",
        },
        operator: "In",
        values: ["1"],
      };

      var config = {
        type: "report",
        tokenType: tokenType,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        permissions: permissions,
        filters: [myFilter],
        settings: {
          panes: {
            filters: {
              visible: true,
            },
            pageNavigation: {
              visible: true,
            },
          },
        },
      };

      // Get a reference to the embedded report HTML element
      var reportContainer = $("#report-container").get(0);

      // Embed the report and display it within the div container.
      var report = powerbi.embed(reportContainer, config);

      // Report.off removes a given event handler if it exists.
      report.off("loaded");

      // Report.on will add an event handler which prints to Log window.
      report.on("loaded", function () {
        Log.logText("Loaded");
      });

      // Report.off removes a given event handler if it exists.
      report.off("rendered");

      // Report.on will add an event handler which prints to Log window.
      report.on("rendered", function () {
        Log.logText("Rendered");
      });

      report.on("error", function (event) {
        Log.log(event.detail);

        report.off("error");
      });

      report.off("saved");
      report.on("saved", function (event) {
        Log.log(event.detail);
        if (event.detail.saveAs) {
          Log.logText(
            "In order to interact with the new report, create a new token and load the new report"
          );
        }
      });
    },
  });
});