densoh
January 27, 2021, 10:48pm
1
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
system
Closed
January 28, 2022, 8:25am
3
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.