Custom panel option editors

The simplest editor is a React component that accepts two props: and onChange. value contains the current value of the option, and onChange updates it.

The editor in the example below lets the user toggle a boolean value by clicking a button:

SimpleEditor.tsx

To use a custom panel option editor, use the addCustomEditor on the OptionsUIBuilder object in your file. Configure the editor to use by setting the editor property to the SimpleEditor component.

If you’re using your custom editor to configure multiple options, you might want to be able to customize it. Add settings to your editor by setting the second template variable of StandardEditorProps to an interface that contains the settings you want to be able to configure.

You can access the editor settings through the item prop. Here’s an example of an editor that populates a drop-down with a range of numbers. The range is defined by the from and properties in the Settings interface.

SimpleEditor.tsx

You can now configure the editor for each option, by configuring the settings property in the call to addCustomEditor.

Use query results in your panel option editor

The editor context is available through the context prop. The data frames returned by the data source are available under context.data.

SimpleEditor.tsx

Have you built a custom editor that you think would be useful to other plugin developers? Consider contributing it as a standard editor!