Skip to content

SiGridComponent documentation

selector
si-grid

The grid component is the actual component on which the widget instances are placed and visualized. You can think of a headless dashboard, without a title, toolbar or edit buttons.

Input Properties

NameTypeDefaultDescription
dashboardId
stringAn optional, but recommended dashboard id that is used in persistence and passed to the widget store for saving and loading data.
editable
booleanfalseSets the grid into editable mode, in which the widget instances can be moved, resized, removed or new ones added.
emitWidgetInstanceEditEvents
booleanfalseWhen the user clicks edit on a widget instance, an editor need to appear and the widget editor component need to be loaded. When the grid is used standalone, it takes care and opens a modal dialog and loads the configured widget editor component. When the grid is used in a container like the flexible dashboard, the container manages where the widget instance editor is displayed. In this case this options prevents the grid from showing the editor in the dialog, and emits on widgetInstanceEdit on clicking the widget edit action.
hideProgressIndicator
booleanfalseOption to turn off the loading spinner on save and load operations.
widgetCatalog
Widget[][]Provides the available widgets to the grid. When loading the widget configurations from the storage, we need to have the widget definition available to be able to create the widget instances on the grid.
widgetInstanceEditorDialogComponent
Type<SiWidgetInstanceEditorDialogComponent>Option to configure a custom widget instance editor dialog component. The component provides the editor hosting and the buttons to save and cancel.

Output Properties

NameTypeDescription
editableChange
booleanSets the grid into editable mode, in which the widget instances can be moved, resized, removed or new ones added.
isModified
booleanEmits the modification state of the grid. It is unmodified when the visible state is equal to the loaded state from the widget storage. When the user modifies the dashboard by e.g. while moving the widgets, the dashboard is marked as modified and emits true and when the user persists the change by saving, or reverts the state by canceling, the state is unmodified again and emits false .
widgetInstanceEdit
WidgetConfigEmits to notify about edit events of widget instances. Only emits if emitWidgetInstanceEditEvents is set to true .

Attributes and Methods

NameTypeDefaultDescription
addWidgetInstance(...)
(widgetInstanceConfig: Omit<WidgetConfig, "id">) => voidAdds a new widget instance configuration to the dashboard grid. It is not persisted yet and is added to the transient widget instances.

Parameters
cancel()
() => voidCancel current changes and restore last saved state.
edit()
() => voidSet dashboard grid in editable mode to modify widget instances.
editWidgetInstance(...)
(widgetInstanceConfig: WidgetConfig) => voidOpens the provided widget configuration in the related editor or emits on widgetInstanceEdit , if emitWidgetInstanceEditEvents is true.

Parameters
  • widgetInstanceConfig: WidgetConfig  The config of the widget instance to edit.
(readonly) gridConfig
InputSignal<(undefined | GridConfig)>inject(SI_DASHBOARD_CONFIGURATION)?.gridConfiguration options for a grid instance. Default is the optional value from the SI_DASHBOARD_CONFIGURATION .
(readonly) gridStackWrapper
Signal<SiGridstackWrapperComponent>viewChild.required(SiGridstackWrapperComponent)
(readonly) isLoading
BehaviorSubject<boolean>...Indication for load and save operations.
removeWidgetInstance(...)
(widgetInstanceId: string) => voidRemoves a widget instance from the visible widgets and puts it in the markedForRemoval array.

Parameters
  • widgetInstanceId: string  The id of the widget instance to be removed.
save()
() => voidPersists the current widget instances to the widget storage and changes the editable and isModified modes.
updateWidgetInstance(...)
(editedWidgetConfig: WidgetConfig) => voidUpdates the visible widgets with an updated configuration. Will update the user interface and emit on isModified .

Parameters
  • editedWidgetConfig: WidgetConfig  The config of the widget instance that was updated.
loadingService
Deprecated		SiLoadingServiceinject(SiLoadingService)Service used to indicate load and save indication.
Deprecated: Use isLoading instead.

Types Documentation

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
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
Configuration object for the si-grid component, including the options of gridstack.
Properties
The configuration options of gridstack.
gridStackOptions?: GridStackOptions
InjectionToken<Config> = ...
Variable
Injection token to configure dashboards. Use { provide: SI_DASHBOARD_CONFIGURATION, useValue: config } in your app configuration.
{ grid: GridConfig }
Dashboard configuration object. Inject globally using the SI_DASHBOARD_CONFIGURATION or configure individual dashboard instances.
(WidgetComponentTypeFactory | FederatedModule | WebComponent)
Factory type that is either a WidgetComponentTypeFactory , FederatedModule or WebComponent .
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
(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.
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>>)
(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
import
imported from gridstack
(CommonFactoryFields & { [ index: string ]: any } })
(CommonFactoryFields & LoadRemoteModuleOptions & { [ index: string ]: any } })
(CommonFactoryFields & { [ index: string ]: any } })
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
("success" | "info" | "warning" | "danger" | "caution" | "critical")
Widget storage api to provide the persistence layer of the widgets of a dashboard (typically from a web service). The dashboard grid uses this API to load and save the widget configurations. Applications using siemens-dashboard needs to implement this abstract class and provide it in the module configuration.
Constructor
() => {}
Properties
Optional method to provide primary and secondary toolbar menu items.
getToolbarMenuItems?: (dashboardId: string) => { primary: Observable<(MenuItem | DashboardToolbarItem)[]>, secondary: Observable<(MenuItem | DashboardToolbarItem)[]> }
Methods
(dashboardId: string) => Observable<WidgetConfig[]>
Returns an observable with the dashboard widget configuration. The dashboard subscribes to the observable and updates when a new value emits.
Parameters
dashboardId?: string
(widgets: (WidgetConfig | Omit<WidgetConfig, "id">)[], removedWidgets: WidgetConfig[], dashboardId: string) => Observable<WidgetConfig[]>
Saves the given widget configuration. Existing widgets have a id . New widgets have no id and it is in the responsibility of the implementor to set the ids of the new widgets. In addition, the implementor needs to check if objects that have been available before are missing. These widgets have been removed by the user. As a result of this method, the observables returned by the load() method should emit the new widget config objects, before also returning them.
Parameters
The existing and new widget config objects to be saved.
widgets: (WidgetConfig | Omit<WidgetConfig, "id">)[]
removedWidgets?: WidgetConfig[]
dashboardId?: string
(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.
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
("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
{ exposedModule: string, remoteEntry: string, remoteName: string, type: "script" }
{ exposedModule: string, remoteEntry: string, type: "module" }
{ exposedModule: string, remoteName: string, type: "manifest" }
<(T: ActionDialogBase<any>)> T extends AlertDialog ? AlertDialogResult : T extends ConfirmationDialog ? ConfirmationDialogResult : T extends EditDiscardDialog ? EditDiscardDialogResult : T extends DeleteConfirmationDialog ? DeleteConfirmationDialogResult : never
Returns the return value type for the given action dialog type
typeof ConfirmationDialogResult[ keyof typeof ConfirmationDialogResult]
typeof DeleteConfirmationDialogResult[ keyof typeof DeleteConfirmationDialogResult]
typeof EditDiscardDialogResult[ keyof typeof EditDiscardDialogResult]
(AlertDialog | ConfirmationDialog | EditDiscardDialog | DeleteConfirmationDialog | never)
All possible action dialogs.
extends ActionDialogBase<AlertDialogResult>
An action dialog showing an alert
Properties
Label of the confirmation button.
confirmBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: "confirm") => Observable<"confirm"> from ActionDialogBase.delayDismiss
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "alert"
typeof AlertDialogResult[ keyof typeof AlertDialogResult]
extends ActionDialogBase<ConfirmationDialogResult>
An action dialog for a confirmation.
Properties
Label of the confirmation button.
confirmBtnName?: TranslatableString
Label of the decline button.
declineBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: ConfirmationDialogResult) => Observable<ConfirmationDialogResult> from ActionDialogBase.delayDismiss
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "confirmation"
extends ActionDialogBase<EditDiscardDialogResult>
An action dialog for an edit/discard prompt.
Properties
Label of the cancel button.
cancelBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: EditDiscardDialogResult) => Observable<EditDiscardDialogResult> from ActionDialogBase.delayDismiss
Whether to disable the save button.
disableSave?: boolean
Label of the discard button when disableSave is set.
disableSaveDiscardBtnName?: TranslatableString
Message when disableSave is set.
disableSaveMessage?: TranslatableString
Label of the discard button.
discardBtnName?: TranslatableString
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Label of the save button.
saveBtnName?: TranslatableString
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "edit-discard"
extends ActionDialogBase<DeleteConfirmationDialogResult>
An action dialog for a delete confirmation.
Properties
Label of the cancel button.
cancelBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: DeleteConfirmationDialogResult) => Observable<DeleteConfirmationDialogResult> from ActionDialogBase.delayDismiss
Label of the delete button.
deleteBtnName?: TranslatableString
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "delete-confirm"
Properties
Optional environment Injector.
environmentInjector?: EnvironmentInjector
Optional element Injector.
injector?: Injector
Additional providers for the modal.
providers?: StaticProvider[]
{ Confirm: 'confirm', Decline: 'decline' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
{ Cancel: 'cancel', Delete: 'delete' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
{ Cancel: 'cancel', Discard: 'discard', Save: 'save' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
<T: never, CT: any>
Reference to a modal dialog
Constructor
() => {}
Properties
The default close value of the modal.
closeValue?: CT
The modal options passed during creation.
See SiModalService
data: ModalOptions = {}
detach: () => void = () =​> {}
Custom class for modal-dialog
dialogClass: string = ''
Emits the close value when the modal is hidden.
hidden: Subject<(undefined | CT)> = ...
Close the modal with a custom close value.
hide: (reason: CT) => void = () =​> {}
ignoreBackdropClick: boolean = true
isCurrent: () => boolean = () =​> false
The layer of the modal. The modal with the highest layer will be shown on top.
layer: number = 0
Allows messaging state to consumer w/o closing the dialog.
message: Subject<(undefined | CT)> = ...
Emits the modal element reference when it is shown.
shown: ReplaySubject<ElementRef<any>> = ...
Accessors
get content: T
Methods
(reason: CT) => void
When data.disableAutoHide is set, messages the reason , otherwise calls hide .
Parameters
reason?: CT
(input: string, value: unknown) => void
Set the input of a component shown in the modal.
Parameters
input: string
value: unknown
{ Confirm: 'confirm' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
<T: Record<string, any>> extends ModalDependencyInjectionOptions
Properties
Whether to enable animation.
animated?: boolean
aria-labelled-by value.
ariaLabelledBy?: string
Additional CSS class.
class?: string
Optional environment Injector.
environmentInjector?: EnvironmentInjector from environmentInjector
When set to true, clicking the backdrop has no effect.
ignoreBackdropClick?: boolean
Assign all values to the target component using Object.assign(component, initialState) .
Deprecated: Use inputValues instead.
initialState?: Partial<T>
Optional element Injector.
injector?: Injector from injector
Use this to assign values to either @Input() or input() fields of the provided component. If a template is used, the values are available in the template context.
inputValues?: Record<string, unknown>
Handle Esc to close/message.
keyboard?: boolean
When set to true, backdrop click or Esc don't close the modal. Instead a message will be sent.
messageInsteadOfAutoHide?: boolean
Additional providers for the modal.
providers?: StaticProvider[] from providers
(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.
Translatable
import
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
(DashboardToolbarItemAction | DashboardToolbarItemRouterLink | DashboardToolbarItemLink)
Union type for all possible items in the dashboard toolbar.
extends MenuItemBase
Properties
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: MenuItem[]
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "action"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the checkbox is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "checkbox"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the radio is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "radio"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
Interface representing an action item in the dashboard toolbar.
Properties
Action that called when the item is triggered.
action: (grid: SiGridComponent) => void
Label that is shown to the user.
label: TranslatableString
type: "action"
Properties
Badge that is rendered after the label.
badge?: (string | number)
Color of the badge (not iconBadge).
badgeColor?: string
Whether the menu item id disabled.
disabled?: boolean
Optional icon that will be rendered before the label.
icon?: string
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean)
ID that will be attached to the DOM node.
id?: string
Label that is shown to the user.
label: TranslatableString
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
Used in events emitted from SiLinkActionService
Properties
param: any
implements OnInit, OnChanges, OnDestroy
The grid component is the actual component on which the widget instances are placed and visualized. You can think of a headless dashboard, without a title, toolbar or edit buttons.
Constructor
() => {}
Properties
An optional, but recommended dashboard id that is used in persistence and passed to the widget store for saving and loading data.
dashboardId: InputSignal<(undefined | string)> = ...
Sets the grid into editable mode, in which the widget instances can be moved, resized, removed or new ones added.
editable: ModelSignal<boolean> = false
This is the internal owner of the current editable state and is used to track if editable or not. Not editable can be changed by either calling the edit() api method or by setting the editable input. When setting the input, the ngOnChanges(...) hook is used to call the edit() method. Similar, to get from editable to not editable, cancel() or save() is used and can be triggered from ngOnChanges(...) .
editableInternal: boolean = false
When the user clicks edit on a widget instance, an editor need to appear and the widget editor component need to be loaded. When the grid is used standalone, it takes care and opens a modal dialog and loads the configured widget editor component. When the grid is used in a container like the flexible dashboard, the container manages where the widget instance editor is displayed. In this case this options prevents the grid from showing the editor in the dialog, and emits on widgetInstanceEdit on clicking the widget edit action.
emitWidgetInstanceEditEvents: InputSignal<boolean> = false
Configuration options for a grid instance. Default is the optional value from the SI_DASHBOARD_CONFIGURATION .
gridConfig: InputSignal<(undefined | GridConfig)> = inject(SI_DASHBOARD_CONFIGURATION)?.grid
gridService: SiGridService = ...
gridStackWrapper: Signal<SiGridstackWrapperComponent> = viewChild.required(SiGridstackWrapperComponent)
Option to turn off the loading spinner on save and load operations.
hideProgressIndicator: InputSignal<boolean> = false
initialLoad: boolean = true
Indication for load and save operations.
isLoading: BehaviorSubject<boolean> = ...
Emits the modification state of the grid. It is unmodified when the visible state is equal to the loaded state from the widget storage. When the user modifies the dashboard by e.g. while moving the widgets, the dashboard is marked as modified and emits true and when the user persists the change by saving, or reverts the state by canceling, the state is unmodified again and emits false .
isModified: OutputEmitterRef<boolean> = ...
Service used to indicate load and save indication.
Deprecated: Use isLoading instead.
loadingService: SiLoadingService = inject(SiLoadingService)
All widget instance configurations that are removed from the grid in edit mode. These instances are persistently removed on save or re-added again on cancel.
markedForRemoval: WidgetConfig[] = []
modalService: SiModalService = ...
Modified state that is emitted in the isModified output. Should only be changed using the setModified method.
modified: boolean = false
All widget instance configs that are on the grid by loading from the widget storage. Thus, these widget are persisted.
persistedWidgetInstances: WidgetConfig[] = []
storeSubscription?: Subscription
Widget instance configs that are added to the grid in edit mode, but not persisted yet, as the user did not confirm the modification by save.
transientWidgetInstances: WidgetConfig[] = []
All widget configuration objects of the visible widget instances.
visibleWidgetInstances$: BehaviorSubject<WidgetConfig[]> = ...
Provides the available widgets to the grid. When loading the widget configurations from the storage, we need to have the widget definition available to be able to create the widget instances on the grid.
widgetCatalog: InputSignal<Widget[]> = []
Emits to notify about edit events of widget instances. Only emits if emitWidgetInstanceEditEvents is set to true .
widgetInstanceEdit: OutputEmitterRef<WidgetConfig> = ...
Option to configure a custom widget instance editor dialog component. The component provides the editor hosting and the buttons to save and cancel.
widgetInstanceEditorDialogComponent: InputSignal<(undefined | Type<SiWidgetInstanceEditorDialogComponent>)> = ...
widgetStorage: SiWidgetStorage = ...
Accessors
get showEmptyState: boolean
Methods
(widgetInstanceConfig: Omit<WidgetConfig, "id">) => void
Adds a new widget instance configuration to the dashboard grid. It is not persisted yet and is added to the transient widget instances.
Parameters
The new widget configuration.
widgetInstanceConfig: Omit<WidgetConfig, "id">
Cancel current changes and restore last saved state.
cancel: () => void
Set dashboard grid in editable mode to modify widget instances.
edit: () => void
(widgetInstanceConfig: WidgetConfig) => void
Opens the provided widget configuration in the related editor or emits on widgetInstanceEdit , if emitWidgetInstanceEditEvents is true.
Parameters
The config of the widget instance to edit.
widgetInstanceConfig: WidgetConfig
(event: GridWrapperEvent) => void
Parameters
event: GridWrapperEvent
loadAndSubscribeWidgets: () => void
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
(widgetInstanceId: string) => void
Removes a widget instance from the visible widgets and puts it in the markedForRemoval array.
Parameters
The id of the widget instance to be removed.
widgetInstanceId: string
Persists the current widget instances to the widget storage and changes the editable and isModified modes.
save: () => void
(modified: boolean) => void
Parameters
modified: boolean
(editedWidgetConfig: WidgetConfig) => void
Updates the visible widgets with an updated configuration. Will update the user interface and emit on isModified .
Parameters
The config of the widget instance that was updated.
editedWidgetConfig: WidgetConfig
(widgetConfigs: WidgetConfig[]) => WidgetConfig[]
Parameters
widgetConfigs: WidgetConfig[]
implements OnInit, OnDestroy
The Dialog component is utilized when editing a widget instance within a dashboard. It dynamically loads and creates the associated widget editor and incorporates it into its content. The dialog component is accountable for interacting with the dashboard and offers options for saving changes or terminating the editing process.
Constructor
() => {}
Properties
Emits the edited widget instance configuration if the user confirms by saving, or undefined if the user cancels the dialog.
closed: OutputEmitterRef<(undefined | WidgetConfig)> = ...
dialogService: SiActionDialogService = ...
disableNextButton: Signal<boolean> = ...
disablePreviousButton: Signal<boolean> = ...
editorHost: Signal<ViewContainerRef> = ...
Emits when the editor instantiation is completed.
editorSetupCompleted: OutputEmitterRef<void> = ...
editorWizardState: WritableSignal<(undefined | WidgetInstanceEditorWizardState)> = ...
envInjector: EnvironmentInjector = ...
injector: Injector = ...
Indicates if the current config is valid or not. If invalid, the save button will be disabled.
invalidConfig: WritableSignal<boolean> = ...
labelCancel: TranslatableString = ...
labelDialogCancel: TranslatableString = ...
labelDialogDiscard: TranslatableString = ...
labelDialogHeading: TranslatableString = ...
labelDialogMessage: TranslatableString = ...
labelDialogSave: TranslatableString = ...
labelNext: TranslatableString = ...
labelPrevious: TranslatableString = ...
labelSave: TranslatableString = ...
showNextButton: Signal<boolean> = ...
showPreviousButton: Signal<boolean> = ...
subscriptions: (OutputRefSubscription[] | Subscription[]) = []
Input for the widget definition. It is required to retrieve the component factory to instantiate the widget editor.
widget: InputSignal<Widget> = ...
Input for the widget instance configuration. It is used to populate the widget editor.
widgetConfig: ModelSignal<WidgetConfig> = ...
Marks the widget configuration as modified. Is set when widget editor instance emits configChange events. Triggers edit discard confirmation dialog when widget config is modified but not dialog is canceled.
widgetConfigModified: WritableSignal<boolean> = ...
widgetInstanceEditor?: WidgetInstanceEditor
Methods
(statusChanges: Partial<WidgetConfigStatus>) => void
Parameters
statusChanges: Partial<WidgetConfigStatus>
(editor: (WidgetInstanceEditor | WidgetInstanceEditorWizard)) => editor is WidgetInstanceEditorWizard
Parameters
editor?: (WidgetInstanceEditor | WidgetInstanceEditorWizard)
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
onCancel: () => void
onNext: () => void
onPrevious: () => void
onSave: () => void
tearDownEditor: () => void
Constructor
() => {}
Properties
Counts the number of loads active, is 0 when all loading is finished (or hasn't started).
counter: BehaviorSubject<number> = ...
Methods
Start the loading.
startLoad: () => void
Stop the loading.
stopLoad: () => void
The service provides convenient methods to show common modal dialogs. All return an observable, which emit the dialog results. After emitting, the observables complete. Therefore, clients do not need to unsubscribe.
Constructor
() => {}
Properties
modalService: SiModalService = ...
Methods
<(T: ActionDialog)> (dialog: T, diOptions: ModalDependencyInjectionOptions) => Observable<ActionDialogReturnType<T>>
Shows an action dialog
Returns Observable for the result of the dialog. Need to subscribe() to show the dialog
Parameters
The dialog configuration
dialog: T
Optional DI configuration.
diOptions?: ModalDependencyInjectionOptions
(message: string, heading: string, confirmBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<"confirm">
Show an alert dialog.
Deprecated: use showActionDialog({ type: 'alert', ... }) instead
Parameters
message: string
heading?: string
confirmBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
(message: string, heading: string, confirmBtnName: string, declineBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<ConfirmationDialogResult>
Show a confirmation dialog.
Deprecated: use showActionDialog({ type: 'confirmation', ... }) instead
Parameters
message: string
heading?: string
confirmBtnName?: string
declineBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
(message: string, heading: string, deleteBtnName: string, cancelBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<DeleteConfirmationDialogResult>
Show a dialog confirming a deletion.
Deprecated: use showActionDialog({ type: 'delete-confirm', ... }) instead
Parameters
message?: string
heading?: string
deleteBtnName?: string
cancelBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
(disableSave: boolean, message: string, heading: string, saveBtnName: string, discardBtnName: string, cancelBtnName: string, disableSaveMessage: string, disableSaveDiscardBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<EditDiscardDialogResult>
Show an edit dialog with the option to discard.
Deprecated: use showActionDialog({ type: 'edit-discard', ... }) instead
Parameters
disableSave?: boolean
message?: string
heading?: string
saveBtnName?: string
discardBtnName?: string
cancelBtnName?: string
disableSaveMessage?: string
disableSaveDiscardBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
Constructor
() => {}
Properties
appRef: ApplicationRef = ...
environmentInjector: EnvironmentInjector = ...
injector: Injector = ...
modalsCount: number = 0
overlay: Overlay = ...
Methods
<T, CT> (modalRef: ModalRefImpl<T, CT>) => ComponentRef<SiModalComponent>
Parameters
modalRef: ModalRefImpl<T, CT>
buildInjector: () => Injector
(modalRef: ModalRef<unknown, any>) => void
Parameters
modalRef: ModalRef<unknown, any>
<T, CT> (injector: Injector, modalRef: ModalRefImpl<T, CT>) => Node[][]
Parameters
injector: Injector
modalRef: ModalRefImpl<T, CT>
<T, CT: any> (content: (TemplateRef<any> | (args: any[]) => {}), config: ModalOptions<T>, closeValue: CT) => ModalRef<T, CT>
Shows a modal with the given content and configuration.
Returns A reference to the modal.
Parameters
Content to be displayed in the modal can be a template reference or a component.
content: (TemplateRef<any> | (args: any[]) => {})
Configuration for the modal.
config: ModalOptions<T>
Default closing value which can be overridden by calling modalRef.hide(value) .
closeValue?: CT
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(undefined | readonly (MenuItem | MenuItem)[])> = ...
linkActionService: (null | SiLinkActionService) = ...
menuActionService: (null | SiMenuActionService) = ...
Methods
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: MenuItem) => void
Parameters
item: MenuItem
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
Constructor
() => {}
Properties
Observable which emits the link and param to run the action on.
action$: Observable<LinkAction> = this.actionSubject.asObservable()
actionSubject: Subject<LinkAction> = ...
Methods
(link: Link, param: any) => void
Emit a new link and param pair to run the action on.
Parameters
param: any

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