Field Group Component
Overview
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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product..
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.
What You'll Learn
After completing this article, you’ll know when to use a Field Group component, how to configure its settings, and how to use it in an Unqork application.
About the Configuration Window
Display Panel
Field Text
|
Setting |
Description |
|---|---|
|
Canvas Label Text |
A component’s Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas 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 Field Group components are disabled in Express View. Use this setting instead of disabling each component. By default, the Disable All Nested Fields toggle is set to . |
|
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, the Hide All Nested Fields toggle is set to . |
Advanced Panel
Additional Styling
|
Setting |
Description |
|---|---|
|
Custom CSS Class |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
Adding a Field Group Component
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.
What You Need
For this configuration, you'll need the following components:
-
1 Field Group component
-
4 Text Field components
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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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. |
|
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:
Resources
Overview
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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.. Here are some real-world examples of when you might use a Field Group component:
-
A stylized section of a page asking for personal information.
-
A boxed-in group of optional survey questions at the end of an application.
-
Grouped and hidden follow-up questions that appear when an end-user selects a specific answer.
-
Disabling or hiding all fields in a group.
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.
What You'll Learn
After completing this article, you’ll know when to use a Field Group component, how to configure its settings, and how to use it in an Unqork application.
About the Configuration Window
To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
Field Text
|
Setting |
Description |
|---|---|
|
Canvas Label Text |
A component’s Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas 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 Field Group components are disabled in Express View. Use this setting instead of disabling each component. By default, the Disable All Nested Fields toggle is set to . |
|
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, the Hide All Nested Fields toggle is set to . |
Advanced Panel
Additional Styling
|
Setting |
Description |
|---|---|
|
Custom CSS Class |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
Adding a Field Group Component
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.
What You Need
For this configuration, you'll need the following components:
-
1 Field Group component
-
4 Text Field components
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. |
| 3. | Click Save & Close. |
Configure the Text Field Components
Next, you'll use four Text Field components to hold your personal information questions. You'll place each component inside the Field Group component.
| 1. | Drag and drop four Text Field components onto your canvas, placing them inside the Field Group component. |
|
Property ID |
Label Text |
|---|---|
|
firstName |
First Name |
|
lastName |
Last Name |
|
companyName |
Company Name |
|
jobTitle |
Job Title |
| 3. | Save & Close each component as you add it. |
| 4. | Save your module. |
Your completed configuration looks like the following:
Resources
