topic Filter Power BI table using power BI embedded Java script in Developer

topic Filter Power BI table using power BI embedded Java script in Developer https://community.fabric.microsoft.com/t5/Developer/Filter-Power-BI-table-using-power-BI-embedded-Java-script/m-p/2472744#M35658 <P>Hi all,</P><P>I am new to power Bi embedded, basically i have followed the developer tutotorial and was able to successfully run the application in visual studio code Below is the screen shot.</P><P> </P><P>I would like to know where i can insert below filter code. My apolgies, i don't have much developer backgroud.</P><P> </P><P>Many thanks for your support.</P><P> </P><P>Filter i want to copy:</P><LI-CODE lang="javascript">const filter = { $schema: "http://powerbi.com/product/schema#basic", target: { table: "Geo", column: "Region" }, operator: "In", values: ["East"] }; // Add the filter to the report's filters. try { await report.updateFilters(models.FiltersOperations.Add, [filter]); console.log("Report filter was added."); } catch (errors) { console.log(errors); }</LI-CODE><P> </P><P> </P><P> </P><P> </P><P>my existing JS code:</P><LI-CODE lang="javascript">var reports = window.reports; var datasets = window.datasets; var embedToken = window.embedToken; var models = window['powerbi-client'].models; // Generate nav links for reports and datasets $(function () { var reportsList = $("#reports-list"); var datasetsList = $("#datasets-list"); if (reports.length == 0) { reportsList.append($("<li>").text("[None]")); } else { reports.forEach((report) => { var li = $("<li>"); li.append($("<a>", { "href": "javascript&colon;void(0);" }).text(report.Name).click(() => { embedReport(report) })); reportsList.append(li); }); } if (datasets.length == 0) { datasetsList.append($("<li>").text("[None]")); } else { datasets.forEach((dataset) => { var li = $("<li>"); li.append($("<a>", { "href": "javascript&colon;void(0);" }).text(dataset.Name).click(() => { embedQnaDataset(dataset) })); datasetsList.append(li); }); } }); // Embed a report var embedReport = (report, editMode) => { // Create the report embed config object var config = { type: 'report', id: report.Id, embedUrl: report.EmbedUrl, accessToken: embedToken, tokenType: models.TokenType.Embed, permissions: models.Permissions.All, viewMode: editMode ? models.ViewMode.Edit : models.ViewMode.View, settings: { panes: { filters: { visible: false }, pageNavigation: { visible: false } }, extensions: [ { command: { name: "showValue", title: "Show value in alert box", selector: { $schema: "http://powerbi.com/product/schema#visualSelector", visualName: "bf36eb378296825d9db9" // Monthly sales trends }, extend: { visualContextMenu: { title: "Show value in alert box" } } } } ] } }; // Get a reference to the embed container var embedContainer = document.getElementById('embed-container'); // Embed the report var embeddedReport = powerbi.embed(embedContainer, config); // Add "Show value" context menu item embeddedReport.on("commandTriggered", function (command) { // Determine the command detail var commandDetails = command.detail; // If the command is showValue, show an alert box if (commandDetails.command === "showValue") { // Retrieve specific details from the selected data point const category = commandDetails.dataPoints[0].identity[0].equals; const value = commandDetails.dataPoints[0].values[0].formattedValue; alert(category + " value is " + value); } }); } // Embed the Q&A experience var embedQnaDataset = (dataset) => { // Create the Q&A embed config object var config = { type: 'qna', tokenType: models.TokenType.Embed, accessToken: embedToken, embedUrl: dataset.EmbedUrl, datasetIds: [dataset.Id], viewMode: models.QnaMode.Interactive }; // Get a reference to the embed container var embedContainer = document.getElementById('embed-container'); // Embed the Q&A experience var embeddedObject = powerbi.embed(embedContainer, config); } // Filter reports by product demographic $(document).ready(function () { $('#demographic').change(function () { const report = powerbi.embeds[0]; const demographic = this.value; const removeFilters = (demographic == "*"); const basicFilter = { "$schema": "http://powerbi.com/product/schema#basic", "target": { "table": "Product", "column": "Demographic" }, "operator": removeFilters ? "All" : "In", "values": removeFilters ? [] : [demographic] } // Update filters report.updateFilters(models.FiltersOperations.Replace, [basicFilter]) .catch(error => { console.log(error); }); }); }); </LI-CODE><P> </P><P> </P><P>Project folder:</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Nazim_0-1650730207870.png" style="width: 400px;"><img src="https://community.fabric.microsoft.com/t5/image/serverpage/image-id/703922i92CA79FA304AB8CB/image-size/medium?v=v2&px=400" role="button" title="Nazim_0-1650730207870.png" alt="Nazim_0-1650730207870.png" /></span></P><P> </P> Sat, 23 Apr 2022 16:24:39 GMT Nazim 2022-04-23T16:24:39Z Filter Power BI table using power BI embedded Java script https://community.fabric.microsoft.com/t5/Developer/Filter-Power-BI-table-using-power-BI-embedded-Java-script/m-p/2472744#M35658 <P>Hi all,</P><P>I am new to power Bi embedded, basically i have followed the developer tutotorial and was able to successfully run the application in visual studio code Below is the screen shot.</P><P> </P><P>I would like to know where i can insert below filter code. My apolgies, i don't have much developer backgroud.</P><P> </P><P>Many thanks for your support.</P><P> </P><P>Filter i want to copy:</P><LI-CODE lang="javascript">const filter = { $schema: "http://powerbi.com/product/schema#basic", target: { table: "Geo", column: "Region" }, operator: "In", values: ["East"] }; // Add the filter to the report's filters. try { await report.updateFilters(models.FiltersOperations.Add, [filter]); console.log("Report filter was added."); } catch (errors) { console.log(errors); }</LI-CODE><P> </P><P> </P><P> </P><P> </P><P>my existing JS code:</P><LI-CODE lang="javascript">var reports = window.reports; var datasets = window.datasets; var embedToken = window.embedToken; var models = window['powerbi-client'].models; // Generate nav links for reports and datasets $(function () { var reportsList = $("#reports-list"); var datasetsList = $("#datasets-list"); if (reports.length == 0) { reportsList.append($("<li>").text("[None]")); } else { reports.forEach((report) => { var li = $("<li>"); li.append($("<a>", { "href": "javascript&colon;void(0);" }).text(report.Name).click(() => { embedReport(report) })); reportsList.append(li); }); } if (datasets.length == 0) { datasetsList.append($("<li>").text("[None]")); } else { datasets.forEach((dataset) => { var li = $("<li>"); li.append($("<a>", { "href": "javascript&colon;void(0);" }).text(dataset.Name).click(() => { embedQnaDataset(dataset) })); datasetsList.append(li); }); } }); // Embed a report var embedReport = (report, editMode) => { // Create the report embed config object var config = { type: 'report', id: report.Id, embedUrl: report.EmbedUrl, accessToken: embedToken, tokenType: models.TokenType.Embed, permissions: models.Permissions.All, viewMode: editMode ? models.ViewMode.Edit : models.ViewMode.View, settings: { panes: { filters: { visible: false }, pageNavigation: { visible: false } }, extensions: [ { command: { name: "showValue", title: "Show value in alert box", selector: { $schema: "http://powerbi.com/product/schema#visualSelector", visualName: "bf36eb378296825d9db9" // Monthly sales trends }, extend: { visualContextMenu: { title: "Show value in alert box" } } } } ] } }; // Get a reference to the embed container var embedContainer = document.getElementById('embed-container'); // Embed the report var embeddedReport = powerbi.embed(embedContainer, config); // Add "Show value" context menu item embeddedReport.on("commandTriggered", function (command) { // Determine the command detail var commandDetails = command.detail; // If the command is showValue, show an alert box if (commandDetails.command === "showValue") { // Retrieve specific details from the selected data point const category = commandDetails.dataPoints[0].identity[0].equals; const value = commandDetails.dataPoints[0].values[0].formattedValue; alert(category + " value is " + value); } }); } // Embed the Q&A experience var embedQnaDataset = (dataset) => { // Create the Q&A embed config object var config = { type: 'qna', tokenType: models.TokenType.Embed, accessToken: embedToken, embedUrl: dataset.EmbedUrl, datasetIds: [dataset.Id], viewMode: models.QnaMode.Interactive }; // Get a reference to the embed container var embedContainer = document.getElementById('embed-container'); // Embed the Q&A experience var embeddedObject = powerbi.embed(embedContainer, config); } // Filter reports by product demographic $(document).ready(function () { $('#demographic').change(function () { const report = powerbi.embeds[0]; const demographic = this.value; const removeFilters = (demographic == "*"); const basicFilter = { "$schema": "http://powerbi.com/product/schema#basic", "target": { "table": "Product", "column": "Demographic" }, "operator": removeFilters ? "All" : "In", "values": removeFilters ? [] : [demographic] } // Update filters report.updateFilters(models.FiltersOperations.Replace, [basicFilter]) .catch(error => { console.log(error); }); }); }); </LI-CODE><P> </P><P> </P><P>Project folder:</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Nazim_0-1650730207870.png" style="width: 400px;"><img src="https://community.fabric.microsoft.com/t5/image/serverpage/image-id/703922i92CA79FA304AB8CB/image-size/medium?v=v2&px=400" role="button" title="Nazim_0-1650730207870.png" alt="Nazim_0-1650730207870.png" /></span></P><P> </P> Sat, 23 Apr 2022 16:24:39 GMT https://community.fabric.microsoft.com/t5/Developer/Filter-Power-BI-table-using-power-BI-embedded-Java-script/m-p/2472744#M35658 Nazim 2022-04-23T16:24:39Z Re: Filter Power BI table using power BI embedded Java script https://community.fabric.microsoft.com/t5/Developer/Filter-Power-BI-table-using-power-BI-embedded-Java-script/m-p/2477106#M35713 <P>Hi <a href="https://community.fabric.microsoft.com/t5/user/viewprofilepage/user-id/382134">@Nazim</a> ,</P> <P> </P> <P>You may refer to this offical blog: <A href="https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/control-report-filters" target="_self">Control report filters</A></P> <P>Code:</P> <LI-CODE lang="javascript">var accessToken = "@Model.EmbedToken.Token"; // Read embed URL from Model var embedUrl = "@Html.Raw(Model.EmbedUrl)"; // Read report Id from Model var embedReportId = "@Model.Id"; // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; // Get a reference to the embedded report HTML element var reportContainer = $('#embedContainer')[0]; if ("@Model.Username" != "") { $("#RLS").prop('checked', true); $("#RLSdiv").show(); } else { $("#RLS").prop('checked', false); $("#RLSdiv").hide(); } if ("@Model.IsEffectiveIdentityRequired.GetValueOrDefault()" == "True") { $("#noRLSdiv").hide(); $("#RLS").removeAttr("disabled"); $("#RLS").change(function () { if ($(this).is(":checked")) { $("#RLSdiv").show(300); } else { $("#RLSdiv").hide(200); } }); } else { $("#noRLSdiv").show(); } const testFilter = { $schema: "http://powerbi.com/product/schema#basic", target: { table: "SampleParameter", column: "AgentID" }, operator: "In", values: ["H1627"] }; // 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. var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: accessToken, embedUrl: embedUrl, id: embedReportId, permissions: models.Permissions.All,//models.Permissions.Read //can add filters here filters: [testFilter], //filter array here settings: { filterPaneEnabled: true, navContentPaneEnabled: true //the nav at bottom of report }, //filterType: models.FilterType.BasicFilter }; // Embed the report and display it within the div container. var report = powerbi.embed(reportContainer, config);</LI-CODE> <P>For refernece: <A href="https://community.powerbi.com/t5/Developer/Embed-Report-Filter-not-working/m-p/1189355" target="_self">Embed Report Filter not working</A></P> <P> </P> <P>Best Regards,<BR />Rico Zhou</P> <P> </P> <P>If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.</P> Tue, 26 Apr 2022 08:46:21 GMT https://community.fabric.microsoft.com/t5/Developer/Filter-Power-BI-table-using-power-BI-embedded-Java-script/m-p/2477106#M35713 Anonymous 2022-04-26T08:46:21Z