Notes on Customizing the Content Query Web Part Without Code

There are lots of articles on the net about doing this but there were some things that I found really problematic in my efforts to get an update out.

My Business Problem

My company uses Scrum (generally) for project management. Therefore, we have planned "Sprints" that break down into tasks. These sprints have start and end dates and a status value. There is a specific project that is quite large and will involve a number of sub-projects that will be managed individually. So, naturally, we set up sub-sites from the top level project portal (MOSS). Now, the PM needs to see a listing of sprints across all sub-projects (sub-sites' sprint lists). The requirement here is that the sprint lists need to all have the same column names but they do not have to be built from a site template, though that would help speed their creation.

So in a portal page the PM wants to see each project with each sprint across all sub-sites. He wants to see sprint name, start date, end date, current status and an icon that corresponds to that status value.

This solution involved importing a customized .webpart file and updating the ItemStyle.xsl file with a new template element.

Notes 

I'll do a longer blog if I have time of how I did the complete solution but for now, here are the things that I found that didn't show up on the other site's tutorials.

1. In the ItemStyles.xsl file, the name and match values cannot include spaces.
2. If you copy the Default template, make sure you modify the match="*" to be the name of the template. Otherwise, any testing stuff you put in will show up for every web part that uses the default template. Could suck big...
3. Unlike HTML, the ItemStyles.xsl file is absolutely syntax-sensitive. I accidentally put in a duplicate element. Thud! I put in an HTML image tag with no "alt" tag. Splat!
4. To format a date:
• add this to the top of the ItemStyles.xsl - xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
• Then this to the xsl variables - <xsl:variable name="StartDate"><xsl:value-of select="ddwrt:FormatDateTime(string(@Start_x0020_Date), 1033, 'M/d/yyyy')" /></xsl:variable>
• Then this to render it: <div><xsl:value-of select="$StartDate"/></div>
5. If you add HTML tags to your item template and it bombs, put it into an HTML file in VS 2008 and see if you get squigglies indicating a "standards" issues with the element. (e.g. img tags require an alt element)
6. Divs seem to always take up an entire row even if their styles have hard widths set. Try nesting spans in divs and setting the styles there. Not sure how this will fly with FireFox but it works in IE. Nobody uses FF anyway, right ;)
7. Find the style templates by going to the portal page --> View All Site Content --> Style Library -- XSL Style Sheets
8. In the .webpart file, if you use the ListOverride property, the lists indicated by the GUID's appear to be available across the site collection no matter where you place the webpart in that collection.
• I imported my web part into a sub-site and it saw all the lists from sites that were at the same web-level as that site. So it looks like it was looking from the site-collection down no matter where in the collection you place the web part. Not sure if this is exactly true but its what worked on my MOSS VPC. Caveat emptor..
9. In the .webpart file, using the CommonViewFields property, don't put any spaces anywhere in the property value.
10. In the .webpart file, using the CommonViewFields property, use this link to see what the SPFieldTypes available are. If you don't put the correct field type string, it will not work and it will not error out.
11. When you're constantly importing and re-importing the .webpart file, try appending an integer to the title. This will tell you if your update worked and when you get back from lunch you'll remember whether or not you actually deployed the last changes.
12. For all files that you work with, before you edit them, MAKE A COPY!!!

Hope this helps a bit...

This is what my finished web part looks like in test: 

JJ