Call custom Javascript function in a table column

[hiteshpatel1983]

Hi,

We have a scenario where we embed our Power BI report in a .Net application and what we would like to do is add column in a table in the report that will include a dynamic Javascript function that includes a few fields from the table (like Customer name, Customer type) as a parameter.

So. for e.g. the content of the table could look like something like this,

CustName (Visible Column) |  CustType (Hidden column) |   Sales (Visible column) |   JsFunc (Column showing icon with Javascript)

-------------------------------------------------------------------------------------------------------------------------------

John                                        Account                                  $4000                            ≡ {javascript**}

Ben                                          HCP                                         $500                              ≡ {javascript**}

javascript** will be as follows -

javascript:var message_data = {'uniquename':[CustName],'entitytype':[CustType],'clientX':event.clientX,'clientY':event.clientY};window.parent.postMessage(message_data,'http://localhost');

[CustName] and [CustType] are the values we want to use from the respective fields.

So, we wouldnt want to show the Javascript in the table but just the "≡" icon in the last column. However, when you a user clicks on the "≡" (left click preferably), we would like to execute a javascript function that is defined in our web application.

Is anyone aware of ways to do this in Power BI report (that are embedded in an another application)?

Thanks,

Hitesh

[Eric_Zhang · Accepted solution]

---

@hiteshpatel1983 wrote:

Hi,

We have a scenario where we embed our Power BI report in a .Net application and what we would like to do is add column in a table in the report that will include a dynamic Javascript function that includes a few fields from the table (like Customer name, Customer type) as a parameter.

So. for e.g. the content of the table could look like something like this,

CustName (Visible Column) |  CustType (Hidden column) |   Sales (Visible column) |   JsFunc (Column showing icon with Javascript)

-------------------------------------------------------------------------------------------------------------------------------

John                                        Account                                  $4000                            ≡ {javascript**}

Ben                                          HCP                                         $500                              ≡ {javascript**}

javascript** will be as follows -

javascript:var message_data = {'uniquename':[CustName],'entitytype':[CustType],'clientX':event.clientX,'clientY':event.clientY};window.parent.postMessage(message_data,'http://localhost');

[CustName] and [CustType] are the values we want to use from the respective fields.

So, we wouldnt want to show the Javascript in the table but just the "≡" icon in the last column. However, when you a user clicks on the "≡" (left click preferably), we would like to execute a javascript function that is defined in our web application.

Is anyone aware of ways to do this in Power BI report (that are embedded in an another application)?

Thanks,

Hitesh

---

@hiteshpatel1983

It is not supported.

However, more or less you could achieve your requirement by using Power BI Javascript APIs. You could capture the event "dataSelected" and run Javascript accordingly, see more events.

reports.on('dataSelected', function(event)
{
var data = event.detail;  
console.log(JSON.stringify(data, null, ' '));
alert(JSON.stringify(data, null, ' '));
		 
})
}

[hiteshpatel1983]

Hi @Eric_Zhang

Thanks for your prompt reply.

Am I right in thinking that, I can call any Javascript function instead of the alert message you have shown in the example code below?

reports.on('dataSelected', function(event)
{
var data = event.detail;  
console.log(JSON.stringify(data, null, ' '));
alert(JSON.stringify(data, null, ' '));
		 
})
}

 So, instead of 

alert(JSON.stringify(data, null, ' '));  

I can call

var message_data = {'uniquename':<<field from JSON data>>,'entitytype':<<field from JSON data>>,'clientX':event.clientX,'clientY':event.clientY};window.parent.postMessage(message_data,'http://localhost'); 

Is that correct?

Note that, we will need clientX and clientY position to be able to show the message/alert window on client side and call a postMessage function from the parent window.

Thanks,

Hitesh

[hiteshpatel1983]

Hi @Eric_Zhang

We have actually tried to utilise the "DataSelected" event capture to trigger a script that we will define to show a menu from the web app using the example you shared with me earlier (thanks for that!)

However, we want to do is show the alert window at the point where user has clicked on the report (using clientX and clientY values or something similar?).

Are you familiar with any such properties we can apply/utilise to show the alert window at a position where user clicked on?

Thanks,
Hitesh

[Eric_Zhang]

---

@hiteshpatel1983 wrote:

Hi @Eric_Zhang

We have actually tried to utilise the "DataSelected" event capture to trigger a script that we will define to show a menu from the web app using the example you shared with me earlier (thanks for that!)

However, we want to do is show the alert window at the point where user has clicked on the report (using clientX and clientY values or something similar?).

Are you familiar with any such properties we can apply/utilise to show the alert window at a position where user clicked on?

Thanks,
Hitesh

---

@hiteshpatel1983

That is actually beyond the scope of Power BI, just see below links. For further questions, I'd suggest you ask/search in stackoverflow site.

How to get the mouse position without events (without moving the mouse)?

How to customize the position of an alert box

[hiteshpatel1983]

Thanks @Eric_Zhang

I will investigate this further in those areas.

Regards,

Hitesh