holding a glowing earth globe in his hands

Creating a Knowledge Base Site – Part V

May 24, 2011
Comments off

So Part V here we are. The first four parts have focused on the main functionality for adding to the site and creating categories and tags, now we want to display it in such a way that any user will find it easy to navigate. My idea, for a functional and easy to support site, is to simply have one page which is dynamically filtered based on the tags or categories, simples.

The first thing you will need to do is go to the default page for the site, usually called default.aspx at the root folder of the site. Now, from edit mode add the following web-parts:

  • Wiki (Left Web part zone)
  • Documents (Left Web part zone)
  • Categories (Right Web part zone)
  • Tags (Right Web part zone)

Once you’ve added these web parts we need to modify the views of each of them. To do this simple select “Modify Shared Web Part” and click on the “Customise this view” in the Data View Properties. It’s entirely up to you what columns to see on the main user interface but here’s how I’ve laid it out:

Wiki

Field Name
Name
Category (Section)

Documents

Field Name
Type
Name
Description

Categories

Field Name
Category

Tags

Field Name
Tags

Right, now we want to customise the web-parts data view, something we’re going to do within SharePoint Designer. So open up the site in SP Designer and open up the default.aspx file (check it out if required).

kb1

First thing to do once the page is opened is switch to Design viewing mode and right click on the Wiki web-part and select Convert to XSLT View, this will allow you to make modifications to the way the web-part looks. Do this will the other three web-parts on the page. The next stage is remove anything on each of the web-parts which you don’t want the user to see, I decided that I didn’t want the user to see the toolbar and so removed that row, the choice is yours.

The next thing is to add in some dynamic parameters into the Wiki and Document web-parts for filtering, the process is the same for both and as follows:

In the top right corner of each web-part you will see a little arrow, if you click this a Common Data View Tasks menu will appear (As shown below). Find the Parameters… option and select it.

kb2
The parameters option allows you to add in variables which will get their values from sources external to the actual web-part. In this case we’re going to set up both the Wiki and Documents web-parts to pick up two parameters from the URL used to open the page, one for Category and one for Tag, the default values can be whatever you like but the Parameter Source must be Query String.

kb3

Once you’ve added the two parameters click ok. Now open the Common Data View Tasks Menu again and select the Filter option.

Now we’re going to filter the web-parts by the two parameters so that the view displays either the Category chosen or the selected Tag.

kb4

So as you can see from the above screenshot we’ve got to conditions that so we filter by both Category and Tags but the condition is an OR statement so it can be either or both (If for example you have a category of SharePoint but also a Tag called SharePoint then you’re covered). Also, make sure that the Comparison column is set to Contains for Tags because the field may contain multiple tags.

Once you’ve entered this and pressed OK follow the same process for the Documents web-part. Now we’re going to modify both the Tags and Categories web-parts so that the items link to a dynamic URL which has the parameters in which we need to filter by.

So go to the Categories web-part and right click on one of the categories (If you don’t have any data in this field yet then go to the Common Data View Tasks menu and select Show with Sample Data) and then select Hyper-link Properties from the popup menu. This will bring up a dialog box like the one below:

kb5

The default hyper-link will probably be set to something similar to {@Title}. We’re going to change it to the following:

For Categories:
default.aspx?categoryVal={@Title}&tagVal=none

For Tags:
default.aspx?categoryVal=none&tagVal={@Title}

This is assuming that your parameters are looking for the values categoryVal and tagVal, if not then change as required. Click OK and save the default.aspx file. Don’t check it in just yet because we’re going to make one more modification. At this stage return to the Internet Browser and open the default.aspx page, click on the tags and categories to make sure that everything is working correctly.

On the assumption that everything is cool and working return to SharePoint Designer and open the Common Data View Tasks menu on the Tags web-part, select Data View Properties. A dialog box will appear for the properties, select the Layout tab and then select as shown below:

kb6

Click OK and you will notice that all of the tags are now not set up a one per row but side by side and seperated by “,”. If you click next to one of the “,” and delete it. Then add a blank space followed by | and once the web-part renders it will look something like this:

kb7

This will give it more of a Tag cloud look, obviously its not that advanced but defines it as different from the Categories web-part. Now Save and check in the default.aspx file. Return to the Internet Browser and refresh the page there, you should have something that looks a little like this (Assuming you have data in all of the tables):

kb8

So there you have it, a five part Knowledge Base tutorial which requires minimal coding experience and has functionality and validation for Categories and Tags built in. To revisit the whole tutorial I’ve created a tag called Creating a Knowledge Base which will bring up all 5 parts. Enjoy.

Comments are closed.