Group displayed as panel

Configuration details for groups displayed as panels, and referencing group values in a panel

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:

Example:

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

Add element from separate repeating group

A use case one can imagine is that the user is asked to choose from an already filled out repeating group. One possible case is that the user is registering a set of suspicious transactions. Here, the user first enters a set of separate payment cards as a repeating group. Later on in the form, the user will choose elements from this group when adding a suspicious transaction. While filling out the suspicious transaction, the user remembers that they forgot to add a payment card, but do not wish to navigate all the way back to the original payment card group.

This is where the groupReference parameter comes in handy. This will open up for the possibility to add an element to a repeating group from the context from which you are using this list.

A picture to illustrate the use case:

In this fictitious case the groups are placed directly above each other, but imagine that these are filled out on different pages in the form. To achieve this setup, a group of elements are added to the repeating group that is set up with transactions (group-2) with a reference to the first group with payment cards (group-1). The following group component is one of the children of group-2:

{
  "id": "input-panel-group",
  "type": "Group",
  "maxCount": 3,
  "dataModelBindings": {
    "group": "Payment.Cards"
  },
  "textResourceBindings": {
    "title": "Legg til nytt betalingskort",
    "body": "Kortet du registrer vil bli lagret og tilgjengelig i resten av tjenesten.",
    "add_label": "Legg til nytt betalingskort"
  },
  "panel": {
    "showIcon": true,
    "iconUrl": "kort.svg",
    "variant": "success",
    "groupReference": {
      "group": "first-group"
    }
  }
}

The text resources that can be set are:

• title - panel title
• body - panel body. Placed above the group elements.
• add_label - text for the “add new”-button.

If children is not set on the group, the children of the referenced group will be rendered. By adding to children you can freely define that only a subset of all children of the referenced group should be displayed.

Demonstration:

See example app for complete setup in form layout.