Drupal 7 Field Group Module

By shane
Wed, 2012-09-12 19:47
Daily Dose of Drupal Episode #6

Share with Others

If you need to group fields together to make adding content to your Drupal 7 website easy, the field group module may be your saving grace. In this episode, I walk through how to install and use the field group module in Drupal 7.

You will learn:

  • How to use the field group module to group fields on a Drupal node form
  • How to use Horizontal field groups
  • How to use Accordion field groups

Welcome to another Daily Dose of Drupal. This is episode number 6 and today we’re going to be talking about the Drupal Field Group module. But first off; if you’re not following me on Twitter, you can do so @smthomas3, if you’re interested and also if you haven’t already subscribed to the codekarate.com newsletter. What I’m thinking of doing is rolling this Daily Dose of Drupal videos up or at least the concepts in maybe once a month give or take, posting a longer 20 to 30 minute video going into a little bit more detail in specific topics and case studies with Drupal and only members of my site and newsletter will be able to get to that but it’s free so go ahead and sign up.

But today as I mentioned we’ll be going over the Field Group module and if you’ve used Drupal 6 CCK, it’s going to be pretty familiar but a few things that are different and a few new features so I’m just going to go over this pretty quickly. I have a test site here; I’m going to go ahead and download the Drupal 7 Field Group module and I’m going to enable it, it says it was enabled successfully so I’m going to jump back in here and we’re just going to create a new content type and we will call this Content Type “Doctor Appointment”, keep all the rest of the stuff pretty much standard and we’ll just go ahead and save it. We’ll go ahead in our Doctor Appointment content type, we will go to Manage fields, you’ll see now it looks a little bit different, you have this new Add Group section down here and the Field Group section.

So let’s go ahead and let’s say we want a new group called Patient Information and this maybe isn’t the most accurate example of how you use it but there’s a whole bunch of uses. I’m sure you can use figure out a bunch of ways that it will be useful. And so you can break this up into a Field Set, Vertical tabs, Horizontal tabs, so there’s a whole bunch of different options. So we’re going to go ahead and go to Horizontal tab item and we’ll just save that and we will add a field called “First Name” … that’s an existing field, we want a new field, sorry about that; First Name, so I’m going to create a new field, we’ll make this Text, go ahead an scroll down to the bottom and click Save and leave everything else default, just keep it simple and we’re going to actually drop that into Patient Information, we’ll hit Save and let’s go ahead and add another group called Appointment Details and we’ll also make this a horizontal tab item, I’ll save that and we’re going to then say under this one we’re going to want Appointment Date, make it a date and we’ll have it a pop-up calendar and you’re going to need the Drupal Date module installed if you don’t already have it in order to get this date go up but this site already had that so we’re going to go ahead and say we just want Year, Month, Day, Hour and Minute, we’ll use the Drupal website’s time zone, we’ll go ahead and collect an End Date as well and we’ll go ahead and Save that, leave the rest of the defaults there and we will drop that Appointment Date or Appointment Details into there and we’ll also drop the Body into there as well.
And now we’re going to go ahead and actually add some of this Doctor Appointment Content; you’ll see now we have a couple of different tabs here that expand, you can add the first name for Patient Information or you can add the Appointment Date or Body Field.

But let’s go back into the structure and let’s change a few other things; I’m going to add a group fro just Appointment and I’m going to make this a Horizontal Tabs Group and inside here I’m going to actually drag in these Horizontal Tab items to actually get them working correctly.

And now assuming I saved it I go back and now I have a little nicer looking Horizontal Tabs. So you can see there’s a whole bunch of different options that you can use in order to layout your Note Edit forms to make them easier not only for you to enter information but if you’re building the website for someone else for someone who’s not necessarily a developer to easily enter various contents into your website. And we’ll just go back and look at a couple of other options here; so we could also then change this to an Accordion group and change this to an Accordion Items and save this. And you can of course go ahead and try a whole bunch of other ones out but we’ll just go to a couple here and now you can see a little bit different formatting; same concepts but just puts the different fields into the different buckets and allows you to more easily add content to your site.

We just kept it simple today. Tomorrow I’ll be going over on a whole new concept but again follow me on Twitter if you’re not already and hopefully you learned something today. Thanks for watching.