Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
shwetak
Frequent Visitor

Report Filtering in Power BI embedded.

I have published report & embedded it in my HTML snippet. which works fine at the initial level. data loads perfectly. Getting issue when trying to apply filters on it.

Below is my code,

 

<script>
		var txtAccessToken = 'eyJrIjoiOTQ2OWMzMTgtODdlMi00YTlmLTljYjUtYTc2MDcxYmM2ZDUxIiwidCI6IjhhZDJkNjdmLWY4NjQtNDkzZi1iN2I5LWI2ODEzODU0N2JlMSJ9';
		var txtEmbedUrl = 'https://app.powerbi.com/view?r=eyJrIjoiOTQ2OWMzMTgtODdlMi00YTlmLTljYjUtYTc2MDcxYmM2ZDUxIiwidCI6IjhhZDJkNjdmLWY4NjQtNDkzZi1iN2I5LWI2ODEzODU0N2JlMSJ9';
		var txtEmbedReportId = 'ae9dba68-2335-47e5-bd25-f733d76803bc';
		 
		var models = window['powerbi-client'].models;
		var permissions = models.Permissions.All;
		
		var config= {
			type: 'report',
			accessToken: txtAccessToken,
			embedUrl: txtEmbedUrl,
			id: txtEmbedReportId,
			permissions: permissions,
			settings: {
				filterPaneEnabled: true,
				navContentPaneEnabled: true
			}
		};
		 
		
		
		var reportContainer = $('#reportContainer')[0];
		var report = powerbi.embed(reportContainer, config);
		
		 const filter = {
			  $schema: "http://powerbi.com/product/schema#basic",
			  target: {
				table: "Query1",
				column: "id"
			  },
			  operator: "In",
			  values: [80]
		};
		var reports = powerbi.embeds[0];
            if (reports) {
                reports.setFilters([filter])
                    .then(function (result) {
                        console.log(result);
                    })
                    .catch(function (errors) {
                        console.log(errors);
                    });
            }
 </script>

 

Thanks in Advance, Let me know what I am missing. 

4 REPLIES 4
Eric_Zhang
Microsoft Employee
Microsoft Employee


@shwetak wrote:

I have published report & embedded it in my HTML snippet. which works fine at the initial level. data loads perfectly. Getting issue when trying to apply filters on it.

Below is my code,

 

<script>
		var txtAccessToken = 'eyJrIjoiOTQ2OWMzMTgtODdlMi00YTlmLTljYjUtYTc2MDcxYmM2ZDUxIiwidCI6IjhhZDJkNjdmLWY4NjQtNDkzZi1iN2I5LWI2ODEzODU0N2JlMSJ9';
		var txtEmbedUrl = 'https://app.powerbi.com/view?r=eyJrIjoiOTQ2OWMzMTgtODdlMi00YTlmLTljYjUtYTc2MDcxYmM2ZDUxIiwidCI6IjhhZDJkNjdmLWY4NjQtNDkzZi1iN2I5LWI2ODEzODU0N2JlMSJ9';
		var txtEmbedReportId = 'ae9dba68-2335-47e5-bd25-f733d76803bc';
		 
		var models = window['powerbi-client'].models;
		var permissions = models.Permissions.All;
		
		var config= {
			type: 'report',
			accessToken: txtAccessToken,
			embedUrl: txtEmbedUrl,
			id: txtEmbedReportId,
			permissions: permissions,
			settings: {
				filterPaneEnabled: true,
				navContentPaneEnabled: true
			}
		};
		 
		
		
		var reportContainer = $('#reportContainer')[0];
		var report = powerbi.embed(reportContainer, config);
		
		 const filter = {
			  $schema: "http://powerbi.com/product/schema#basic",
			  target: {
				table: "Query1",
				column: "id"
			  },
			  operator: "In",
			  values: [80]
		};
		var reports = powerbi.embeds[0];
            if (reports) {
                reports.setFilters([filter])
                    .then(function (result) {
                        console.log(result);
                    })
                    .catch(function (errors) {
                        console.log(errors);
                    });
            }
 </script>

 

Thanks in Advance, Let me know what I am missing. 


@shwetak

What's going on if put the filter in the embed option.

 

 

		
 const filter = {
			  $schema: "http://powerbi.com/product/schema#basic",
			  target: {
		     table: "Query1",
				column: "id"
			  },
			  operator: "In",
			  values: [80]
		};

		var config= {
			type: 'report',
			accessToken: txtAccessToken,
			embedUrl: txtEmbedUrl,
			id: txtEmbedReportId,
			permissions: permissions,
                        filters:[filter],
			settings: {
				filterPaneEnabled: true,
				navContentPaneEnabled: true
			}
		};
		 
		
		
		var reportContainer = $('#reportContainer')[0];
		var report = powerbi.embed(reportContainer, config);
		
		

Also note that the table name/column name are case sensitive.

 

Tried this, but still the results are the same...... 😞


@shwetak wrote:

Tried this, but still the results are the same...... 😞


@shwetak

What does the console output? Press F12 in Chrome and reload your page.

 

Capture.PNG

PowerBI_Error.png

 

PowerBIFilterError.jpg

 

 

Helpful resources

Announcements
PBI_Carousel_NL_June

Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.