Custom Display: Task Roll-Up with Status Images

Introduction

This section walks through the process of using JavaScript and the Roll-Up display interface to enhance the capabilities of CorasWorks web parts and show a roll-up with each status as an image. For the purposes of these procedures, a standard SharePoint Task list will be utilized.

How It Works

In order to show a roll-up with each status represented as an image, several items are needed:

o A standard SharePoint Task list that will be used by the roll-up to display data

o The Task SpreadSheet Roll-Up Advanced web part, accessed from the Virtual Server Gallery – The DWP of this web part will need to be modified to achieve the desired functionality

o Images to represent each a specific status

o JavaScript and Display HTML, made available here, that alter the roll-up display to showing an image depending on each task’s status.

To implement status images, a Task list and a Task Spreadsheet Roll-Up with JavaScript and a Display Interface are used. These are the items you need to change to alter the default images and/or statuses in the web part:

1. JavaScript (click here)

o Outputs Four HTML Elements:

o <img border=”0” src=”…”>

o <a href=”next”>

o <a href=”previous”>

o Defines four functions:

o StatusImage – Outputs image based upon inputted Status

o ShowNext – Outputs Next link with Arrow image

o ShowPrevious – Outputs Previous link with Arrow image

2. Status Key (click here)

o Displays key at the bottom of the display for easy understanding of each images’ meaning

IMPORTANT! When copying and pasting from the online help into FrontPage, hard returns may be inserted. These will need to be removed to avoid any errors.

If you look at the table in Spreadsheet Roll-Up Advanced, you will see that a number of fields from the list being searched are referenced with a “%”, both before and after the item. These include both the field headers (%Title Header%, %Status Header%, %Priority Header%, %Due Date Header%, %Assigned To Header%) and the field values (%EditItemURL%, %DisplayItemURL%, %PreviousURL%, %NextURL%, %Title%, %Status%, %Priority%, %Due Date%, %Assigned To%). When working with status images, these are the fields available to you while building your custom solution.

Building It

The Scenario

These procedures begin with the assumption that you have created a standard SharePoint Task List in your site and have filled it in with some test data. You have a personal Dashboard at http://site/yoursite/, where you want add the Task Spreadsheet with Status Images roll-up.

These procedures assume that a standard SharePoint Task list has been created in a site and it contains some test data. There should be a personal dashboard at http://site/yoursite/, where the Task Spreadsheet with Status Images roll-up will be added.

Step 1: Create the Task Spreadsheet with Status Images Roll-Up

1. Add the following five Images to your site’s Image directory or create a new Picture Library where the images will be stored. If you decide to use a Picture Library, you will need to modify the source location for each image pointing to the Picture Library instead of the default Images directory. If you decide to use the default Image directory, you can access it via FrontPage and point to the site where the roll-up will be installed. Inside you will see an Images directory; you can place the images there.

o Check.png check

o Checks.png checks

o Stop.png stop

o Unknown.png unknown

o Information.png

2. Add a Task Spreadsheet Roll-Up Advanced web part to the zone where you want the new roll-up to be displayed.

3. Export the roll-up as a .dwp file

o Click on the Actions menu and then select Export…

o Save the file on your computer as Tasks Spreadsheet With Status Images.dwp

4. Delete the generic Spreadsheet Roll-Up Advanced from your site.

o Click on the Actions menu and then select Delete

o Click OK to confirm

5. Edit the Tasks Spreadsheet With Status Images.dwp on your computer

o Change the title of the web part by replacing the text between the <Title></Title> tags with “Tasks with Status Images”

o Insert this content (click here) between the last property tag

o Save the .dwp file

6. Import the modified web part to your personal site, http://site/yoursite/.

o Click Modify Shared Page/Add Web Parts/Import

o Enter the name and location of the .dwp file or click Browse to find it on your computer

o Click Upload

7. Drag the uploaded web part to the zone where you want the roll-up to be displayed, ensuring that its Part Order places it below the JavaScript Starter.

8. The administration interface is displayed, where you can choose the sites and lists to roll-up data from. Once this is done, close the administration interface. The roll-up will display the tasks with each row changed to reflect the status of each task.

Step 2: Modify the JavaScript and Key to Match the Image Chosen for each Status

1. Locate the JavaScript Function StatusImage.

o Choose the Status If or Else If statement for which you want to change the image.

o Enter the name of the image file you want to use in place of the image that is already within the src=”…” attribute. (Example: {document.write('<img border="0" src=\"images/unknown.png\">');})

2. In the Status Key HTML at the bottom of the Display interface, locate the Status Image Text that you want to change. (Example: <td width="16"><img border="0" src="images/unknown.png" width="16" height="16"></td><td><font face="Arial" style="font-size: 8pt">Not Started</font></td>)

3. Modify the src=”…” by entering the name of the image you want to utilize for the status.

4. Repeat these steps for each image.

Step 3: Modify the JavaScript and Key to Match the New Name for Each Status

1. Locate the JavaScript Function StatusImage.

o Choose the Status If or Else If statement for which you want to change the status name.

o Within the If or Else If Statement Change the text being recognized for each Status to match your new Status names. (Example: (status == "Not Started"))

2. In the Status Key HTML at the bottom of the Display interface, locate the Status Image Text you want to change.

o Modify the name of the Status(s) you wish to change. (Example: <td width="16"><img border="0" src="images/unknown.png" width="16" height="16"></td><td><font face="Arial" style="font-size: 8pt">Not Started</font></td>)

3. Repeat these steps for each status name.

Task Roll-Up with Status Images – Status Image/Next/Previous JavaScript

function StatusImage(status)

{

if (status == "Not Started")

{document.write('<img border="0" src=\"images/unknown.png\">');}

else if (status == "In Progress")

{document.write('<img border="0" src=\"images/information.png\">');}

else if (status == "Completed")

{document.write('<img border="0" src=\"images/check.png\">');}

else if (status == "Deferred")

{document.write('<img border="0" src=\"images/checks.png\">');}

else if (status == "Waiting on someone else")

{document.write('<img border="0" src=\"images/stop.png\">');}

else

{document.write(' ');}

}

function ShowNext(strNext)

{

if (strNext != "")

{

strNext = strNext.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");

strNext = strNext.replace("\");return false;\"","");

document.write('<a href=\"javascript:\" OnClick=\'javascript:SubmitFormPost(\"' + strNext + '\");return false;\'>Next<img valign=\"abs_bottom\" src=\"_layouts/images/marr.gif\" border=\"0\"></a>');

}

else

{

document.write(' ');

}

function ShowPrevious(strPrevious)

{

if (strPrevious != "")

{

strPrevious = strPrevious.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");

strPrevious = strPrevious.replace("\");return false;\"","");

document.write('<a href=\"javascript:\" OnClick=\'javascript:SubmitFormPost(\"' + strPrevious + '\");return false;\'><img valign=\"abs_bottom\" src=\"_layouts/images/marrrtl.gif\" border=\"0\">Previous</a>');

}

else

{

document.write(' ');

}

</script>

Task Roll-Up with Status Images – Status Key

<br><b>Status Key</b></font>

<tr>

<td><font face="Arial" style="font-size: 8pt">Not Started</font></td>

<td><font face="Arial" style="font-size: 8pt">In Progress</font></td>

<td><font face="Arial" style="font-size: 8pt">Completed</font></td>

<td><font face="Arial" style="font-size: 8pt">Deferred</font></td>

<td><font face="Arial" style="font-size: 8pt">Waiting On Someone Else</font></td>

</tr>

</table>

Task Roll-Up with Status Images – Content for Tasks Spreadsheet With Status Images.dwp

<![CDATA[

function StatusImage(status)

{

if (status == "Not Started")

{document.write('<img border="0" src=\"images/unknown.png\">');}

else if (status == "In Progress")

{document.write('<img border="0" src=\"images/information.png\">');}

else if (status == "Completed")

{document.write('<img border="0" src=\"images/check.png\">');}

else if (status == "Deferred")

{document.write('<img border="0" src=\"images/checks.png\">');}

else if (status == "Waiting on someone else")

{document.write('<img border="0" src=\"images/stop.png\">');}

else

{document.write(' ');}

}

function ShowNext(strNext)

{

if (strNext != "")

{

strNext = strNext.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");

strNext = strNext.replace("\");return false;\"","");

document.write('<a href=\"javascript:\" OnClick=\'javascript:SubmitFormPost(\"' + strNext + '\");return false;\'>Next<img valign=\"abs_bottom\" src=\"_layouts/images/marr.gif\" border=\"0\"></a>');

}

else

{

document.write(' ');

}

function ShowPrevious(strPrevious)

{

if (strPrevious != "")

{

strPrevious = strPrevious.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");

strPrevious = strPrevious.replace("\");return false;\"","");

}

else

{

document.write(' ');

}

</script>

<tr>

</tr>

<END>

<tr>

<td class="ms-smallsectionline" width="45"><p align="center"><a href="<%EditItemURL%>"><script language="javascript">StatusImage('<%Status%>');</script></a></td>

</tr>

<END>

<td valign="abs_bottom" align="left" colspan="3"><script language="javascript">ShowPrevious('<%PreviousURL%>')</script></td>

<td valign="abs_bottom" align="right" colspan="2"><script language="javascript">ShowNext('<%NextURL%>')</script></td>

</tr>

</table>

<br><b>Status Key</b></font>

<tr>

<td><font face="Arial" style="font-size: 8pt">Not Started</font></td>

<td><font face="Arial" style="font-size: 8pt">In Progress</font></td>

<td><font face="Arial" style="font-size: 8pt">Completed</font></td>

<td><font face="Arial" style="font-size: 8pt">Deferred</font></td>

<td><font face="Arial" style="font-size: 8pt">Waiting On Someone Else</font></td>

</tr>

</table>

]]>

</Display>