Skip to content

SiWidgetRendererComponent documentation

selector
si-widget-renderer

A presentational (dumb) component that renders a single widget instance from a WidgetConfig using the provided Widget definition. It delegates the actual rendering to the SiWidgetHostComponent .

Intended Usage

This component renders an individual widget outside of a dashboard or grid, without requiring manual host wiring. It is a self-contained widget cell that can be placed anywhere a single widget needs to be shown, for example in kiosk mode or within a custom layout such as a carousel.

Example

<!-- Render a single widget instance -->
<si-widget-renderer [widgetConfig]="widgetConfig" [widget]="widget" />

Input Properties

NameTypeDefaultDescription
widget
Required		WidgetThe Widget definition used to render the given widgetConfig . It must match the config's widgetId .
widgetConfig
Required		WidgetConfigThe configuration of the widget instance to render.

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?: 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
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, ("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")
(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.
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.