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:
It is possible to configure the following settings in the panel field of a group:
| Parameter | Required | Description |
|---|---|---|
| variant | Yes | Which variant of panel the group should be placed in. Available values are “info”, “success” and “warning” |
| iconUrl | No | If 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" |
| iconAlt | No | Alternate 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"
}
}