Vis plugin development - Getting custom visualization to save editor parameters

Elastic Stack Kibana
1

Hi,

I'm developing a custom visualization for Kibana using the base visualization type. For part of my visualization, I have an options template HTML file with sliders and checkboxes that are used to set some vis.params in the code. The numbers/booleans set by these work temporarily (upon clicking the blue 'refresh' button built into the visualization menu), but upon a full browser refresh they are not retained, even if I save the visualization. The sliders just move back to their default of the midpoint and the checkbox goes back to its default of false.

How can I get my plugin to retain the values set in the editor panel even after a save/refresh? I'm using vis.params.[parameter_name] to access and store the parameters as displayed in the Kibana docs.

Thanks in advance!
-Ethan

2

@timroes Think you could help out here?

1 Like
3

Hi Ethan,

you should not set the values on vis.params directly. Instead you should use editorState.params.param_name to set it. That will properly hook into the editor and allow usage and storage of the params correctly.

In general I would also recommend switching away from Angular in the visualization options panel as soon as possible, since we're about to remove Angular in Kibana over the 7.x timeframe.

You have also the possibility to use React for your option panels. You can find an always updated version of a sample custom visualization that uses a React editor (that is automatically tested in our code base) in the kbn_tp_custom_visualizations plugin.

Cheers,
Tim

1 Like
4

Tim,

Thank you for the quick response. My editor functions as intended for now, but I'll make sure to work on swapping it over to React to futureproof.

Will the base visualization type continue to be supported through 7.x or will that possibly be pushed towards only using React vis types as well? The example you sent uses React for both the main vis and the editor, but I'm hoping to continue using the base vis type with a React editor.

Thanks,
Ethan

5

Hi,

Don’t worry. We have no plans to deprecate the Base Visualization type for the React visualization type. Both will coexist. We’ll only planning to remove the Angular visualization type in the future. So no need to switch your visualization implementation over to React (in fact React makes imho only sense for visualizations that are rather DOM heavy and not using graphic libraries/APIs that much).

We also publish a Plugin API changes blogpost prior to every release (e.g. see the 7.3 one: https://www.elastic.co/blog/kibana-plugin-api-changes-in-7.3), which you should check when updating your plugin for future version.

Cheers,
Tim

6

Tim,

I went ahead and swapped my editor to using React so it can be good for the future and everything works. I'll be sure to keep an eye on the API change blog posts.

Thanks for all of the help!
-Ethan

7

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