Tutorial: Adding a field group to group fields in a content type

You might want to change how your user account pages are displayed when you have lots of fields.

If you have many fields for one of your content types, for example, a user, then you might want to group some of these fields together when you display them to other users, or when these fields are being edited inside a user form.

Field groups allow you to create a parent field that contains other fields, set up as children, within that group. The Fieldgroup forms come with default HTML wrappers such as vertical tabs, horizontal tabs, accordions, fieldsets, or div wrappers.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial.

About this tutorial

You will create field groups for various groups of user information. These groups can then be seen under the users own section on the account view and edit pages.

This tutorial takes you through the following steps:
  1. Adding a field group called Consumer Organization to the user account display.
  2. Adding a field group called Personal Details to the user form display.

Adding a field group called Consumer Organization to the user account display

  1. Log in to your Developer Portal as an administrator.
  2. Navigate to Configuration > People > Account settings > Manage display.
  3. Click + Add field group.
  4. From the Add a new group list, select Tab.
  5. In the Label field, enter Consumer Organization.
  6. Click Save and continue.
  7. From the Default state list, select open. This sets the tab to be expanded by default.
  8. Click Create group.

    Screen capture showing group creation page

When the group is created, you can assign fields to that group and rearrange the group on the page. After you create the group, you are on the Manage Display page.
  1. Under Field, find Consumer organization and set the Region as Content.
  2. Under Field, find URL and set Region as Content, and Parent as Consumer organization.
  3. Repeat Step 2 for Consumer organization URL and Consumer organization.
  4. Click Save. The Consumer organization, URL, and Consumer organization URL fields are listed under the Consumer organization row. These are fields are now set as the children of the Consumer organization group.

    Page showing the group organization

You can now see the new group of fields on the account page of a user.

Screen capture showing new fields on account page

Adding a field group called Personal Details to the user form display

  1. Navigate to Configuration > People > Account settings > Manage form display.
  2. Click + Add field group.
  3. From the Add a new group list, select Tab.
  4. In the Label field, enter Personal Details.
  5. Click Save and continue.
  6. From the Default state list, select Open. This sets the tab to be expanded by default.
  7. Click Create group.

Again, when the group is created, you can assign fields to that group and then rearrange the group on the page as you require. After you create the group, you are redirected to the Manage Display page.

  1. Under Field, find Personal details and set the Region as Content to move it to the top of the list.
  2. Under Field, find First Name and set Parent as Personal details.
  3. Repeat Step 2 for Last Name, User picture upload, and Avatar Generator.
  4. Click Save. The First Name, Last Name, User picture upload, and Avatar Generator fields are listed under the Personal details row. These are fields are now set as the children of the Personal details group.

You and your user can now see the new grouped section when you edit their account.

Before:Screen capture showing initial field groups

After:Screen capture showing final field groups

What you did in this tutorial

You have successfully created field groups for various groups of user information, and presented them to the user in its own section on the account view and edit pages.

You can check whether your field groups are applied, by viewing the profile of another user. Do this check by finding any other users published content and clicking the associated avatar. Or, from the Administrator dashboard you can click People and then click a user. You can see the new Consumer Organization field group on their profile page. If you then click Edit for the user, you can see the Personal Details field group.

What to do next

You can edit the user displays anytime by navigating back to Configuration > People > Account settings > Manage display or Manage form display.

You can delete the field group by clicking the Delete button in the field group row on either of these pages. You can also modify the type of group it is, for example, vertical tabs, horizontal tabs, accordions, and field sets.