Screen groups

What is a screen group?

A screen group in ArcGIS Experience Builder is a layout container that can contain multiple screens. It is used to organize content and widgets on scrolling pages. Each screen within a screen group has a main stage, and some screen groups may also include scrolling panels.

When a user scrolls to a screen group, it occupies the entire height of the screen. If the screen group has scrolling panels, the main stage remains in place while the user scrolls through the content in the panels. The main stage only changes when the last panel scrolls away. If there are no panels, the main stage remains in place until it has scrolled one full screen height.

How to work with a screen group

To add and configure a screen group in your application, follow these steps:

1. Navigate to the canvas where you want to add the screen group.
2. Click the Insert screen group button on the canvas.
3. Select a screen group template from the gallery.
4. Configure its properties such as the number of screens and layout options.
5. Click the Add screen button within the screen group to add new screens as needed.

Screen group templates

Here are some of the templates available in a screen group.

AppConfig for screen groups

In the appConfig object, screen groups are defined under the screenGroups property which represents an object with a unique screenGroupId. The screenGroups property contains an array of screen group objects, each representing a screen group added to your application. Each screen group object includes configuration details for screens, such as their screenId, name, and layout.

Here is an example of how a screen group might be defined in the appConfig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "screenGroups": {
    "screenGroup1": {
      "screenGroupId": "screenGroup1",
      "screens": [
        {
          "screenId": "screen1",
          "name": "Screen 1",
          "layout": {
            "mainStage": {
              "type": "mainStage",
              "height": 600
            },
            "panels": [
              {
                "type": "scrollingPanel",
                "height": 300
              }
            ]
          }
        },
        {
          "screenId": "screen2",
          "name": "Screen 2",
          "layout": {
            "mainStage": {
              "type": "mainStage",
              "height": 600
            }
          }
        }
      ]
    }
  }
}