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. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Navigate to Configuration > People > Account settings > Manage display.
  4. Click + Add field group.
  5. Select Tab as your group type.
  6. Enter Consumer Organization as the label.
  7. Click Save and continue.
  8. Set the default state to open. This sets the tab to be expanded by default.
  9. 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. Drag your new group from the disable section up into the higher section, just underneath Picture.
  2. Drag URL, Consumer Organization, and Consumer Organization URL underneath the Consumer Organization group row, and slightly to one side. It fixates itself underneath the parent, and this is now set as the child of that group.
  3. Click Save.Screen capture showing field ordering

You are now able to 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. Select Tab as your group type.
  4. Enter Personal Details as the label.
  5. Click Save and continue.Screen capture showing addition of Personal Details label
  6. Set the default state to 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 returned to the Manage Display page.

  1. Drag your new group from the disabled section up into the higher section, onto the highest row.
  2. Drag First Name, Last Name, User picture upload, and Avatar Generator to underneath the Personal Details group row. It fixates itself underneath the parent, and this is now set as the child of that group.
  3. Click Save.

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.