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
searchPlaceholder
TranslatableString$localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`Placeholder text for the search input field in the widget catalog.

Output Properties

NameTypeDescription
closed
(undefined | Omit<WidgetConfig, "id">)Emits when the catalog is closed , either by canceling or by adding or saving a widget configuration. On cancel undefined is emitted, otherwise the related widget configuration is emitted.

Attributes and Methods

NameTypeDefaultDescription
widgetCatalog
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.

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?: 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
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, ("width" | "height" | "minWidth" | "minHeight" | "heading" | "expandable" | "immutable" | "image" | "accentLine")>
An optional description that is visible in the widget catalog.
description?: string
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: string
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)
Factory type that is either a WidgetComponentTypeFactory , FederatedModule or WebComponent .
("success" | "info" | "warning" | "danger" | "caution" | "critical")
(CommonFactoryFields & { [ index: string ]: any } })
(CommonFactoryFields & LoadRemoteModuleOptions & { [ index: string ]: any } })
(CommonFactoryFields & { [ index: string ]: any } })
("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.
{ exposedModule: string, remoteEntry: string, remoteName: string, type: "script" }
{ exposedModule: string, remoteEntry: string, type: "module" }
{ exposedModule: string, remoteName: string, type: "manifest" }

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