Embeded Report - How to show visual filter in default after loading report

[giangn]

Hello guys,

I have embeded report with single visual (a table).
I need to show visual filter after loading report without any end-user click to visual. By default, the panel is blank because we don't set any Page/Report Level Filter.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>

<div id="reportContainer"></div>

<script>
  window.onload = function () {
    var models = window['powerbi-client'].models;
    var embedConfiguration = {
      type: 'report',
      tokenType: models.TokenType.Embed,
      accessToken: XXX,
      embedUrl: 'https://app.powerbi.com/reportEmbed',
      id: 'XXX',
      permissions: models.Permissions.All,
      settings: {
        filterPaneEnabled: true,
        navContentPaneEnabled: false,
        layoutType: models.LayoutType.Custom,
        customLayout: {
          displayOption: models.DisplayOption.FitToWidth
        }
      }
    };
    var $reportContainer = $('#reportContainer');
    var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
  }
  
</script>

Please help me.

[v-jiascu-msft]

Hi @giangn,

Please refer to the live demo. You will find the way to get filters. You also can download the source code from here.

// Build the filter you want to use. For more information, See Constructing
// Filters in https://github.com/Microsoft/PowerBI-JavaScript/wiki/Filters.
const filter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Store",
    column: "Chain"
  },
  operator: "In",
  values: ["Fashions Direct"]
};

// Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[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.find(function(page) {
      return page.isActive
    });

    activePage.getVisuals()
      .then(function (visuals) {

        // Retrieve the wanted visual.
        var visual = visuals.find(function(visual) {
          return visual.name == "VisualContainer3";
        });

        // Set the filter for the visual.
        // Pay attention that setFilters receives an array.
        visual.setFilters([filter])
            .catch(function (errors) {
                Log.log(errors);
            });
        })
        .catch(function (errors) {
            Log.log(errors);
        });
  })
  .catch(function (errors) {
      Log.log(errors);
  });

Best Regards,

Dale

[giangn]

Hi @v-jiascu-msft,

I can setfilter for visual but i mean i want to show report with Visual Filter panel when loaded report.

What default embed show:

 https://imgur.com/a/dsG7EDO

What i need after load report:

https://imgur.com/NiFGR1P

Currently end-user maybe don't know click to visual to show filter, they only see filter is blank when completed load report, That's bad for end-user experience.

Please help me a solution for that.