# Add javascript code in custom field format

**URL:** <https://discuss.elastic.co/t/add-javascript-code-in-custom-field-format/129182>\
**Category:** Kibana\
**Created:** [April 23, 2018, 9:00pm UTC](https://discuss.elastic.co/t/add-javascript-code-in-custom-field-format/129182 "2018-04-23T21:00:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dingjun](https://avatars.discourse-cdn.com/v4/letter/d/f08c70/32.png) [@dingjun](https://discuss.elastic.co/u/dingjun)\
**Post date:** [April 23, 2018, 9:00pm UTC](https://discuss.elastic.co/t/add-javascript-code-in-custom-field-format/129182/1 "2018-04-23T21:00:44Z")

</div>

Hi Community,

I'm trying to implement a custom field formatter, which displays a button and when user click this button, an HTTP post request will be sent, and the response will be in a popup window displayed. Now the button is correctly displayed, however when user clicks the button, the function binded to onClick event is not fired. I guees, somehow angularjs has taken over the event and it is not captured by browser. And I noticeed that the output of my custom field formatter is wrapped in a tag

`<span ng-non-bindable>`

Can someone please explain me, why the javascript function binded to onClick event can't be executed? Is it possible to add eventlistener to an element in a custom field formmatter?

Thanks a lot!  
Dingjun

---

<div class="post-metadata">

**Author:** ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)\
**Post date:** [April 24, 2018, 3:11pm UTC](https://discuss.elastic.co/t/add-javascript-code-in-custom-field-format/129182/2 "2018-04-24T15:11:59Z")

</div>

I am not aware of any limitations on this and I've also asked the Kibana security team about it and they said there shouldn't be any limitations to that. Can you give us more details on how you're implementing this? Is it a custom one or just overwriting an existing one?

---

<div class="post-metadata">

**Author:** ![dingjun](https://avatars.discourse-cdn.com/v4/letter/d/f08c70/32.png) [@dingjun](https://discuss.elastic.co/u/dingjun)\
**Post date:** [April 25, 2018, 5:58am UTC](https://discuss.elastic.co/t/add-javascript-code-in-custom-field-format/129182/3 "2018-04-25T05:58:59Z")

</div>

Hi Marius,

I'm implementing a custom one, not overwritng an existing one. Basically my custom field formatter returns html code like this:

```
 <button id="button">Show Message</button>
 document.getElementById("button").onclick = function () { 
 //more javascript code here
 };

```

The problem is when I click the button, the code bound to onlick event is not executed.

Thanks  
Dingjun

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 23, 2018, 5:59am UTC](https://discuss.elastic.co/t/add-javascript-code-in-custom-field-format/129182/4 "2018-05-23T05:59:13Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.