Creating custom input types using OptionsUIBuilder

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!

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 || ''}
    />
  );
};
1 Like