Skip to content

WidgetInstanceEditorWizard Type documentation

extends WidgetInstanceEditor
A widget instance editor component that shall support a multi-page widget configuration can implement this interface. The wizard-like page state WidgetInstanceEditorWizardState needs to be managed by the editor itself and is used to control wizard dialog buttons that are provided by the catalog and editor component.
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">)>) from config
Optionally, emit updated widget configuration using an event emitter.
configChange?: (Subject<(WidgetConfig | Omit<WidgetConfig, "id">)> | OutputEmitterRef<(WidgetConfig | Omit<WidgetConfig, "id">)>) from configChange
The current state of the multi-page widget instance editor. The state is access after #next() or #previous() is invoked.
state: WidgetInstanceEditorWizardState
Emit changes as needed during the user interaction with the editor.
stateChange?: (Subject<WidgetInstanceEditorWizardState> | OutputEmitterRef<WidgetInstanceEditorWizardState>)
Optionally, inform the hosting component about widget configuration status changes.
statusChanges?: (Subject<Partial<WidgetConfigStatus>> | OutputEmitterRef<Partial<WidgetConfigStatus>>) from statusChanges
Methods
Is invoked from the next button. Display next page as consequence. For web components, implementing next() requires adding an event listener for the next event on the element.
next: () => void
Is invoked from the previous button. Display previous page as consequence. For web components, implementing previous() requires adding an event listener for the previous event on the element.
previous: () => void

Types 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>>)
State to control the behavior of a widget instance editor wizard. The wizard state is used to control the behavior of the dialog buttons provided by the catalog and editor components.
Properties
disableNext?: boolean
hasNext: boolean
hasPrevious: boolean
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
(WidgetConfig | Omit<WidgetConfig, "id"> | InputSignal<(WidgetConfig | Omit<WidgetConfig, "id">)>)
Property
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.
(Subject<(WidgetConfig | Omit<WidgetConfig, "id">)> | OutputEmitterRef<(WidgetConfig | Omit<WidgetConfig, "id">)>)
Property
Optionally, emit updated widget configuration using an event emitter.
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
(Subject<Partial<WidgetConfigStatus>> | OutputEmitterRef<Partial<WidgetConfigStatus>>)
Property
Optionally, inform the hosting component about widget configuration status changes.
(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.