Groups and pages

Using groups in the survey layout can improve form navigation by organizing questions into collapsible sections under a group heading. In XLSForm, on the survey sheet, add a begin group and end group question pair in the type column, and add questions between them. In a survey with groups, you can use the pages style to create a separate page in the survey to contain each group of questions.

Appearance

By setting the appearance column of a begin group question to compact, a group of questions appears collapsed on startup and can be expanded by the user. This is useful for long surveys that can be difficult for the user to read and navigate.

Collapsed group compared to expanded group in the field app

The minimal appearance has no effect on group questions.

By setting the appearance of each begin group to field-list, each group displays on a separate page of the survey when the applicable style is set. For more information, see Pages.

By setting the width appearance using w followed by the number of columns used to divide a grid, groups in the survey can be set to display the contained questions in a grid layout when the applicable style is set. For more information, see Grid layout.

Note:

In Survey123 Connect, you can also set the following appearance for groups in surveys used with the Survey123 field app or Survey123 web app:

  • By setting the appearance of a begin group question to table-list, the select_one questions with a common choice list appear in a table format. The top row displays the choice list labels and the left column displays the question labels.

Table list appearance for a group with select_one questions in the field app

The table-list appearance does not support select_multiple questions and does not support media in choice lists. The table-list appearance will not function in a grid layout.

Pages

By setting the style column on the settings sheet to pages and the appearance of each begin group question to field-list, each group displays on a separate page of the survey. This is ideal for breaking down the display of your survey, organizing it, and decreasing load times.

Caution:

When using the pages style, each question in the survey must be in a group that uses the field-list appearance.

You can browse pages using the back and forward buttons at the bottom of the app. You can also select the page number to display an index of the pages. Select a page in the index to navigate directly to it.

Multiple pages in a single survey in the field app

Tip:

In the Survey123 field app, you can long press the back and forward buttons to skip to the start or end of the survey.

Grid layout

Note:

In Survey123 Mobile, only the fixed grid style is supported.

By setting the style column on the settings sheet to fixed-grid or dynamic-grid, groups in your survey can be set to display the contained questions in a grid. A grid layout can be applied to a page, group, or repeat by specifying the number of columns and the width of each question across the columns.

There are two styles of grid layout:

  • The fixed grid style creates a placeholder for each question, including those with a hidden appearance. A question will appear if its relevant conditions are met; otherwise, a blank space will occupy that place in the form.
  • The dynamic grid style allows questions and groups to move on the form depending on relevant conditions to make best use of the space on the device screen.

The grid layout style on the settings worksheet is a global setting that applies to the entire survey. You can also apply a grid layout style for individual groups or repeats, allowing different styles to be used for different parts of your survey. The global setting can be overridden by entering either of the following in the body::esri:style column of the group or repeat question:

  • layout=dynamic-grid
  • layout=fixed-grid

Set a group's width appearance to w followed by the number of columns used to divide your grid. For example, w4 divides each row of your grid into four columns. The width parameter can also be applied to a question within a group or repeat to control how many columns from the parent group or repeat the question should span. When the stated widths of the questions add up to the number of columns set for the group, the next questions will be on a new line. These widths can be set along with most other appearances.

In the following example, the width appearances for water temperature, dissolved oxygen, pH, and conductivity are each w1, and the width appearance for the water sample location is w2.

A group of questions formatted as a grid in the field app

In the following example, the group has a width of three columns (w3). In the first repeat, two columns are defined, and those two columns span two of the parent columns (w2:2). In the second repeat, two columns are defined, and those two columns span one of the parent columns (w2:1).

Nested repeat questions within a group in the spreadsheet

The following image shows how these nested repeats appear in the group on the form.

Nested repeat questions within a group in the field app

If the form will be used in the web app, add the width URL parameter for launching the web app, to ensure that the full screen width is used. In the following image, the group has a width of eight columns (w8); questions within the group have a width of w2, w3, or w5 to fill the page appropriately; and the survey URL has been appended with ?width=1 to use the full width of the browser.

Form filling the full width of the browser in the web app