Skip to content

SiWidgetCatalogComponent documentation

selector
si-widget-catalog

Default widget catalog implementation to show all available widgets that can be added to a dashboard. It consists of a list view, that lists all available widgets and after selection, a host in which the widget specific editor is loaded. Applications can either stay with the default catalog or implement their own by extending this class.

Input Properties

NameTypeDefaultDescription
multiSelect
booleanfalseOption to enable multi-select in the widget catalog. When enabled, the user can select multiple widgets to add to the dashboard at once.
searchPlaceholder
TranslatableString$localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search…`Placeholder text for the search input field in the widget catalog.

Output Properties

NameTypeDescription
closed
(Omit<WidgetConfig, "id">[] | undefined)Emits when the catalog is closed , either by canceling or by adding or saving widget configurations. On cancel undefined is emitted, otherwise an array of the related widget configurations is emitted. In single-select mode the array always contains exactly one entry.

Attributes and Methods

NameTypeDefaultDescription
ngOnDestroy()
() => voidA callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
(readonly) widgetList
WritableSignal<Widget[]>[]Property to provide the available widgets to the catalog. The flexible dashboard creates the catalog by Angular's createComponent() method and sets the available widgets to this attribute.
widgetCatalog
Deprecated		Widget[][]Property to provide the available widgets to the catalog. The flexible dashboard creates the catalog by Angular's createComponent() method and sets the available widgets to this attribute.
Deprecated: This property will be removed in v52. Use the signal widgetList instead.

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
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?: TranslatableString
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
isNotRemovable?: boolean
minimum 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
If true, the widget host renders a placeholder and waits for explicit configuration before instantiating the widget instance component.

Indicates that initial setup by the user is still pending. The flag flips to false once the setup has been completed.
setupPending?: boolean
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
Widgets describe the entries within the widget catalog and holds all default configuration and factory functionality to instantiate a widget instance, represented as WidgetConfig objects.
Properties
The factory to instantiate a widget instance component that is added to the dashboard.
componentFactory: WidgetComponentFactory
Optional default values that can be set to widget instances.
defaults?: Pick<WidgetConfig, ("height" | "width" | "minHeight" | "minWidth" | "image" | "heading" | "accentLine" | "expandable" | "immutable")>
An optional description that is visible in the widget catalog.
description?: TranslatableString
A CSS icon class that specifies the widget icon, displayed in the catalog.
iconClass?: string
A unique id of the widget.
id: string
The name of the widget that is presented in the widget catalog.
name: TranslatableString
Optional default payload object that is copied into every widget instance WidgetConfig .
payload?: any
An optional version string.
version?: string
(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
(WidgetComponentTypeFactory | FederatedModule | WebComponent | FederatedBridgeModule)
("success" | "info" | "warning" | "danger" | "caution" | "critical")
(CommonFactoryFields & (ModuleOptions | StandaloneOptions))
(CommonFactoryFields & LoadRemoteModuleOptions & { [ index: string ]: any } })
Factory configuration for loading widget components from a federated module. Supports both Module Federation and Native Federation patterns for micro-frontend architectures. Use this when the widget component is hosted in a separate, independently deployed application.
(CommonFactoryFields & { [ index: string ]: any } })
(CommonFactoryFields & LoadRemoteBridgeOptions & { [ index: string ]: any } })
Use this when having native federation shell and remote module is using module federation.
("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
(LoadRemoteModuleScriptOptions | LoadRemoteModuleEsmOptions | LoadRemoteModuleManifestOptions)
The Remote Module definition is based on @angular-architects . We take it over into this file to prevent adding a hard dependency.
Definition is based on @module-federation/enhanced loadRemote options. We take it over into this file to prevent adding a hard dependency.

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