Weekly Newsletter Signup



• Upcoming
  Live Online Workshops

  • SharePoint Charts and Graphs: Part 02 (Sparklines)
  • SharePoint Charts and Graphs: Part 03 (Gantt Charts)
  • Create a Master Calendar in SharePoint
  • jQuery Animations in SharePoint
  • SharePoint WSS Dashboards: No Code Required
  • Become Your Company's SharePoint SuperStar!

• Ongoing Series

  • Article Archives (1000+)
    All Authors
  • This Week in SharePoint with Joel
    Joel Oleson
  • jQuery for Everyone
    Paul Grenier
  • The Calculated Column
    Dessie Lunsford
  • The Data View Web Part
    Laura Rogers
  • Stump the Panel: Q&A
  • Subscribe to the Weekly Newsletter
  • SPC09 - Live Media Streams

• Authors

  • Dessie Lunsford
  • Laura Rogers
  • Lee Reed
  • Mark Miller
  • Jim Bob Howard
  • Paul Galvin
  • Paul Grenier
  • Toni Frankola
  • Woody Windischman

• SharePoint Resources

  • Bits of SharePoint
  • Codeless Solutions for SharePoint
  • Get the Point
  • Innovation Matters
  • Laura Rogers
  • Path to SharePoint
  • Paul Galvin
  • SharePoint 911
  • SharePoint Blank
  • SharePoint Blogs at SharePointU
  • SharePoint Forums at SharePointU
  • SharePoint Screencasts
  • SharePoint Use Cases
  • Social Media Talk Tweets
  • The Sanity Point
  • The Weekly Newsletter  

If you followed the last article, you now have a pair of lists, Issues and Tasks, linked by a lookup column.

The next thing to do, is make this work for end users.  After creating a linked list, you can expect questions like, “[how can I] view an issue and see the tasks associated with it?”

To view an Issue, we look at the DispForm.aspx page, the default “view item” page.  To add an associated item to the page, we need to add another web part but the Edit Page option is disabled.  Consider this trick your first hack:

The Hidden ‘Edit Page’ Option

1. Open your Issue list’s view item page (DispForm.aspx) by clicking on a test data item in your default view.
2. In the URL, you’ll notice “DispForm.aspx?ID=1&…”  Remove everything after the ampersand and add “PageView=Shared&ToolPaneView=2” to the URL.
3. Now you are in Edit mode and you can add web parts to the page.  After you add a web part, any time you revisit this page, you will see the Edit Page option in Site Actions.

Configure the Content Query Web Part

A lot of people take their linked list and jump right into SharePoint Designer, create a linked data source, and create some sort of view for their data.  I dislike working with lookup columns that way because the data returned by SPD lacks the ID of the lookup value.  For instance, if you create Task1 and use your lookup field to link to IssueTwo (where ID=2 and Title=IssueTwo), your data returned by the Content Query Web Part looks like this:

2;#IssueTwo

whereas the data returned by SPD’s Data View Web Part looks like this:

IssueTwo

In XSL, we can parse the title and the ID of the lookup item from a Content Query Web Part, but not from the SPD Data View results.

1. On the Issue list’s DispForm.aspx page, in Edit mode,  click the Add a Web Part bar.
2. Goto All Web Parts, Default section and select the Content Query Web Part and click Add.
3. On the web part’s context menu, click Edit then choose Modify Shared Web Part in your web part’s context menu.
4. Expand the Query section of the Content Query Tool Part.
5. Change the List Type to Tasks.
6. Change the Content Type selections to the group and content type for your custom Task content type.
7. Expand the Presentation section, remove the check mark from “Limit the number…“.
8. Expand the Appearance section, rename the Title to “Linked Tasks” and click OK.

Customize the CQWP: Custom Column

Now you can see a list of Tasks on your Issue display form–cool, but not helpful because it lacks any filters.  To filter the list, we need the list of Tasks to also have information from the lookup column where we assigned an Issue.  Once we have that information, we’ll want to change the display properties (hide) certain Tasks that match the ID of our Issue.  Grabbing the ID for the Issue during all of this is actually the easy part, look in the URL.  Notice that your Issue’s ID follows ‘DispForm.aspx?ID=’.

First, we need to make sure our custom lookup column’s data makes it into the web part.  To do that, we will need to edit it.

1. On your Issue list’s DispForm.aspx page, click Site Actions and choose Edit Page.
2. Open the CQWP’s context menu and select Export and Save the file locally.
3. Open the .webpart file with a text editor (or Visual Studio if you have it).
4. Search for “common,” you will stop at a line that looks like this:

<property name="CommonViewFields" type="string"/>

5. Change the line to this:

<property name="CommonViewFields" type="string">LookupIssue</property>

6. Save this file and close your editor.

7. Go back to your DispForm.aspx page, click Site Actions and choose Edit Page.
8. Delete the CQWP from the page by clicking the ‘x’ then click on the Add a Web Part bar.
9. In the Add Web Parts menu, click the word Browse and choose Import.
10. Click the Browse button and locate your .webpart file and click Upload.
11. Drag your web part to the web part zone on the page and exit Edit Mode.

Customize the CQWP: Custom Display

This new web part may not look any different from your previous one but that’s only because we did not change the presentation of the web part to display your custom data–yet.

The CQWP handles a lot of heavy lifting for you by turning its XML (which you just edited) into a query that the database understands, then returns the data as XML.  The XML that gets returned, like most of us, needs to be dressed up before it can go out and be seen.

Enter the ItemStyle.xsl file.  This little dandy turns that raw XML into anything you want as many times as you have records to return.  If you have any experience with HTML, CSS, or javascrtipt, this is where you can really get creative displaying your data.

First, we need to find this file, make a backup copy (in case we paste when we should have copied) and make some adjustments for our new web part.  You will need administrative priviledges to access this location.

1. From your top-level site collection, where the CQWP will display, click View all Site Content.
2. Under Document Libraries, click Style Library then open the XSL Style Sheets folder.
3. Open the context menu for ItemStyle and choose Send to > Download a copy then save the file.
4. Repeat step #3 above but save the file with a different filename, like “ItemStyle_bak.xsl”.
5. In the Style Library’s XSL Style Sheets folder, click Upload, browse to your backup file and click OK.
6. Open your local version of ItemStyle.xsl in a text editor (or Visual Studio if you have it).
7. Move your cursor to the 8th line of the file, after:xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt">
8. Create a new line by pressing Enter then insert the following line:

   <xsl:param name="PageUrl" />

9. Your next line starts with “<xsl:template name=”Default”…”, highlight that line and the next 38 lines including the first time you see “</xsl:template>.”
10. Copy this block of code to your clip board, move your cursor to after </xsl:template> and press Enter then paste the block.
11. Move back up to the top of the block you just posted.  You’ll see:

</xsl:template>

<xsl:template name="Default" match="*" mode="itemstyle">

12. Change that second line to this:

<xsl:template name="IssueTasks" match="Row[@Style='IssueTasks']" mode=
"itemstyle">

13. Move down, within your new IssueTasks template, to the last variable in the template:

</xsl:variable>  <div id="linkitem" class="item">

14. Between those two lines, create a space and insert the following lines (remove the space between 8 and ; in the line below):

<xsl:variable name="myamp">& ;</xsl:variable>
<xsl:variable name="IssueID">
<xsl:value-of select="substring-before(@LookupIssue,';')" />
</xsl:variable>
<div id="{@ID}" class="toggleMe" title="{$IssueID}" style="display:none;">

15. Move your cursor to the line 19 lines down just before:

</xsl:template>

16. Make a space before that line and add the following:

</div>

17. At two locations in your template (between <xsl:template> and </xsl:template>, you will find  lines that start with the following:

<a href="{$SafeLinkUrl}...

18. In both lines, add the following after {$SafeLinkUrl}:

{$myamp}Source={$PageUrl}

19. Save this file.

20. Go back to the folder, Home > Style Library > XSL Style Sheets  and click Upload.
21. Click the Browse button, find your updated ItemStyle.xsl and click Open, then OK, and then click Check In.
22. Back in the All Documents view of the Style Library, open the context menu for ItemStyle, choose Publish a Major Version and click OK.

23. Navigate back to your Issue list and open the DispForm.aspx page by picking a test item to display.
24. Click Site Actions and choose Edit Page.
25. Click on “edit” to open the CQWP’s context menu and choose Modify Shared Web Part.
26. Expand the Presentation section and scroll down to the Styles sub-section.
27. Change the Item Style to IssueTasks and click OK.
28. Click the Add a Web Part bar on the page, move to the All Web Parts section, under Miscellaneous and put a check next to Content Editor Web Part.
29. Click on “edit” to open the Content Editor Web Part’s context menu and choose Modify Shared Web Part.

30. Click the Source Editor button and paste the following javascript then click Save:

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("initShowHide");
function initShowHide() {
var qs = location.search.substring(1, location.search.length);
var args = qs.split("&");
var vals = new Object();
for (var i=0; i < args.length; i++) { var nameVal = args[i].split("=");
var temp = unescape(nameVal[1]).split('+');
nameVal[1] = temp.join(' ');
vals[nameVal[0]] = nameVal[1]; }
toggleDisplay(vals["ID"]); }
function toggleDisplay(myval) {
var divs = document.getElementsByTagName("div");
for(var i=0; i < divs.length; i++)
{ if(divs[i].title == myval)
{ divs[i].style.display="block"; } } } </script>

31. Expand the Appearance section of the Content Editor’s settings menu and replace the title with “initShowHide” then click OK to save the changes.
32. Click Exit Edit Mode at the top right of your page.

What Just Happened?

If you followed closely, you modified the XML of a Content Query Web Part, customized the XSL style sheet for it, added some custom javascript to the page, and *bam* you satisfied a user requirement with the power of notepad (or your editor of choice).  You should now see related Tasks on your Issue list’s display form and when you click Task to view it then click Close, it will take you back to the Issue.  Be prepared for hero status in your office.

Where Do You Go From Here?

Well, that’s entirely up to you.  Break down this exercise, ask questions, and experiment (on a practice MOSS site hopefully).  The javascript provided is completely reuseable, you can even export that as a web part and drop it in pages over and over without changes.  The techniques of modifying a style sheet require some patience and practice–MOSS forgives no mistakes of syntax, your web part will just not load or display an error.  But if you follow basic HTML ideas with the algebra of variable substitution, you can go far.

Some ideas I’ve done that you can try:

• Add icons that link to a person’s profile (like the Task owner) or start an email to them
• Add more data to the CQWP and use it to add font size and color changes
• Used OOB CQWP functionality to group and sort the Tasks
• Add a brief description to the Task’s content type then display that with the Task link

For me, I’m going to work on the next article; the last part of the original question,

“not to be able to close an issue unless all its tasks are complete”

But I won’t stop there.  I’ll wrap up this series (unless someone offers up more ideas) with an often requested “New Task” link.  When viewing an Issue, you click New Task and start a Task NewForm.aspx page with the originating Issue preselected in the drop down.

edit: 10/07/2008

Download a copy of the ItemStyle.xsl file here.

---

Notify me of comments to this article:
E-Mail:

---

Comments