You are currently browsing the monthly archive for June, 2009.
I have added two jQuery animation demos to my SharePoint site:
- Scrolling news on the home page, based on the jQuery Tools plugin (its Scrollable feature to be precise)
- Dock menu with fisheye effect, based on the Interface plugin
At this point, these are “proofs of concept”, not ready yet for a production environment.
I have also transferred the Star rating demo from my old site. It is based on the star rating widget. For the occasion I have upgraded it with the June 2009 release.
For the record, the following jQuery demos are already present on the site:
- Sparklines (minicharts)
- Slider for the Gantt view (animation)
JavaScript – the language jQuery is based on - is becoming a more and more powerful tool for animations and other visual effects, and is slowly gaining ground in areas where Flash was previously considered the only option. This trend is driven by the development of new libraries/frameworks/plugins, the rapid progress of JavaScript engines in modern browsers, and new standards like the HTML canvas element and CSS3.
If you are interested in this topic, in addition to jQuery take a look at these 10 Impressive JavaScript Animation Frameworks and 10 excellent JavaScript solutions to graphing/charting data.
In Part I, we created project dashboards at the team level. In Part II, we are going to use the Content Query Web Part (CQWP) and follow these steps to build our executive dashboard:
1/ Collect the project status for all teams in the division
2/ Filter the list to only keep critical projects
3/ Customize the look to render our KPIs
Before you start: key references
Warning! You’ll need a good knowledge of the customization options of the CQWP to apply the method presented in this post.
My purpose here is not to provide a tutorial on the CQWP, for this I’ll just relay the impressive work done by other bloggers. See my earlier post, and in particular the “must read” section. For this specific case study, I recommend Heather Solomon’s tutorial.
Project status roll-up
Let’s add a CQWP to a page at the top level (“Division” site), and customize it to gather all the team project dashboards:
- Source: show items from all sites.
- List Type: Tasks.
- Filter: only retain projects that have division level visibility.
Here is the result:
The good news is that we have successfully rolled up the projects with executive visibility to the top level (see screenshot from part I and its visibility column as reference). However we are still missing the KPIs.
We are now reaching a point where the tool pane customization options are not enough, and we need to do some heavy lifting to get our final dashboard (although the next steps don’t require any special tool, and can be done in a text editor like Notepad).
Reference the KPI columns
For this, you need to export the CQWP to your desktop, edit it, and change the following line:
<property name="CommonViewFields" type="string"/>
to:
<property name="CommonViewFields" type="string">Progress;Indicator</property>
Display the KPIs
We need a new template in the ItemStyle.xsl file in the Style Library – I’ll call it “Dashboard” – that includes a call to the Progress and Indicator fields. For example, for Progress:
<xsl:value-of select="@Progress"/>
Once the template has been added to ItemStyle.xsl, I can go back to my CQWP tool pane and select it (item style: Dashboard).
Let’s see the result:
OK, our KPIs are now on the page…except that they have two issues:
- each calculated field starts with a “string;#” tag
- the CQWP displays the HTML as a string, not as real HTML.
Fortunately, there’s an easy way to fix this. the “string;#” tag can be removed with the “substring-after” function, and the string can be rendered as HTML by disabling output escaping. So for my Progress field I’ll actually use:
<xsl:value-of disable-output-escaping="yes" select="substring-after(@Progress,'#') "/>
The final result:
Let’s sit back for a moment and appreciate the beauty of Eric’s tip: with a minor tweak in the XSL template (disable-output-escaping=”yes”), the HTML calculated column and the Content Query Web Part become a perfect match!
The same approach allows us to create dashboards at the Business Unit level. We just need to modify two settings:
- Source: Show items from the following site and all sub-sites
- Filter: Visibility is equal to Business Unit
As a reference, here is the XSL template I added to ItemStyle.xsl for this case study:
<xsl:template name="Dashboard" match="Row[@Style='Dashboard']" mode="itemstyle">
<xsl:variable name="SafeLinkUrl">
<xsl:call-template name="OuterTemplate.GetSafeLink">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="DisplayTitle">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="@Title"/>
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="LinkTarget">
<xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
</xsl:variable>
<div>
<xsl:value-of disable-output-escaping="yes" select="substring-after(@Indicator,'#') "/>
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
<xsl:value-of select="$DisplayTitle"/>
</a>
<xsl:value-of disable-output-escaping="yes" select="substring-after(@Progress,'#') "/>
</div><br/>
</xsl:template>
Eric Proshuto is a Sr. Application Engineer for Siemens PLM Software, where he manages the intranet/extranet MOSS farm. He has been supporting SharePoint since early 2000 using SharePoint Team Services.
A couple weeks ago, Eric posted a very useful tip on my blog. I have built a case study to show how to put it to work. I sincerely hope that Eric can share a more complete, real life case study after he implements this in his company.
Note that this case study relies on the Content Query Web Part, only available in MOSS.
The scenario
Let’s consider the case of a division in a large organization, with dozens of business units that report project status on a daily basis. The Management needs visibility across business units on certain critical projects.
The figure below shows the organization structure. The SharePoint sites structure replicates it, with “Division” as the top-level site in the site collection.
To make everyone go to a central list to report projects health would make that list unwieldy at best. Instead, we’ll keep the reporting at the team level, and use SharePoint’s aggregation capabilities to build the Executive dashboard.
Update [6/27/2009] For more details on this information architecture choice, see this timely article from Bob Mixon:
SharePoint IA: Store Information Close to the Point of Ownership
Team dashboard
We are going to build a list template that each program or project team will use to report their project’s health. We’ll do this in 3 steps:
1/ Create site columns, at the site collection level
2/ Create the SharePoint list that hosts the dashboard
3/ Save the list as a template for reuse across the organization
Note: in a real life scenario, I would definitely consider using content types for added flexibility.
Site columns
For my example, I have chosen to track two indicators for each project: progress and health. In addition, we’ll have a column that precises the level of visibility of the project.
To reach the Site Column Gallery, follow this path:
Site Actions | Site Settings | Galleries | Site Columns
The % Complete column is already present in the list. Let’s add two choice columns:
- Health, with three options: (1) Red, (2) Yellow, (3) Green.
- Visibility, with three options: Team, Business Unit, Division.
And two calculated columns for the indicators:
- Progress, based on the % Complete:
="<div style='position:relative; width:50px; border: 1px solid;'><div style='background-color:"&CHOOSE(INT([% Complete]*10)+1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&"; width:"&([% Complete]*100)&"%;'> </div><div style='position:absolute; top:0px;'> "&TEXT([% Complete],"0%")&"</div></div>"
- Indicator, based on the Health:
="<img style='float:left;' src='/_layouts/images/KPIDefault-"&(3-RIGHT(LEFT(Health,2),1))&".gif' />"
SharePoint list
We’ll use a Tasks List type:
Site Actions | Create | Tracking | Tasks
The % Complete column is already there. Let’s add the 4 other site columns we created:
Settings | List Settings | Columns | Add from existing site columns.
The final touch is to add the script for the HTML calculated column (the instructions were initially posted here, but make sure you grab the updated version of the script). Your tasks list should now look like the above screenshot.
The list is ready, we can now save it as a template that all teams will use for their project:
Settings | List Settings | Save list as template
Note: the “Text to HTML” script will also be saved in the template.
In Part II, we’ll see how to roll up projects with executive visibility to the top level, and how the HTML calculated column plays well with the Content Query Web Part.
Just a quick heads-up on what you can expect on my blog and demo site in the weeks to come:
Image rotator: there’s been a lot of interest around my Image Rotator, and I have received several enhancement requests. I am going to push a couple of them into the script generator, and for the rest I’ll publish some advice on how to tweak the code. I am also thinking about creating an XSLT version for the XML Web Part.
Easy Tabs: also a big success. Well, I love them too, and I put them all over the place in my demo site! I’ll publish some explanations on how to customize their look.
Calendars: I need to work on my demo page, to showcase all the customizations described in my blog, and add some more. I am also thinking about building a script generator.
jQuery: several upcoming demos – mostly proofs of concept for now, the tutorials may come later.
HTML calculated column: this method opens up endless possibilities, and I’ll publish a few more examples. Also, people tend to restrict its scope to color coding, so I’ll try to show other applications.
iframes: displaying a list or calendar in another site/site collection/SharePoint server, resizing the Page Viewer Web Part or the Excel Web Access Web Part, all these are popular but difficult topics. I have answers, but some more testing is needed.
Guest posts: if one of my articles helped create a breakthrough in the way you use SharePoint, I’d love to hear your story, and I’ll be happy to work with you on a guest post for my blog. Thanks for sharing!
XML driven components are a favorite among designers of dynamic Web sites. They allow to dissociate content from rendering, and greatly facilitate the site maintenance. The most popular are Flash charts, although other technologies are available, like Silverlight.
You can use such components in SharePoint: upload the flash component (e.g. PieFlash.swf) and the data (e.g. PieData.xml) to a document library, then insert the html/JavaScript code in the source editor of a Content Editor Web Part.
In addition, and it is actually the point of this post, SharePoint offers a convenient way to update xml files: the Data Form Web Part. Note that setting up a Data Form Web Part requires SharePoint Designer.
To see it in action, go to my live demo. Note that I am not making credentials publicly available, please contact me by e-mail if you want to play with the form.
Maybe you didn’t know that XML files could be edited directly from within SharePoint pages? If so, the demo page also includes a tutorial on how to set up the Data Form Web Part using SharePoint Designer.
XML files vs. SharePoint lists
Instead of an XML file, another standard approach is to store the data in a SharePoint list. You can then pull the list content in XML format to render the chart.
The advantage of XML files is that they are easier to set up. It just takes a couple minutes to upload the file to SharePoint and link it to a Data Form Web Part. With a SharePoint list, you would have to write the code that grabs the list XML and transforms it into a format that the component can read.
On the other hand, the list approach will be better if you want to benefit from specific SharePoint features (e.g. alerts, version history and permissions at the item level).
My live demo is sponsored by FusionCharts (version 3). Note that the previous version, FusionCharts v2, is available for free (22 chart types).
This Summer I’ ll be travelling to Luxembourg, France (North-Eastern part) and Morocco. I am always looking forward to opportunities to meet with other SharePoint professionals or user groups, so feel free to contact me at Christophe@PathToSharePoint.com.
Cet été je serai de passage au Luxembourg, en France (Nord-Est) et au Maroc. Je serais ravi de profiter de l’ occasion pour rencontrer des professionnels ou groupes utilisateurs SharePoint. N’ hésitez pas à me laisser un message: Christophe@PathToSharePoint.com.
SharePoint offers some powerful Web Parts that allow you to share content across sites.
The Content Editor Web Part is a universal plug adapter. Put it on a SharePoint page, and suddenly your page gets connected to the rest of the world: you can add html/CSS/JavaScript/ jQuery, embed videos or widgets, display content from other SharePoint sites, etc. To see it in action, explore my blog, Iain’s site or endusersharepoint.com.
The Data View Web Part, SharePoint’ s Swiss Army knife, lets you customize SharePoint lists, aggregate them or display them in another site. It can also connect to other data, like RSS feeds or external applications. One constraint: you need SharePoint Designer to customize it. Microsoft has made it more accessible recently, as since last April SPD is free.
MOSS offers a third powerful tool: the Content Query Web Part.
From Microsoft:
Content Query is a Web Part that displays a dynamic set of items based on a query that you build by using a Web browser. You use the query to specify which items are displayed, and you can set presentation options to determine how those items are displayed on the finished page.
I must say that I was disapointed by Microsoft’ s documentation on the CQWP. For example they don’t state up front that the scope of a CQWP is restricted to a site collection. Fortunately the Web provides many helpful references.
If you’re new to the CQWP, you can start with this screencast:
http://www.click2learn.ch/Documents/ContentQuerWebpart.html
(Steps 1 to 132 set the scene, and the CQWP makes an entrance at step 133)
Out of the box, you’ll find that the CQWP has limited customization options. It will only return a handful of fields and display them as a simple list. However, you can go beyond this, and the great news for end users is that all this customization can be done on the client side. Be prepared for a tough ride though, customizing the CQWP is not for the faint of heart. To get what you want, you’ll need a minimum knowledge of XSL, or copy/paste skills.
I am not going to repeat what has already be written by others, so I have collected below a list of the best references I have found. I’ll just highlight a few points:
- the CQWP only comes with MOSS, it is not available in wss.
- activate the publishing feature to make the CQWP available in your site collection (Site Actions | Site Settings | Site Collection features)
- you can only query content that resides within the same site collection.
- after activating the publishing feature, end users have access to the stylesheets. They are stored in a dedicated library called the “Style Library”.
- as an end user, you can customize the CQWP by using the tool pane, or you can export it to your computer and edit it (using Notepad, etc.).
Note that I haven’t included in my list posts that specifically target developers.
Must read
Configuring and Customizing the Content Query Web Part Microsoft Enterprise Content Management (ECM) Team Blog
Customizing the Content Query Web Part and Custom Item Styles Heather Solomon
Display Content Query Web Part Results in a Grid / Table Paul Galvin
Tips and tricks
Content Query Web Part xsl for showing the xml Ishai Sagi
Showing the description of a page in the Content Query Web Part as rich HTML Ishai Sagi
Teach the Content Query Web Part how to display a link list Ishai Sagi
Quick Tip: Content Query Web Part, Lookup Column Value and XSL Paul Galvin
How to customize the Content Query Web Part XSL to aggregate blog posts Henry Ong
Content Query Web Part (CQWP) with Anonymous Access Mike Geyer
Other references
How to: Customize XSL for the Content Query Web Part MSDN
Customizing the Content Query Web Part XSL Steven Van de Craen
Display data from multiple lists with the Content Query Web Part Microsoft (from within SharePoint Designer)
Add dynamic content to a page Microsoft’s help page on content query
Filter Content Query Web Part by file type Itay Shakury
List of field types
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spfieldtype.aspx MSDN
Content Query Web Part – Field Types Brian Caauwe
Limitations
Content Query Web Part (CQWP) SharePoint 2007 Performance Ranjan Banerji
Others
The Enhanced Content Query Web Part Codeplex project by Ishai Sagi
I have released a new version (v 2.0) of the “HTML calculated column”. The new script covers lists (SharePoint 2003 and 2007) and calendars. Its purpose is to replace the scripts currently published here and here.
I am proposing this update as people were confused by my recent changes, with the use of DIV tags for lists and SPAN tags for calendars. The new code accepts various html tags. You can now use “DIV” or “SPAN” tags, but also “A” tags, “IMG” tags, etc.
The files are available for download on this page (right click on the file name and save as):
http://pathtosharepoint.com/Downloads/
Use the .dwp Web Part on a SharePoint page, or store the .txt file in a document library and connect to it from a Content Editor Web Part (detailed tutorials coming soon).
Note: I am not displaying code in this blog anymore, as I’ve had too many editing issues in the past.
I have also cleaned up the code to deal with grouped lists. Instead of overwriting the default SharePoint JavaScript, I append my own code to it.
This is still work in progress, I have chosen to make it available now to get your feedback. Next week I’ll publish more detailed explanations and I’ll update the old posts.
Recent Comments