Skip to content

Config: UI Group ui-group

Each group is rendered within a ui-page as part of a Layout. Each layout will differ in how those groups are rendered, but fundamentally, a group is a collection of widgets, and generally has a label to categorise the contents of a single group.

Properties

PropDescription
NameDescriptive name for this group, will show in the Node-RED Editor and as a label in the Dashboard.
PageThe Page (ui-page) that this group will render on.
TypeControls whether the group appears as a default group or as a dialog, which needs to be triggered manually using ui-control. You can choose between 'Default' and 'Dialog' types.
SizeThe width and height of the group. Height will always be reinforced by this value, the height is generally a minimum height, and will extend to fit it's content.
ClassAny custom CSS classes you wish to add to the Group.
Default State
  • Visibility - Defines the default visibility of this group.
  • Interactivity - Controls whether the group and it's contents are disabled/enabled when the page is loaded.

Both of these can be overridden by the user at runtime using a ui-control node.

Type

Defines how the group will be displayed. Either as a regular (Default) group or as a Dialog group. A 'Default' group is visible by default, while a 'Dialog' group must be triggered manually using the ui-control node (see documentation). You can choose between these two options based on your layout needs.

Default Groups

Example of how the type 'Default' option looksExample of how the type 'Default' option looks

Dialog Groups

Example of how the type 'Dialog' option looksExample of how the type 'Dialog' option looks