Forum Discussion

Anonymous

Not applicable

9 years ago

Solved

Embedded Report add filter to EmbedConfig

Hey guys, so I am have a fully functioning embedded sample working but I am trying to make a small modification to the way the filter is applied in the JS.

Currently my code configures and embeds the report and then applies the filter after the fact. I would like to add the filter to the config directly rather than applying it after the fact. For example, here is my currently working code that applies a filter:

    const filter = {
        $schema: "http://powerbi.com/product/schema#advanced",
        target: {
            table: "table name",
            column: "column1"
        },
        operator: "In",
        values: ["SomefilterValue"]
    };

 var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.Read,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
        }
    };

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#reportContainer')[0];

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

//Add filter to the report
    report.on('loaded', event => {
        report.getFilters()
          .then(filters => {
              filters.push(filter);
              return report.setFilters(filters);
          });
    });

I saw on Embed configuration details that it's possible to add the filter directly to the embed configs. I altered the embed configuration settings to include a filter and then removed the bolded report.on portion from the above code and now the filter is not being applied.

    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.Read,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false,
            filter: [filter]
        }
    };

Any ideas on how to properly add this filter in the settings of the config?

Need Help

Eric_Zhang

9 years ago

Anonymous wrote:

Hey guys, so I am have a fully functioning embedded sample working but I am trying to make a small modification to the way the filter is applied in the JS.

Currently my code configures and embeds the report and then applies the filter after the fact. I would like to add the filter to the config directly rather than applying it after the fact. For example, here is my currently working code that applies a filter:
    const filter = {
        $schema: "http://powerbi.com/product/schema#advanced",
        target: {
            table: "table name",
            column: "column1"
        },
        operator: "In",
        values: ["SomefilterValue"]
    };

 var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.Read,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
        }
    };

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#reportContainer')[0];

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

//Add filter to the report
    report.on('loaded', event => {
        report.getFilters()
          .then(filters => {
              filters.push(filter);
              return report.setFilters(filters);
          });
    });
I saw on Embed configuration details that it's possible to add the filter directly to the embed configs. I altered the embed configuration settings to include a filter and then removed the bolded report.on portion from the above code and now the filter is not being applied.
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.Read,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false,
            filter: [filter]
        }
    };
Any ideas on how to properly add this filter in the settings of the config?

Anonymous

Based on my test, it definitely works this way.

    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.Read,
        filters: [filter1,filter2], //filter array here
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
           
        }
    };

7 Replies

Eric_Zhang
Microsoft Employee
9 years ago
Anonymous wrote:

Hey guys, so I am have a fully functioning embedded sample working but I am trying to make a small modification to the way the filter is applied in the JS.

Currently my code configures and embeds the report and then applies the filter after the fact. I would like to add the filter to the config directly rather than applying it after the fact. For example, here is my currently working code that applies a filter:

const filter = { $schema: "http://powerbi.com/product/schema#advanced", target: { table: "table name", column: "column1" }, operator: "In", values: ["SomefilterValue"] }; var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: accessToken, embedUrl: embedUrl, id: embedReportId, permissions: models.Permissions.Read, settings: { filterPaneEnabled: true, navContentPaneEnabled: false } }; // Get a reference to the embedded report HTML element var reportContainer = $('#reportContainer')[0]; // Embed the report and display it within the div container. var report = powerbi.embed(reportContainer, config);
//Add filter to the report report.on('loaded', event => { report.getFilters() .then(filters => { filters.push(filter); return report.setFilters(filters); }); });

I saw on Embed configuration details that it's possible to add the filter directly to the embed configs. I altered the embed configuration settings to include a filter and then removed the bolded report.on portion from the above code and now the filter is not being applied.

var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: accessToken, embedUrl: embedUrl, id: embedReportId, permissions: models.Permissions.Read, settings: { filterPaneEnabled: true, navContentPaneEnabled: false, filter: [filter] } };

Any ideas on how to properly add this filter in the settings of the config?

Anonymous

Based on my test, it definitely works this way.

var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: accessToken, embedUrl: embedUrl, id: embedReportId, permissions: models.Permissions.Read, filters: [filter1,filter2], //filter array here settings: { filterPaneEnabled: true, navContentPaneEnabled: false } };
- Anonymous
  Not applicable
  9 years ago
  You are correct thanks! I went back and read the documentation again and saw the filters was not a part of the settings. I don't know why/where I saw it in the settings section of the config.
  
  Thanks again!
  - Anonymous
    Not applicable
    8 years ago
    If I add the filters to the config, When the page is launched, I don't see the filters applied, I do see then in the filter list.
    
    var config = {
    type: 'report',
    tokenType: models.TokenType.Embed,
    accessToken: accessToken,
    embedUrl: embedUrl,
    filters: [filter],
    id: embedReportId,
    permissions: models.Permissions.All,
    settings: {
    filterPaneEnabled: true,
    navContentPaneEnabled: true
    }
    };
    
    And when I call this
    report.on('loaded', event => {
    report.getFilters()
    .then(filters => {
    filters.push(filter);
    return report.setFilters(filters);
    });
    });
    
    I get
    JavaScript critical error at line 115, column 36 in http://localhost:56087/Home/EmbedReport?ReportId=e30d4856-fd74-49d1-a935-18e4548cc4e1\n\nSCRIPT1002: Syntax error
    
    Thanks, Shilpi
- vandelayweb
  New Member
  8 years ago
  So I have the embed working, but things start failing once I add in the filter. Its throwing an error in including settings in the config. I'm following the model outlined in this post. Here is the error and code block. Anyone have any thoughts on this one?
  
  ERROR in src/app/components/reporting/reporting.component.ts(73,49): error TS2345: Argument of type '{ type: string; accessToken: string; embedUrl: string; id: string; filters: { $schema: string; ta...' is not assignable to parameter of type 'IEmbedConfigurationBase | undefined'.
  Type '{ type: string; accessToken: string; embedUrl: string; id: string; filters: { $schema: string; ta...' is not assignable to type 'IEmbedConfigurationBase'.
  Types of property 'settings' are incompatible.
  Type '{ filterPaneEnabled: boolean; navContentPaneEnabled: boolean; }' is not assignable to type 'ISettings | undefined'.
  Type '{ filterPaneEnabled: boolean; navContentPaneEnabled: boolean; }' has no properties in common with type 'ISettings'.
  
  let accessToken = 'XXX'; let embedUrl = 'https://app.powerbi.com/dashboardEmbed?dashboardId=XXX'; let embedReportId = 'XXX'; const myFilter = { $schema: "http://powerbi.com/product/schema#advanced", target: { table: "myTable", column: "myColumn" }, operator: "In", values: ["1"] }; let config= { type: 'dashboard', accessToken: accessToken, embedUrl: embedUrl, id: embedReportId, filters: [myFilter], settings: { filterPaneEnabled: true, navContentPaneEnabled: false } }; // Grab the reference to the div HTML element that will host the report. let reportContainer = <HTMLElement>document.getElementById('reportContainer'); // Embed the report and display it within the div container. let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory); let report = powerbi.embed(reportContainer, config);
- vandelayweb
  New Member
  8 years ago
  So I have the embed working, but things start failing once I add in the filter. Its throwing an error in including settings in the config. I'm following the model outlined in this post. Here is the error and code block. Anyone have any thoughts on this one?
  
  ERROR in src/app/components/reporting/reporting.component.ts(73,49): error TS2345: Argument of type '{ type: string; accessToken: string; embedUrl: string; id: string; filters: { $schema: string; ta...' is not assignable to parameter of type 'IEmbedConfigurationBase | undefined'.
  Type '{ type: string; accessToken: string; embedUrl: string; id: string; filters: { $schema: string; ta...' is not assignable to type 'IEmbedConfigurationBase'.
  Types of property 'settings' are incompatible.
  Type '{ filterPaneEnabled: boolean; navContentPaneEnabled: boolean; }' is not assignable to type 'ISettings | undefined'.
  Type '{ filterPaneEnabled: boolean; navContentPaneEnabled: boolean; }' has no properties in common with type 'ISettings'.
  
  let accessToken = 'XXX'; let embedUrl = 'https://app.powerbi.com/dashboardEmbed?dashboardId=XXX'; let embedReportId = 'XXX'; const myFilter = { $schema: "http://powerbi.com/product/schema#advanced", target: { table: "myTable", column: "myColumn" }, operator: "In", values: ["1"] }; let config= { type: 'dashboard', accessToken: accessToken, embedUrl: embedUrl, id: embedReportId, filters: [myFilter], settings: { filterPaneEnabled: true, navContentPaneEnabled: false } }; // Grab the reference to the div HTML element that will host the report. let reportContainer = <HTMLElement>document.getElementById('reportContainer'); // Embed the report and display it within the div container. let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory); let report = powerbi.embed(reportContainer, config);

Forum Discussion

Embedded Report add filter to EmbedConfig

7 Replies

Related content

Blank Page - Embedded Report

Cross-Workspace Report Embedding

RLS for embedded PBI reports

Embedded report

Power BI Report Server Embedding