:
Last modified: Jan 24, 2024

Group displayed as panel

Configuration details for groups displayed as panels

This concept is not available for version 4 of the App Frontend. See non-repeating groups for more information about how to visually group components.

Display group as part of Panel

On a Group component, the parameter panel can be set up. This says that the group should be displayed as part of the Panel component.

Here, you will recognize the appearance and settings that can be set on the panel component. Example configuration:

{
  "id": "input-panel-group",
  "type": "Group",
  "children": [
    "child1",
    "child2"
  ],
  "dataModelBindings": {},
  "textResourceBindings": {
    "title": "This is just a demo of input panel outside of repeating group",
    "body": "Here I just see that things work as expected."
  },
  "panel": {
    "variant": "info"
  }
}

Here the group has been set up to be displayed as a panel with the variant “info”. The setup is otherwise exactly the same as a regular group.

This will give the following output:

Group with panel
Group with panel

It is possible to configure the following settings in the panel field of a group:

ParameterRequiredDescription
variantYesWhich variant of panel the group should be placed in. Available values are “info”, “success” and “warning”
iconUrlNoIf you want your own icon as part of a panel, this can be set. Relative or full path, e.g. “awesomeIcon.png” or “http://cdn.example.com/awesomeIcon.png"
iconAltNoAlternate text for the custom icon. Can only be set if iconUrl has been set. Can be plain text or a reference to a text resource.

Example:

{
  "id": "input-panel-group",
  "type": "Group",
  "panel": {
    "variant": "info",
    "iconUrl": "kort.svg",
    "iconAlt": "Betalingskort ikon"
  }
}