Skip to content

WidgetInstanceEditor Type documentation

An editor component for a widget instance need to implement this interface. After initializing the instance editor component, with widget configuration is set. Optionally, the component can emit changes during editing to control e.g. the dialog behavior like disabling the save button.
Properties
The hosting component of the widget instance editor sets the configuration after initialization. The editor component should use the configuration as input and persist all relevant changes within the config. The hosting component takes the config after adding of saving the widget instance and updates the dashboard.
config: (WidgetConfig | Omit<WidgetConfig, "id"> | InputSignal<(WidgetConfig | Omit<WidgetConfig, "id">)>)
Optionally, emit updated widget configuration using an event emitter.
configChange?: (Subject<(WidgetConfig | Omit<WidgetConfig, "id">)> | OutputEmitterRef<(WidgetConfig | Omit<WidgetConfig, "id">)>)
Optionally, inform the hosting component about widget configuration status changes.
statusChanges?: (Subject<Partial<WidgetConfigStatus>> | OutputEmitterRef<Partial<WidgetConfigStatus>>)

Types Documentation

A WidgetConfig holds the configuration of a widget instance component that is visible on a dashboard. It can be persisted and used to restore a dashboards state.
Properties
Optional type of the accent line.
accentLine?: AccentLineType
actionBarViewType?: ViewType
Defines whether the widget instance component can be expanded and enlarged over the dashboard.
expandable?: boolean
grid item header text.
heading?: string
Height of the grid item, where number represents how many rows it takes. (default?: 1)
height?: number
A unique id of a widget instance
id: string
Optional configuration for an image to be displayed on the widget instance.
image?: WidgetImage
immutable?: boolean
Widget instance editor components can use this property to indicate an invalid configuration. True if the config is invalid. False, undefined or null indicate a valid configuration.
Deprecated: Use the statusChanges emitter to notify about configuration status changes.
invalid?: boolean
isNotRemovable?: boolean
maximum height allowed during resize/creation (default?: undefined = un-constrained)
minHeight?: number
minimum width allowed during resize/creation (default?: undefined = un-constrained)
minWidth?: number
A widget specific payload object. Placeholder to pass in additional configuration.
payload?: any
Optionally, the version widget description that was used to create the widget config.
version?: string
The id of the widget descriptor that was used to instantiate the WidgetConfig and the widget instance component.
widgetId: string
Width of the grid item, where number represents how many columns it spans (default?: 1)
width?: number
Grid item position on x axis of the grid (default?: 0)
x?: number
Grid item position on y axis of the grid (default?: 0)
y?: number
Object is used to inform the editor hosting component about configuration changes to configure (e.g. enable/disable) the control buttons accordingly.
Properties
If true, save or add button will be disabled.
invalid: boolean
Indicates that the configuration was changed. If true, canceling the editor will first show a dialog to confirm the discard.
modified: boolean
(StatusType | "caution" | "primary" | "inactive")
("collapsible" | "expanded" | "mobile")
Image is used to configure an image to be displayed on a widget instance.
Properties
The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the element is not loaded.
alt: string
Defines if an image is placed on top or start (left) of the card.
dir?: ("horizontal" | "vertical")
Sets the image object-fit CSS property.
objectFit?: ObjectFit
Sets the image object-position CSS property.
objectPosition?: string
The image URL (See ).
src: string
("success" | "info" | "warning" | "danger" | "caution" | "critical")
("contain" | "cover" | "fill" | "none" | "scale-down")
ObjectFit configuration options for a widget image.
See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Except where otherwise noted, content on this site is licensed under MIT License.