You are here

Cool module: Views fieldsets

Have you ever wanted to use those wonderful collapsible fieldsets in your views in Drupal?  Collapsible fieldsets are such an interactive and user-friendly way to present records that you want to be compact, while giving the user the option of expanding for more info!

So let me demo the Views fieldsets module.  It allows you to create a view with as many fields as you want under each record - which you can hide in a collapsible fieldset.  That makes your display so compact and tidy, while allowing the user to expand the fieldset to see extra info!   Here is an example of a view using Views fieldsets:

Let us build a simpler version of that - and I'll leave all the extra theming of the view to you.  ;-)

  • Download and enable the Views fieldsets module.
    • There are no options to setup - the module will simply give you some additional field types to include in your views
  • Start creating a new view.  In my example, I will create a view of the content type 'Blog post', which will be an 'Unformatted list' of 'fields'
  • Add as many fields as you want to your new view.  In my case, I have added all the following:
  • You will see immediately that, with a title, date, summary, and two vocabulary tags, the display is starting to take too much room per returned result.  Even if we style it to make it more readable, it is not very compact and will make finding the right blog harder for the user:
  • So let's place the majority of our fields INSIDE of a fieldset,
    • That way the user can choose to expand to look at them, but can browse through the view records quickly by just glancing at the title
    • If you've enabled the Views fieldsets module successfully, when you go to add in a new field to your view, under the 'Global' section, you should see the 'Global: Fieldset' option
    • Go through the configuration options of this new field carefully.  Here is how I'm setting mine up
      • Check 'Collapsible': this means the user will be able to expand and collapse it as needed
      • Check 'Collapsed': this means it will be collapsed (rather than expanded) when the page loads
      • Check the 'Rewrite the output of this field' option.  This is important.  If you do not input some dynamic text into this field, it will simply say 'Fieldset' which is not very user-friendly.  In my case, I will use the 'title' and 'created' (date) fields I'm pulling out for each record to create this field
    • The final step to making sure your fieldset is working properly is to
      • Drag all the fields we want to go IN the fieldset under it
      • Drag all the fields we're using IN the fieldset's title above it (or they won't be available to be used by the time the fieldset is getting generated)
      • To accomplish the above, simply select 'Rearrange' from the drop-down arrow by your fields and place everything in the right spot, like below
  • Your final result should look something like this.  (Note that I've also added exposed filters to my view)

Styling

I have barely styled my fieldset - it's mostly just using the styling applied by default by the Bartik theme, however, just to give you an example of how you can start theming your new fieldset-full view, I've applied and am showing the following css rule in the screenshot above.  It changes the background color of the fieldset as my mouse hovers over it.  That way, users will know they can expand and/or collapse the fieldset. (A change in color/shape/opacity is always a good way to show a user that something is dynamic and will react to their click)

.view-blogs-by-topic fieldset span.fieldset-legend:hover {
   background-color: #E3E1E5;
} 

 

Share

Comments

Great Tutorial. Just what I needed. Thanks heaps

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.