Embedded Report add filter to EmbedConfig

[rossnruthie]

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?

[Eric_Zhang · Accepted solution]

---

@rossnruthie 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?

---

@rossnruthie

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
           
        }
    };

[vandelayweb]

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);

[rossnruthie]

hi @vandelayweb,

This is just a guess but it looks like you are trying to embed a dashboard rather than a report and the config you are setting up is for reports.  In your embed code you have:

    let config= {
        type: 'dashboard',
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        filters: [myFilter],
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
        }
    };

According to the JS documention HERE the Dashboard config does not have a settings attribute:

export interface IDashboardLoadConfiguration {
  accessToken: string;
  id: string;
  pageView?: PageView;
  tokenType?: TokenType;
}

So either you should change your embed to look at a report rather than a dashboard, or modify your settings to match the dashboard config above.

Thanks,

[vandelayweb]

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]

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);

[rossnruthie]

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]

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