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

 

I bought this book and have to say it's perfect for beginners and intermediates. It fills in a lot of gaps if your self taught. I swear I browsed through the book the day I got it and immediately found something I had been trying to figure out and went right to it.

Not only does it give you step by step instructions for certain tasks but if your like me it spawned a lot of ideas.

There are many books starting to pop up now about WSS. I purchased a few that turned out to be a bit above my skill level right now but this one is just right. Trust me, if you want a  big jump start in expanding your SharePoint Designer experience, this book will do it. Microsoft Press

 

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.

 

 

**** I updated this post and the attachments when I noticed an error. ****   

 Most people who use WSS 3.0 most likely want to use some type of dashboard component on their sites. If you haven't seen it, there is a great document called "Application Templates Under the Hood" published  by Microsoft in June 2007. (Get it here.) Page 24 of that document "Using Dashboards" deals with the Bar Graph used in many of the Fantastic 40 Application Templates. Our example references one of the bar graphs used in the "Budgeting and Tracking multiple Projects" templates dashboard.

If you have seen this but still find yourself scratching your head, I'm going to attempt to detail how to use this type of graph in a SharePoint list.

I don't claim to be able to teach you about xslt but I'll show you how to do this. After you do it once or twice you begin to understand how it all works. Good Luck

So what we want to do is create a bar graph. We have a list of issues or action items that has a field called "Status". The various "Status" categories are: "Contractor Action", "Customer Action" or "Completed". We want to show a bar graph that tells us:

• How many total items are in the list
• How many items in each category
• The percentage in each category based on total items

I'll do this in two parts:

1. Modifying the XSLT used to display the list data.

2. Use SharePoint Designer to create a data view and apply the style sheet.

The XSLT used to transform the data to the bar graph is available in the "Budgeting and Tracking multiple Projects". This is the document we will start with in performing this task. (Bar_Graph.xslt)

Let's take a look at the style sheet in IE will all branches collapsed:

In order to use this with your Data View (assuming you have created a list in WSS 3.0) you will need to know which columns you want to include in the Bar Graph. For example, let's say in the "Status" field of our list there are three category choices, A) Contractor Action, B) Customer Action or C) Completed. Additionally, we want to show the total items in this list and the percentage of those items in each of the three categories.

In the xslt file, we are concerned with only two areas: 1) "dvt_1.footer" and 2) "dvt_1.header", the other sections of the stylesheet can remain as is.

Let's start with "dvt_1.footer".

Expanding this section shows parameter and variable names.

The following parameters don't need to be changed………

<xsl:param name="ParentPath" />

<xsl:param name="Rows" />

We will focus on the variable names……….. The "Budgeting and Tracking multiple Projects" application presents three choices from the "Status" field:

1. Active
2. Resolved
3. Closed

Our "Status" field presents three different choices:

1. Contractor Action
2. Customer Action
3. Completed

Let's look at each variable in turn: (This is the portion that will "count" the number of items in each category)

<xsl:variable name="Active" select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status) = 'Active'])" />

The first thing we notice is the variable name "Active". Change the first instance of "Active" to "ContractorAction".

<xsl:variable name="ContractorAction" select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status) = 'Active'])" />

The next thing we notice is @Status. This is the lists field "Status", since our list contains a "Status" field we will leave this alone.

Finally we see another 'Active', change this to 'Contractor Action' (notice the variable name has no space between Contractor and Action, where the second instance does).

<xsl:variable name="ContractorAction" select="count(/dsQueryResponse/Rows/Row[normalize-space(@Status) = 'Contractor Action'])" />

Change the next two lines; "Resolved" and "Closed" to our other two "Status" field choices; "Customer Action" and "Completed" in the same manner.

This is what we end up with:

If your list field is different, you would change @ Status to the your fields name. So I guess what's happening is it's saying, "in the variable "Contractor Action" go to the field "Status" and count how many items are marked "Contractor Action".

Moving to the next line we see the variable name "AllTasks" this will always remain as is.

Finally, the last three variable names you'll notice have "percent" in front of our category name (percentactive). (This portion will calculate and display the percentage of each category of the entire list)

Just like the first three variables, starting with the 'percentactive' change it to "percentContractorAction"

<xsl:variable name="percentContractorAction" select="$Active div $AllTasks" />

Again the same rule applies, variable name; no spaces.

***** This new if you have read this before*****

Also change select="$Active" to select="$ContractorAction"

*****End new content*****  

 Do the same for the remaining two categories; Customer Action and Completed. We should look like this:

Okay, let's move down to the next section; the "Table".

Each of the categories have a section that looks like this; below is the section for the category "Active". There are four (4) instances of the word "Active", change them all to "ContractorAction" with the exception of the first instance; it looks like this – Active: – This is the text label that will be shown on the graph. Change this to read – Contractor Action: -.

Looking like this:

Change the next two sections; "Resolved" and "Closed" to our remaining two choices; "Customer Action" and "Completed"

Finally, the "dvt_1.header".

Where you see "Overall Issue Status", change it to read whatever you want to title this bar graph.

Get the modified xslt doc here.  *****this document has been updated*****

Okay, what we have done is modified the xslt to reference our "Status" field and the categories available in that field.

Below we see a bar graph already applied to a data view using the xslt we just modified.

 

The next article will show you how to:

• Create a data view
• Filter the data view
• Apply xslt to the data view