3

I have a Power BI report that I want to integrate with my outward facing website.

On my website, if the user clicks on the name "Frank" I would like to pass this paramter to my BI Report. Internally this works with

Query00/name eq 'Frank' appended to the report's URL.

However, when I publish this report to the WEB (Public not within the organization) this parameter string does not work. How do I pass a parameter to a published BI report?

Jerry Trac
  • 357
  • 4
  • 17

2 Answers2

1

As you can see from the official documentation, this isn't supported:

  • Query string filtering doesn't work with Publish to web or Export to PDF.

You can either add slicers to your report, which will allow your visitors to filter the data, or embed it in another way.

Secure embedding supports URL filters, but the proper way to do this is to actually embed the report into your site. You can see it in action in Power BI Embedded Playground. When embedding, there are two scenarios - "user owns data", in which each visitor needs Power BI Pro account to see the report, and "app owns data", in which your application uses one Power BI Pro account to authenticate itself, but your users don't need to have Power BI accounts at all. In your case you need the later one.

Simply download Microsoft's sample application and configure it. You need to register Azure AD application to be used in your app. Then your app will authenticate itself and use Power BI REST API to get report's embedUrl and use it with Power BI JavaScript client to embed it in an empty <div> in a web page.

How to embed Power BI is a common question here on StackOverflow, so you can also read other answers, like:

Andrey Nikolov
  • 12,967
  • 3
  • 20
  • 32
0

INTEGRATION OF POWER BI WITH HTML PAGE AND ESTABLISHING COMMUNICATION BTW HTML PAGE AND POWER BI

In this example we will embed the powerbi content in html page and create button in html page through which the view of the page will change. the below example i have modified as per above question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button class="textLarge" onclick='show("ReportSection", "Frank");' style="display: inline-block;">Frank</button>

So here I am using a button click function "show" which has two parameters one is "page name" and other is "filtervalue"

and I have a iframe through which I am embedding my power bi report. just remember that the filter value and you are putting is similar to the one in the published Bi report. Avoid spelling mistake as there would be character matching on the string.

 <iframe id="embeddedframe" width="2000" height="1000"  src="https://app.powerbi.com/reportEmbed?reportId=(put_your_report_id_here_and remove_parenthesis)&groupId=(put_your_group_id_here_and remove_parenthesis)&autoAuth=true&ctid=(put_your_ct_id_here_and remove_parenthesis)&pageName=" frameborder="0" allowFullScreen="true"></iframe>

Basically you don't have to edit the iframe URL, you can directly get it from bi service portal

Then call the below function

In below function you need to edit the 1) baseURL 2) Table_Nameand Colum_Name 3)iframe_id

<script>

function show(pageName, filterValue)
{

var baseUrl='https://app.powerbi.com/reportEmbed? 
reportId=b0f&groupId=e2c&autoAuth=true&ctid=efc8&config=e&pageName='

var newUrl = baseUrl + "&pageName=" + pageName;

if(null != filterValue && "" != filterValue)

{

newUrl += "&$filter=Table_Name/Column_name eq '" + filterValue + "'";

}

//Assumes there's an iFrame on the page with id="iFrame"

var report = document.getElementById("embeddedframe")

report.src = newUrl;

}
</script>
Christina Sebastian
  • 176
  • 1
  • 9