Bill Burke's Sharepoint How to…. for Beginners and the Self Taught

If you read part 1 before January 29, 2008, it has been updated and you will need to view the updated content before continuing. (Sorry, found a small error but it's fixed now.) 

Ok, in the first article Dashboards for WSS 3.0 Part I The Stylesheet We modified the xslt from the "Budgeting and Tracking Multiple Projects" template dashboard. Now we want to apply that xslt to our list using SharePoint Designer.

Let's open our project in SPD and the site (This is the site where the list we are applying the xslt to)and create a folder called "xslt". Where you store you xslt is really up to you. I create a folder like this on a site and store them all there. I am not saying this is the best way or even the right way. Just how I do it.

In that folder place a copy of the xslt you want to use.

Open an existing page or create a new one ( "File > New > ASPX" ). I place all my data views in a web part zone so I can move them around easily if I need to. So let's add a web part zone to a new page a place a web part zone on it ( "Insert > SharePoint Controls > Web Part Zone" ). SPD should look like this:

Select the web part zone (it will highlight blue), then select "Data View > Manage Data Sources". A list of data sources for this site will appear in the right task pane.

In the Data Source Library hover your mouse over the list you want to use and select "Show Data" from it's drop down. (I'm having trouble getting a cap of the drop down, sorry) I will use  the "Task" list.

The data for that list will be shown. By default it select the first 5 fields in the list or data source.

I'll talk a lot more about Data View Web Parts (DVWP) and the data sources in future posts but for now we'll assume you have a understanding of their use. Because we are going to create a bar graph of the "Status" of these tasks, we will only select the "Status" field in the data source window.

After selecting "Status", Click "Insert Selected fields as….." You see a drop down, select  "Multiple Item View". We want to display all the items from the "Status" field in the view.

SPD will create a data view web part in the web part zone on the page.

I have three tasks in this list, one with each of the choices in the "Status" field (Contractor Action. Customer Actions and Completed). In order to apply the xslt you created in the previous post you'll need to use the "Common Data View Tasks Pane". It should come up when you created your view, but if it's not there (like the pic above), select the chevron for that DVWP (circled in red).

Select "Change Layout" and the "XSLT Source" tab.

Browse to the location of the xslt file and select "OK". Your data view should now look like this:

Remember, I had three tasks in the list 1 Contractor Action, 1 Customer Action and 1 Completed. The bar graph shows one item in each category and each is 33% of the entire list.

Select "File > Preview in Browser".

I've added more items to my task list:

So that's how you manipulate the OOB bar graph from the "Budgeting and Tracking multiple Projects" template from the Fantastic 40 (you can see them demonstrated and can download them from "WSS Demo by Ian Morrish" )

I hope this helps those who are learning about SharePoint and SharePoint Designer.

Filed under: Uncategorized