Add Widgets to Sidebar using Field Group in Drupal

📧Get notified when new tutorials are published. Subscribe to our newsletter.

The Field Group module allows you to organize field widgets and formatters. You can group them into tabs, fieldsets and so on. It’s a great way to organize your content form, especially if you have a lot of widgets.

Want to learn more about Field Group: How to Customize Content Forms and Pages Using Field Group in Drupal

This tutorial will teach you how to add field widgets to the right sidebar on the content edit form.

If you create an article, you’ll notice that custom field widgets appear on the left. But on the right-hand side, you can control things such as menus, comments, URL alias and more.

We’ll use Field Group to add Tags and Image field on the Article content type into its own section on the right-hand side.

Getting Started

Before we can begin, go download and install Field Group.

Run the following Composer command:

composer require drupal/field_group

Go to Extend and install Field Group.

Create Sidebar Section

Once you’ve downloaded the module and installed it, let’s customize the widgets on the article content type.

1. Go to Structure, “Content types” and click on “Manage form display” on the article row.

2. Click on “Add Field Group” and select “Details Sidebar” from “Add a new group” drop-down. Add “Article extra” into Label.

Then click “Save and continue”.

Note: If you can’t see the “Add Field Group” button, make sure the module is installed.

3. On the next page, add “Tags and Image” into Description and click on “Create group”.

Add Widgets to Sidebar Section

At this point we have created the field group now let’s add widgets to it.

1. From the “Manage form display”, you should see the group in the Disabled section.

2. Move “Article extra” above Tags and add Tags and Image below it. Make sure it’s indented.

3. Scroll down and click on Save

Sidebar Section on Article

Go to the article content form and see the Tags and Image field inside of “Article extra” on the right-hand side.

Change Group Settings

Go back to the “Manage form display” and click the cog-wheel on the group.

This will open a settings form where you can modify the group.

Open by Default

If you want the section to be open by default, simply check “Display element open by default”.

Change Order of Section

You can adjust the placement of the section by changing the Weight value. By default it’s set to 0.

If you want the section to appear at the bottom, set the weight to 100. Or, if you want it at the top, below revision, set it to -10.

Summary

The Field Group module is excellent for organizing field widgets and formatters. It’s handy for ordering and grouping field widgets so content forms are easily managed and used.

FAQ

Q: Why can’t I move the section above “Revision log message” text area.

The revision section is hard-coded at the top. You won’t be able to place a section above it by adjusting the weight value.

Originally published at https://www.webwash.net