# Using EUI inside FieldFormatter plugin

**URL:** <https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032>\
**Category:** Kibana\
**Created:** [January 7, 2020, 11:06am UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032 "2020-01-07T11:06:10Z")\
**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:** [January 7, 2020, 11:06am UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032/1 "2020-01-07T11:06:11Z")

</div>

I have a FieldFormatter where I want to use `EUI` to create a html representation of some data. I want a `modal dialog` to open when I press on one field. This is a type of extended version for the "Truncated String" FieldFormatter.

Here is an extract of the code:

`public.js`:

```
TruncatedField.prototype._convert = {
  text: function (value) {
    return value;
  },
  html: function (value, _, document) {
    var htmlString = '<div>' + 
      '<button class="euiButton" type="button">' +
        'Truncated text example ...' + 
      '</button></div>';

    return htmlString;
  }
};

```

This gives me a button that I can click, but I cannot figure how to open up an overlapping modal dialog from pressing the button. I tried look through the tutorials and examples at the [EUI github page](https://elastic.github.io/eui/#/layout/modal) but I cannot find a complete example.

How do I make this work, and how do I insert the full text of my truncated string into this modal dialog?

Many thanks!

---

<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:** [January 7, 2020, 11:22am UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032/2 "2020-01-07T11:22:16Z")

</div>

Hi @Elaak,

Field formatters don't expose a `render` function of some kind that would be necessary to implement something like this in a clean way. You just return the HTML, it's not possible to attach event handlers to your HTML elements that would allow you to react to a click to do something like opening a popup. However you can work around by this by a global event handler and a data-attribute on your button. Then you can intercept all clicks to all buttons and trigger your action if the clicked element includes the data attribute. I answered a similar question here: [Run script inside hmtl of field formatter](https://discuss.elastic.co/t/run-script-inside-hmtl-of-field-formatter/205805)

In your case the script wouldn't trigger an HTTP call, but render a react element using ReactDOM.render.

Let me know whether that helps!

---

<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:** [January 16, 2020, 10:23am UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032/3 "2020-01-16T10:23:45Z")

</div>

Hi @flash1293,

Thanks, the `ReactDOM.render()` was what I was looking for! The only issue I am left having is that the appears to overwrite the height of my Kibana dashboard, because the vertical scrollbar is removed. I tried to adjust the height of the overlay with `style={height: 10000px}`(just to be extreme), but it made no difference.

---

<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:** [January 16, 2020, 5:55pm UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032/4 "2020-01-16T17:55:30Z")

</div>

I’m not sure I’m understanding 100% correctly - could you post your code and a screenshot of the problem?

---

<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:** [January 17, 2020, 10:49am UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032/5 "2020-01-17T10:49:32Z")

</div>

What I mean is that in my Dashboard, I press my generated and a `<EuiModal>` dialog is showed surrounded by a `<EuiOverlayMask>`. In the Dashboard I have many visualizations, so there is a scrollbar to navigate and show the lower visualizations. But, when this dialog opens, the scrollbar disappears.

I cannot show a screenshot, but the code is the following:

```
import React, { Component } from 'react';
import {
  EuiModal,
  EuiModalBody,
  EuiOverlayMask
} from '@elastic/eui';

export default class SublabelsFieldEditDialog extends Component {
  constructor(props) {
	super(props);

	this.state = {
	  isModalVisible: true
	};

	this.onClose = this.closeModal.bind(this);
	this.showModal = this.showModal.bind(this);
  }

  closeModal() {
	this.setState({ isModalVisible: false });
  }

  showModal() {
	this.setState({ isModalVisible: true });
  }

  // FIXME EuiOverlayMask "removes" the scrollbar, which affects position and sizes of ui components.
  render() {
	let basicModal = null;
	if (this.state.isModalVisible) {
		basicModal = (
		<EuiOverlayMask>
		  <EuiModal onClose={this.onClose} style={{ padding: '25px'}}>
			<EuiModalBody>
				<button className="dialogBtns"
						data-id="editFieldData"
						data-field="clazz"
						data-document={this.props.id}
						data-index="myIndex"
						data-label="MyLabel"
						onClick={this.closeModal}>
					MyLabel
				</button>
			</EuiModalBody>
		  </EuiModal>
		</EuiOverlayMask>
		);
	}

	return basicModal;
  }
}

```

I hope this makes things more clear.

---

<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:** [January 20, 2020, 8:23am UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032/6 "2020-01-20T08:23:53Z")

</div>

It should be fine to just omit the `EuiOverlayMask`. Then the modal should be shown without blocking the rest of the page (which includes scrolling).

---

<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:** [February 17, 2020, 8:24am UTC](https://discuss.elastic.co/t/using-eui-inside-fieldformatter-plugin/214032/7 "2020-02-17T08:24:02Z")

</div>

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