views drupal

Views and Drupal 7: Creating tabs and subtabs

February 19, 2013

When creating a Drupal site, it is often useful to structure your views pages in a hierarchy including tabs and subtabs.

For example, Drupal's concept of content is rather wide-reaching and includes elements that the average (non-Drupal-) webmaster will consider as separate, such as pages, articles, press releases, etc. Thus, instead of using Drupal's default content administration screen (example.com/admin/content) to manage everything, it might be preferable to add administrative pages for each content types. These administrative pages can be created and placed in the menu system (including in tab- and subtab- based navigation) using views.

Consider the example where the webmaster wants to have access to all of the articles on the site in two separate lists: published articles; and articles awaiting approval. In this case the client is often more comfortable with an administrative interface tailored to the business understanding rather than a structure imposed by Drupal.

We can use Views to create administrative pages to manage articles. These administrative pages will be presented using Drupal's tabs, subtabs and default tabs structure.

(This article assumes that you know how to install views; and create views and displays.)

By default, Drupal provides us with example.com/admin/content, the default all-purpose content administration page. On this page, we will want to add an “Articles” tab which will contain two sub-tabs: “Published articles” (selected by default) and “Articles awaiting approval”. Note the terminology we're using here: if the client calls unpublished articles “articles awaiting approval”, that's what we'll call them. People will be more eager to use their new site if you use terms with which they are already familiar.

First, let us examine the path of the all-purpose administration page: admin/content. Because we want to create tabs and subtabs on this page, we'll use this page as a starting point. Our structure will resemble:

  • “Content” admin/content (existing page)
    • “Articles” admin/content/articles (tab containing two sub-tabs)
      • “Published articles” admin/content/articles/published (default sub-tab for “Articles”)
      • “Articles awaiting approval” admin/content/articles/moderation (additional sub-tab for “Articles”)

Because “Published articles” is the default sub-tab for “Articles”, these two pages (admin/content/articles and admin/content/articles/published) will be identical from the user's perspective. That's how Drupal works: in both cases the content of “Published articles” will be displayed; and the content of “Articles” will be ignored.

(One important thing to keep in mind is that the path structure is important inasmuch as Drupal uses that information to determine where, in the hierarchy, different pages should appear.)

Therefore, although we are defining three paths in the hierarchy, above, only two will be accessible to the webmaster: one for published articles and one for articles awaiting approval.

Our first step is the define the parent view. The content of this view will never be displayed, but it has to exist in order for the menu structure to work properly. By convention we'll put the same information in the parent view (which will never be shown) as in its default tab (in this “Published articles”, which will be shown). Create a new view with the following attributes. (This two-minute video shows the entire process if you want to follow along.)

  • Title: Articles
  • Filters: Published content of type Article
  • Path: admin/content/articles
  • Access: put an administratif access here (using a role or permission) to prevent the public from accessing this page.
  • Menu: Menu tab
    • Tab title: Articles

Now let us create “Published articles”, which will be the default tab for “Articles”.

  • Title: Published articles
  • Filters: Published content of type Article
  • Path: admin/content/articles/published
  • Access: put an administratif access here (using a role or permission) to prevent the public from accessing this page.
  • Menu: Default tab
    • Tab title: Published Articles
    • Parent menu item: Already exists

The parent menu item already exists because we just created it. Views has an option allowing us to create the parent menu item at the same time as the default menu tab. However, this is not recommended as it will prevent your new menu items from appearing in the popular Admin Menu.

Now, let us create the “Articles awaiting approval” (non-default-) tab. Here are the attributes of this view (or display):

  • Title: Articles awaiting approval
  • Filters: Unublished content of type Article
  • Path: admin/content/articles/moderation
  • Access: put an administratif access here.
  • Menu: Menu tab
    • Menu tab title: “Articles awaiting approval”.

Once this view is created and saved, webmasters will be able to go to the “Content” page (example.com/admin/content), click on the “Articles” tab, and see two sub-tabs, with “Published articles” selected by default.

Drupal's menu/tab management system is not the most intuitive of Drupal's features, but, for those who can harness its power, provides a powerful and robust way to display views and other pages in your sites menu hierarchy.