Recipe 9: Revealing the full extent of Views
Note
Ingredients
Completed Recipe 8
One reason that Views can feel a little bit mysterious, is that so much of it is concealed at first.
This recipe exposes all of the options on the main View's Edit screen by expanding all of the collapsed fieldsets on the page. This will save you the time it would take to manually open the nearly two-dozen fieldsets. The recipe uses a single line of jQuery. Please do not feel that you have to understand everything all at once when you see the full extent of Views! That's what the rest of this book is for. There is value, however, in the full array of options that will be available to you. A summary of the full screen can be found in Recipe 7. Note that fieldsets are nested within other fieldsets, up to three levels deep.
The list of all the fieldsets in the View's Edit screen is as follows:
Basic Information
Page
Header
Input format
Footer
Input Format
Empty Text
Input format
Menu
Default Menu Tab
Block
Header
Input format
Footer
Input format
Empty Text
Input format
Fields
Arguments
Argument Handling Code
Filters
Exposed Filters
Sort Criteria
Ensure that Firefox and Firebug are installed (See Recipe 8)
Go to
admin/build/views/swim_groups/edit. If you have not yet created a view, go toadmin/build/views, and click on Add.-
Click on the firebug icon
in the Firefox status bar, or press F12 (on Apple laptops, it may be necessary to hold down "Fn" while pressing F12). If you get a message regarding the need to enable Firebug for the site, go ahead and do that. Firebug opens at the bottom of the browser.
Click on the Console tab in Firebug. An understated JavaScript (and jQuery) command line appears in the lower left, after the >>> prompt. You may notice the blinking cursor.
Running the jQuery command
In the command line area, enter the following jQuery command. Make sure to include the dollar sign character.
$('fieldset').removeClass('collapsed')
The full scope of the views Add or Edit interface appears in the browser. Take some time to explore the page.
Recipe notes
How does this recipe work? If the jQuery command above were to be read as English, it would say: "Find all of the fieldsets on the page, and remove the collapsed CSS class from all of them". The effect is to open all the fieldsets (JavaScript must be enabled for this to work).
Let's elucidate this further:
The HTML fieldset tag in most Drupal themes (including the default Garland theme) looks like this, when collapsed:
<fieldset class="collapsible collapsed">
An expanded tag looks like this in HTML:
<fieldset class="collapsible">
The jQuery code removes all of the "collapsed" classes from the Views page. Thus, all the fieldsets are open, revealing their full contents.
Most of the time, you will not want to interact with Views in this expanded way, but it certainly is helpful, sometimes. It's nice to know that Firebug CSS edits are temporary. The next time you view the page, the fieldsets will refresh with their default open or closed appearance. Press F5 in Firefox to refresh the page you are on.
Note
This jQuery fieldset expansion command does not function if you have already manually closed a fieldset with your mouse.
