Click Mice, Unclick Mice

1. Navigation component that shows the Month and Year with the number of posts for that timeframe
2. Let's make the navigation component expandable so it can show links to the posts if people choose to expand it
3. Should appear on every page in the same position
4. Should adhere to the theme that is on the page at the time (i.e. if I change themes it should update to reflect that)
5. If I click on the Month Year heading it should display a filtered list of the posts for that month

We covered them all in the last post except the last one.  We did setup the Archive links web part to point to a view page, but we did not create the page...yet.  So now we have part two where we will complete requirement #5.

Series Links

What is Missing in the SharePoint Blog Template (pt. 1)

Filter View By Month and Year

This functionality doesn't exist on a normal date time field out of the box, but we have the power of XSL backing us so I don't think there will be a large problem.  Solving this particular problem seems like it will be much simpler than the Archive links web part, especially since we only have one requirement to fill (technically two since we want this to occur codelessly as well).

This post isn't as long as the last, but for those of you who are impatient you can find the finished product here.  You will need to create your own By Month.aspx view page in your Posts list, but then you can just drag this web part on to it.

Making It Happen

Since we are keeping the mantra of codelessly created in mind, we will go to my friend SharePoint Designer again, and we are going to follow the same precepts as the first post.  We will take a List View and modify it until it resembles what we want as closely as possible, then we will convert it to a Data View.

Section 1 - Configure And Convert A List View

Taking a step back, it should be fairly apparent that all we really need to do is take the Posts web part from the Home page (default.aspx) and add some custom filtering to it.  We will also need to create a List View Page to hold our new view.  We should be able to create our new view page with a few clicks inside SharePoint Designer.

1. Right-click on the Posts web part and select Copy (Fig 1.1)
2. Expand the Lists and Posts folders in the Folder List pane (Fig 1.2)
3. Right-click on the Posts folder and select New -> List View Page
4. Name it By Month and click Ok
5. Right-click the Posts web part on the new view page and select Paste (Fig 1.3)
6. Right-click the Posts web part and select Convert to XSLT Data View (Fig 1.4)

Figure 1.1	Figure 1.2

Figure 1.3	Figure 1.4

We actually want to keep the exact same view as the home page, we just want to add some filtering so we have gone as far as we are going with the List View web part.

Section 2 - Setup Data View Parameters

Now that we have our Data View page showing us the data that we would like, we need to prepare the Data View for filtering. 

1. Once converted by default you should see the Common Tasks menu, click the Parameters... link (Fig 2.1)
2. Click the New Parameter button
3. Give the new parameter a Name of Month
4. Make sure the Month parameter is highlighted, change the Parameter Source drop down to Query String and the Query String Variable to Month (Fig 2.2)
5. Click the Ok button

Figure 2.1

Figure 2.2

Now we have all the raw data we need for our Data View.  Adding this parameter has given us the ability to pass a value in to the web part from the Query String, and in part one we have our Archive headings passing in the group heading as the Month query string parameter.

Section 3 - Change The DataSet

Since we have our raw data, it is time to shape it in to the finished product that we need.  We will need to go in to the Code View in order to accomplish what we want in our filtering. I can imagine what you might be thinking, there is a perfectly good filter option in the Common Data View Tasks menu.  My answer is yes, there is a Filter option in the Common tasks menu, however it does not allow us to accomplish our end goal.  The Filter option is better suited to matching exactly, or at least a portion of, the content in a column.  We need to match against a set of column data that requires some transformation (our date string needs to be transformed to month year format).

1. Click in to the Code View and type Ctrl-F to start a Find
2. Search for /dsQueryResponse/Rows/Row (Fig 3.1)
3. Change /dsQueryResponse/Rows/Row to /dsQueryResponse/Rows/Row[ddwrt:FormatDateTime(string(@PublishedDate), number($Language), 'MMMM yyy')=$Month] (Fig 3.2)
4. You will see a message that there are no posts, and below that you will see the original Posts web part that was on the page
5. Right-click the web part and select Cut
6. Press Ctrl-S to save the changes

Figure 3.1

Figure 3.2

Section 4 - Extra Credit

In the first post of the series, I handed out extra credit to make the Data View web part reusable outside of an STP file.  I will extend it here as well.  The instructions for making a Data View portable are here.

Wrap Up

So we started out in part one with 5 requirements, and we now have a system of two web parts that fulfill our requirements.  SharePoint does give the flexibility to build almost anything from its raw materials.  Looking forward to future posts in the series I am not sure what I will try to tackle next.  I may see what I can do for Most Active posts, or maybe how to codelessly add in links to social networking websites (like http://del.icio.us/ and http://digg.com/).