SharePoint Site Creation – Step-by-Step (Part 10)

Let me start by apologizing for the delays, as promised however they are still coming, and I will summize the works in a single, downloadable PDF in the end.

This section was not really intended for the tutorial but I decided to include it anyways as its a great little trick for creating a dynamic navigation using a document library and a little well planned sorting/filtering.

Amanda showed me this trick more than two years ago now and we have used it several of our SharePoint projects. I think another person posted on it as well quite awhile ago. In any event its a great tip, one well worth reading.

Now, on to the Nifty Document Library Navigation, What is it?

Quite simply its a way of using SharePoints powerful document library features such as choice columns and views to create a dynamic navigation system.

Basically you create a document library to hold your main pages (like contact.aspx).

Then you create columns within the library for things like section, and name which will be used to filter the views you will create later.

The views will be built for each of our main sections so that only the properly filtered columns should display on the page you place the web part.

Great, now how do I use it?

Document libraries are a central part of SharePoint that most of us are already familiar with. They are a great place for storage of files and documents that we wish to share with others. However what people dont always realize is that they are the optimal place for storing custom web part pages that are part of a dynamic content managed website.

In this section, we will cover how we can use a document library to store all sub pages in a website and then use a custom data view of this document library to control the primary and secondary navigation for a website.

Coincidentally this type navigation will be used in the on-going template tutorial.

Great now lets get started

First we start by creating a document library on our site called pages. For this document library we want to select web part pages as the template.

Setting Up the Columns

We then need to start adding metadata to the document library because we will need this later to help with the dynamic building of our navigation system. Create the following columns:

Page Type

We will want to categorize each of the pages stored in the library based on their role.

While not all these are needed they can all be helpful and I have chosen the following:

Primary Nav (Each page that will be part of the primary navigation menu of the website)
Secondary Nav (Each page that will belong to a specific section and make up the secondary navigation menu of the website) – obviously you can skip this if you have only one menu.
Template – Because we want to make this site extensible for future developments, we will create some template pages so that new content pages can be added to the site in the future easily.
Admin – Some of the pages in the site will not be part of the navigation system but will be useful for administrative purposes. (more on that later)

Section– We will use this column to determine where in the site, each page will appear. For the site we are working on in the tutorial we have the following sections:

Home
Expertise
Work Samples
The Team
Contact

Page Order

Sometimes we have a specific order that we would like to see links displayed on a site, we will use this column to do just that. This column will be a basic choice field featuring a selection of numbers from 1-5. Depending on your situation, you may opt to use fewer or more choices.

Creating the Views

Next we create a series of basic document library views that will serve our basic needs.

The views will be further customized for visual display in the next section. For each view, the only columns we display will be the one called Name (for use in forms).

For this example, we will create the following views to ensure that pages appear in the appropriate sections of the site:

First we will create the Main Navigation Menu View. …

Primary Nav

Filter – Where page type is equal to primary nav
Sort – By Page Order in ascending order.
Style – Newsletter (no lines)
Display items without folders

Next we will create the Sub Navigation Menu Views For Each Section. …

Expertise

Filter – Where page type is equal to secondary nav and where Section is equal to Expertise
Sort – By Page Order in ascending order
Style – Newsletter (no lines)
Display items without folders

The Team

Filter – Where page type is equal to secondary nav and where Section is equal to The Team
Sort – By Page Order in ascending order
Style – Newsletter (no lines)
Display items without folders

Work Samples

Filter – Where page type is equal to secondary nav and where Section is equal to Work Samples
Sort – By Page Order in ascending order
Style – Newsletter (no lines)
Display items without folders

We now have the foundation for the navigational system of our website.

I will cover this in a little more detail in the next section when I create the web-zones and finally bring in our content to complete the site.

If you cant wait here is the readers digest version…

Converting the Document Library Views to Data Views

Place the pages web part on the page in the web part zone you have specified for the top nav.

Then change to the view you created called Primary Nav and apply changes. Be sure to turn off all toolbars, and hide any frames – you want only the navigation.

In FrontPage, right click on the view and select Convert to Data View. Use FrontPage and css styles to customize the layout of this view to your liking.

Then copy and paste the view to each page of your site in a web part zone that you have specified for the top nav.

Repeat the above process for each sub nav area by adding the appropriate sub nav view to each section. For example add the expertise view to the pages in the Expertise section of the site.

Voila, you have a nifty (and dynamic) document library based navigation system thats easy to update.

This post is slightly more advanced so if you have any questions on this feel free to drop me a line and Ill do my best to sum it up for you in email, or on messenger.

You may also like...

I would love to hear from you.

%d bloggers like this: