Creating custom input types using OptionsUIBuilder

[densoh]

Hi: I’m trying to create a DateTime input box using the OptionsUIBuilder, for plugin options. However, when I use the addCustomEditor method it shows the correct input field, but the data never gets saved into the data store. I’m calling the method like so:

export const plugin = new PanelPlugin<SimpleOptions>(StatusPanel).setPanelOptions(builder => {
  return builder
...
    .addCustomEditor({
      id: 'singleMaintenanceTime',
      editor: () => <Input type='datetime-local'/>,
      path: 'singleMaintenanceTime',
      name: 'Single Maintenance Time',
      description: 'Time for one-off maintenance',
      showIf: c => c.singleMaintenance
    })

Obviously the other data types such as addTextInput don’t have this issue, and I’m having trouble figuring out what I need to do to get it to save. Does anyone have any thoughts?

Thanks!

[marcusolsson]

In your example, the editor doesn’t know how to get the value of the Input.

The editor component accepts a value and a onChange that you can use to set the wrapped component (in your case Input).

Here’s an example of a DateInput editor that wraps an Input. I also added a placeholder to show how you can customize the editor for each option.

module.ts

.addCustomEditor({
  id: 'singleMaintenanceTime',
  path: 'singleMaintenanceTime',
  name: 'Single Maintenance Time',
  description: 'Time for one-off maintenance',
  showIf: c => c.singleMaintenance,
  editor: DateTimeInput,
  settings: {
    placeholder: 'yyyy-MM-dd',
  },
})

DateTimeInput.tsx

import React from 'react';

import { Input } from '@grafana/ui';
import { StandardEditorProps } from '@grafana/data';

interface Settings {
  placeholder: string;
}

interface Props extends StandardEditorProps<string, Settings> {}

export const DateTimeInput = ({ item, value, onChange }: Props) => {
  return (
    <Input
      value={value}
      onChange={e => onChange(e.currentTarget.value)}
      placeholder={item.settings?.placeholder || ''}
    />
  );
};