CODEWITHSUNDEEP
javascriptpowerbi
Nabs
Nabs

Reputation: 31

How to set filters in reports power BI embedded javascript

I want to add somes filters on my reports power bi embedded, i have an html file, and i need to add somes filters in javascript but i dont have experience as a developer. I just need to see an exemple to see how to add it.

<head>  `enter code here`
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <title>test</title>  

    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>  
    <script type="text/javascript" language="javascript" src="https://rawgit.com/Microsoft/PowerBI-JavaScript/master/dist/powerbi.min.js"></script>  


</head>  

<body>  
    <h1>test</h1>  
    <div id="reportContainer" style="width: 80%; height: 800px;"></div>  
</body>  

<script>  
    $(document).ready(function () {  
        var getEmbedToken = "https://testclienttest.azurewebsites.net/api/HttpTrigger1?code=XXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXX==";  

        $.ajax({  
            url: getEmbedToken,  
            jsonpCallback: 'callback',  
            contentType: 'application/javascript',  
            dataType: "jsonp",  
            success: function (json) {  

                var models = window['powerbi-client'].models;  

                var embedConfiguration = {  
                    type: 'report',  
                    id: json.ReportId,  
                    embedUrl: json.EmbedUrl,  
                    tokenType: models.TokenType.Embed,  
                    accessToken: json.EmbedToken  
                };  

                var $reportContainer = $('#reportContainer');  
                var report = powerbi.embed($reportContainer.get(0), embedConfiguration);


            },  
            error: function () {  
                alert("Error");  
            }  
        });  

    });  
</script>  

</html>

i think the filters to add is after this line : var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

Upvotes: 3

Views: 12944

Answers (2)

Nabs
Nabs

Reputation: 31

@Andrey Nikolov

Thank you for your answer but i have an error when i add this line : filters: [basicFilter] to the Embedconfiguration for example in my case i want to filter just with table : "Contract" and column: "IdContract".

So it will be like that : 

const basicFilter: pbi.models.IBasicFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Contract",
    column: "IdContract"
  },
  operator: "In",
  values: [123456],
  filterType: 1 // pbi.models.FilterType.BasicFilter
}

Then

var embedConfiguration = {  
    type: 'report',  
    id: json.ReportId,  
    embedUrl: json.EmbedUrl,  
    tokenType: models.TokenType.Embed,  
    accessToken: json.EmbedToken,
    filters: [basicFilter]  
};

I dont know if this is what you meant...

Upvotes: 0

Andrey Nikolov
Andrey Nikolov

Reputation: 13450

To filter your embed report, you must construct one or more filters and pass them as array to the JavaScript client - either in filters property of embedConfiguration, or as a parameter to report/page/visual setFilters method.

The filters can be from one of these types:

  • IBasicFilter
  • IAdvancedFilter
  • IRelativeDateFilter
  • ITopNFilter
  • IIncludeExcludeFilter

For example, to filter table named Product to show only data, where Count column is 1, 2 or 3 can be constructed as follows:

const basicFilter: pbi.models.IBasicFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Product",
    column: "Count"
  },
  operator: "In",
  values: [1,2,3],
  filterType: 1 // pbi.models.FilterType.BasicFilter
}

Then modify your code to pass this filter to embedConfiguration:

var embedConfiguration = {  
    type: 'report',  
    id: json.ReportId,  
    embedUrl: json.EmbedUrl,  
    tokenType: models.TokenType.Embed,  
    accessToken: json.EmbedToken,
    filters: [basicFilter]  
};

For more information about configuring the embed element, see Embed Configuration Details and to see more information on how to use different filter types and applying them, see Filters.

Upvotes: 6

Related Questions