Field Group Component

The Field Group component lets you organize fields and components together in one group. Field Group components are like Panel components, but you won't use Field Group components for navigation. You can also apply a CSS style to a Field Group component to call the group out to your end-user.

It’s best practice to only use Panel components for navigation. So, if you want the fields to display on their own page, you'll use a Panel component. Use the Field Group component if you want a stylized group of fields as part of a larger page.

You'll find the Field Group component under the Display & Layout group to the left of the Module Builder.

To learn more about general component settings, view our General Component Settings article.

Field Text

A static image displaying the UDesigner Field Group Component's Display settings.

Setting

Description

Canvas Label Text

A component’s Label Text indicates the purpose of the corresponding field or component. For non-input components, the Label Text isn't end-user facing, and only appears in the Module Builder.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Default State Options

Setting

Description

Disable All Nested Fields

When set to  (ON), all the components inside the Field Group component are disabled in Express View. Use this setting instead of disabling each component.

By default, this setting is set to (OFF).

Hide All Nested Fields

When set to  (ON), all components inside the Field Group component are hidden in Express View. Use this setting instead of hiding each component.

By default, this setting is set to (OFF).

In this example, you'll use a Field Group component to group fields that gather personal information. These instructions assume that you have an open module saved with a title.

Configure the Field Group Component

First, add the Field Group component to your canvas. This component holds personal information questions.

1. In the Module Builder, drag and drop a Field Group component onto your canvas.
2. In the Property ID field, enter fgPersonalInfo.
3. In the Canvas Label Text field, enter fgPersonalInfo.
4. Click Save Component.

Configure the Text Field Components

Next, add four Text Field components to hold personal information questions. Place each component inside the fgPersonalInfo Field Group component.

1. Drag and drop four  Text Field components onto your canvas, placing them inside the fgPersonalInfo Field Group component.
2. In the Property ID and Label Text fields of each component, enter the following:

Property ID

Label Text

firstName

First Name

lastName

Last Name

companyName

Company Name

jobTitle

Job Title

3. Click Save Component for each component as you add it.
4.  Save  your module.

Your completed configuration looks like the following: