# Run script inside hmtl of field formatter

**URL:** <https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805>\
**Category:** Kibana\
**Created:** [October 30, 2019, 8:06am UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805 "2019-10-30T08:06:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elaak](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/elaak/32/55014_2.png) [@Elaak](https://discuss.elastic.co/u/Elaak)\
**Post date:** [October 30, 2019, 8:06am UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805/1 "2019-10-30T08:06:04Z")

</div>

I have a fieldformatter that in its `_convert method` needs to do a HTTP (POST/PUT) request to a url using one of two different buttons (or allow user to input a value and post that). I have created an html `<button>` and for the `onClick=` I simply reference an imported javascript that makes the call, but also tried doing a POST request with . Both options gets `refused to execute inline script because it violates the following Content Security Policy directive: ....`.

How can I make this call? I would rather not force to allow inline scripts, and I have read how to fix it using event listeners etc., but I cannot figure out how to make it work in my `_convert method`.

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [October 30, 2019, 9:17am UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805/2 "2019-10-30T09:17:31Z")

</div>

Hi @Elaak,

thanks for your interesting question.

To make sure I understand correctly - you are using a field formatter to render a field as a button (or even a form) that should submit a request? That's a pretty cool idea to get custom UI into Kibana, although a bit hacky 🙂 .

I can see how the event listener workaround could work, you could add a custom data attribute like `data-trigger-post-action="<the value of the field>"` to your rendered html button. In your imported javascript you would have to install a click handler on the document that checks the target element on each click and whether it contains the data attribute and trigger the request if it's the case. The you don't need inline scripts.

Another possibility which is probably simpler is getting rid of javascript in the first place. You could use a regular html form with a nested submit button using `<form target="_blank"`. Post requests shouldn't be a problem and it will open in a new tab so the current page is not lost.

If your use case is to add functionality to Discover in particular, you can also consider providing a separate "doc view" which will render as a tab (like the table and json view) for each row of discover: [Inject front end code into Discover from custom plugin](https://discuss.elastic.co/t/inject-front-end-code-into-discover-from-custom-plugin/72871)  
This is the recommended way, as you have full control over the rendered html and attached event listeners. Plus this is an official API so we will support it and make sure it doesn't break because of an unrelated change which could always happen with the more hacky solutions.  
The location in the code changed, its now [https://github.com/elastic/kibana/tree/master/src/legacy/core\_plugins/kbn\_doc\_views/public](https://github.com/elastic/kibana/tree/master/src/legacy/core_plugins/kbn_doc_views/public)

---

<div class="post-metadata">

**Author:** ![Elaak](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/elaak/32/55014_2.png) [@Elaak](https://discuss.elastic.co/u/Elaak)\
**Post date:** [October 30, 2019, 10:12am UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805/3 "2019-10-30T10:12:29Z")

</div>

Hi @flash1293,  
Thank you for your suggestions!

Yes that is correct. It is indeed hacky, but it was the simplest solution to a critical issue 🙂

I tried the form workaround with the `target=_blank` property, but my controller does not appear to accept it due to the charset:

> Content type 'text/plain;charset=UTF-8' not supported

I think I will try the event listener workaround, but I am unsure how I access the document in my javascript. How would the javascript find it?

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [October 30, 2019, 10:46am UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805/4 "2019-10-30T10:46:42Z")

</div>

> I tried the form workaround with the `target=_blank` property, but my controller does not appear to accept it due to the charset:

With controller you mean the code handling the `POST`ed form data? A regular form won't send the request as JSON so you would have to adjust the receiving end to handle this case. If thats out of question, trying the event listener approach is probably not too bad.

The document is a global variable, so you just have to do

```js
document.addEventListener('click', (e) => console.log(e))

```

This will log the event for every single click event on the page. Now you just have to replace the console.log with a function checking whether the clicked element is one of your buttons and trigger the request if it's the case.

---

<div class="post-metadata">

**Author:** ![Elaak](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/elaak/32/55014_2.png) [@Elaak](https://discuss.elastic.co/u/Elaak)\
**Post date:** [October 30, 2019, 11:08am UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805/5 "2019-10-30T11:08:11Z")

</div>

Thank you, I didn't realize that it was so easy actually. I was trying out with an `id=btn` on my `<button>` and then `document.getElementById("btn") ....` but it does not work. I got it working in the end with the custom data attribute, but just out of curiosity why does it not appear to work using the `id` and `getElementById()` ?

> [@flash1293](#):
>
> With controller you mean the code handling the `POST` ed form data? A regular form won't send the request as JSON so you would have to adjust the receiving end to handle this case. If thats out of question, trying the event listener approach is probably not too bad.

The consuming format is `text/plain` for both the form and my java spring controller. The issue is that I cannot make my controller to accept this `Content-Type: text/plain;charset=utf-8` (or accept any charset). This issue is still there now that I have implemented the `EventListener`.

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [October 30, 2019, 2:57pm UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805/6 "2019-10-30T14:57:13Z")

</div>

> I got it working in the end with the custom data attribute, but just out of curiosity why does it not appear to work using the `id` and `getElementById()` ?

It's about the order of execution - your `getElementById()` code is probably running before Kibana is able to render the button. For catching the event on document level it doesn't matter because the document is always there.

> The consuming format is `text/plain` for both the form and my java spring controller. The issue is that I cannot make my controller to accept this `Content-Type: text/plain;charset=utf-8` (or accept any charset)

If you are using the fetch api to trigger the request you should be able to set the header to any value you want as in this example: [Using the Fetch API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options)

---

<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:** [November 27, 2019, 2:57pm UTC](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805/7 "2019-11-27T14:57:27Z")

</div>

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