Learn how to group field widgets so your content form can be organized.
We’ll cover the following:
- Download and install Field Group
- Grouping widgets as field sets
- Configuring group widgets
- Groups widgets to the right-hand side
- Group widgets as tabs.
Composer command
composer require drupal/field_groupTranscript
Trainer (00:00):
As you attach more fields to your content type, the size of your form will grow as well. And eventually these forms become difficult to use because there are lots of fields. And if we take a look at our product content form right here, you can see that there are a lot of fields and they aren’t really organised in any meaningful way. Let’s fix this up by using a third party module called field group, which allows you to group and organise field widgets as well as field formatters. The module allows you to group fields into tabs, accordions, field sets, and more. And this module will allow us to organise the field widgets on the product content form. To learn more about the module, just head over to drupal.org/project/field_group. Let’s start things off by downloading the module. So jump over to your terminal and using composer, typing the following command, composer require Drupal/field_group. And then jump over to your Drupal site, and I’ll close this tab and then go to extend and search for field group. And then enable the field group module and then click on install.
Trainer (01:24):
Now let’s organise and group the widgets on the product content form. Go to structure, content types, and then click on manage form display on the product row. And you should see a new button called add field group. If you can’t see this button and you’re certain that you’ve installed the module, then clear the cache and see if that makes it visible. Click on add field group. And from the add a new group dropdown, you will see all of the available group types. And the first one I want to show you how to use is details. So click on it and then enter product details into the label field and click on save and continue. From this form, you can configure the group, but we can change this later on. So for now, click on create group, then scroll down to the disabled section and you should see the product details field group, which we just created. Click on it and let’s move it all the way to the top just below title.
Trainer (02:25):
And to group fields under this product details, all we need to do is place the field under this group. So I’ll click on product summary and then place it under product details and I’ll do the same for price. And then scroll down and click on save. Now let’s go to the product content form page, which I have opened up in this first tab, and take note of the product summary and price field right here. If we refresh, we can now see that the product summary and price has been grouped and placed into this product details group. And then to view the fields, you just need to expand product details. So this is one way you can group and organise your field widgets. If we refresh again, you can see that this group is collapsed by default. We can change this option so it’s opened by default. To change this, let’s go back to our manage form display and then click on the cog wheel on the group type.
Trainer (03:29):
And then from these settings, you can change the field group label, description, and most importantly, you can display element open by default. This will make sure that the field group is opened by default. And you can also add in an ID and CSS classes. Once you’ve configured everything, just click on update and then scroll down and click on save. And then if we jump back to our product form and refresh. Now the field group is opened by default. Another way to organise fields is to add some of them to the right hand side. Now, most of the fields here on the right are hard coded, but we can create a group type and have fields displayed on the right. Let’s jump back to the manage form display, and then click on add field group. And from the add a new group dropdown, select details sidebar, and then in label entering product options and click on save and continue. And then just click on create group.
Trainer (04:34):
And then if we scroll down, we should see the product options right down here. And let’s move it below product details and let’s add the product category, field, and product tags. And we’ll also grab the product type and move that in as well. And then if we scroll down and click on save, and then jump back to our product form and refresh, we should see the product options field group here on the right. And if we jump back to the manage form display and click on the cog wheel on product options, you can see that we pretty much have the same options as the other field group, but here we can configure the weight. And this allows us to control where this field group will be displayed on the right hand side. So if we were to change this to 100 and then click on update, and then click on save, and then if we jump back to the product form and refresh, you should see the product options right down at the bottom.
Trainer (05:45):
Another common way to organise field widgets is to group them using tabs. And this is my favourite way to organise widgets. Let’s jump back to the manage form display and then click on add field group and click on the add a new group dropdown. And you can see that we have two tab group types. One is called tab and the other is called tabs with an S. For every tab we want to create, we’ll need to create a tab field group. And then to group all the tabs together, we’ll need to create a tabs field group. Trust me, this will all make sense in a second. So for now, just select tabs and then enter tabs into label, this label won’t be shown anywhere. So don’t worry too much what you call it. And you can also change it later on. So click on save and continue.
Trainer (06:41):
Then from the direction dropdown you can select if the tabs will be shown vertically, along the side, or horizontally, which is along the top. Let’s select horizontal and then click on create group. And then scroll down and move the tabs group all the way to the top below title and then move product details under tabs and product options under tabs as well. And now let’s change product details to tab and also product options from detail sidebar to tab as well. And then scroll down and click on save. This is important to remember when you are creating tabs. Make sure you have a tabs parent group, and then add the individual tab groups below.
Trainer (07:39):
Let’s jump back to the product form. And if we refresh, now take notes of product details and product options. And now these field groups are displayed as tabs. So here we have product details and if we click on product options, we can see the three widgets inside product options. If you want to create a third tab, all you need to do is go to manage form display, click on add field group and create a tab field group, and then add all the required fields into that tab field group. And then make sure you nest that tab under these parent tabs with an S field group. Then if you come back to the product content form, you should see the third tab displayed right here.