This section walks through the process of using JavaScript and the Roll-Up Display interface to enhance the capabilities of CorasWorks web parts. For the purposes of these procedures, a standard SharePoint Task list will be used to display tasks and each row’s background color will be changed based upon the task status.
In order to show a roll-up with a different background color for each row based on status, three items are needed:
o A standard SharePoint Task list, which the roll-up will use to display data.
o One Task Spreadsheet Roll-Up Advanced web part
o Some JavaScript and Display HTML, made available later in this section – These are needed to alter the roll-up display so each row is displayed in a different color, depending on each task’s status
To implement status colors, 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 colors and/or statuses in the web part:
1. JavaScript (click here)
o Outputs four HTML elements:
o <TR bgcolor=”…”>
o <Font color=”…”>
o <a href=”next”>
o <a href=”previous”>
o Defines four functions:
o StatusBackGround – Outputs row based upon inputted status
o StatusFontColor – Outputs font based upon inputted status (Black vs. White)
o ShowNext – Outputs Next link with arrow image
o ShowPrevious – Outputs Previous link with arrow image
2. Status Key (click here) - Displays a key at the bottom of the display to help users understand each color’s 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 Colors, these are the fields available to you while building your custom solution.
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 Colors by Status roll-up will be added.
1. Add a Task Spreadsheet Roll-Up Advanced web part to the zone where you want the new Status Colors roll-up to be displayed.
2. Export the roll-up as a .dwp file.
o Click on the Actions menu and then select Export…
o Save the file onto your computer as Tasks by Status Colors.dwp
3. 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
4. Edit Tasks by Status Colors.dwp on your computer
o Change the title of the web part by replacing the text between the <Title></Title> tags with “Tasks by Status Colors”
o Insert this content (click here) between the last property tags and then save the .dwp file
o 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 your .dwp file or click Browse to find it on your computer
o Click Upload
5. 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.
6. The Sites and Lists tab of the administration interface is displayed. Make the appropriate settings and then close the interface. You will see the Tasks roll-up with each row changed to reflect the status of each task.
This section explains how to modify the JavaScript and key to match the color chosen for each status. Repeat these steps for each color.
1. Locate the JavaScript Function StatusBackGround.
o Choose the Status If or Else If statement for which you want to change the color.
o Enter the name of the background color you want to use in place of the color that is already within the bgcolor=”…” attribute. (Example: {document.write('<tr bgcolor=\"red\">');})
2. Locate the JavaScript Function StatusFontColor
o Choose the Status If or Else If statement for which you want to change the color.
o Enter the name of the font color you want to use in place of the color that is already within the color=”…” attribute. This color should be contrast the background color in order to be easily visible by the user. (Example: {document.write('<font color=\"white\">');})
3. In the Status Key HTML at the bottom of the Display Interface, locate the Status Color Text you want to change. (Example: <td bgcolor="red" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Not Started</font></td>)
o Modify the bgcolor=”…” by entering the name of the row background color you want to use for the status.
o Modify the color=”…” by entering the name of the text color you want to use for the status.
This section explains how to modify the JavaScript and Key to match the new Status name chosen for each status. Repeat these steps for each status name.
1. Locate the JavaScript Function StatusBackGround.
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. Locate the JavaScript Function StatusFontColor
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"))
3. In the Status Key HTML at the bottom of the Display Interface, locate the Status Color Text you want to change, then modify the name of the status(es) you want to change. (Example: <td bgcolor="red" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Not Started</font></td>)
<script language="javascript">
function StatusBackGround(status)
{
if (status == "Not Started")
{document.write('<tr bgcolor=\"red\">');}
else if (status == "In Progress")
{document.write('<tr bgcolor=\"yellow\">');}
else if (status == "Completed")
{document.write('<tr bgcolor=\"green\">');}
else if (status == "Deferred")
{document.write('<tr bgcolor=\"blue\">');}
else if (status == "Waiting on someone else")
{document.write('<tr bgcolor=\"purple\">');}
}
function StatusFontColor(status)
{
if (status == "Not Started")
{document.write('<font color=\"white\">');}
else if (status == "In Progress")
{document.write('<font color=\"black\">');}
else if (status == "Completed")
{document.write('<font color=\"white\">');}
else if (status == "Deferred")
{document.write('<font color=\"white\">');}
else if (status == "Waiting on someone else")
{document.write('<font color=\"white\">');}
}
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>
<br><b>Status Key</b></font>
<table border="1" width="100%" id="table2" style="border-collapse: collapse">
<tr>
<td bgcolor="red" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Not Started</font></td>
<td bgcolor="yellow" width="20%"><font face="Arial" style="font-size: 8pt" color="black">In Progress</font></td>
<td bgcolor="green" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Completed</font></td>
<td bgcolor="blue" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Deferred</font></td>
<td bgcolor="purple" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Waiting On Someone Else</font></td>
</tr>
</table>
<Display xmlns="CorasWSC.Task.SpreadSheet.RollUp">
<![CDATA[
<script language="javascript">
function StatusBackGround(status)
{
if (status == "Not Started")
{document.write('<tr bgcolor=\"red\">');}
else if (status == "In Progress")
{document.write('<tr bgcolor=\"yellow\">');}
else if (status == "Completed")
{document.write('<tr bgcolor=\"green\">');}
else if (status == "Deferred")
{document.write('<tr bgcolor=\"blue\">');}
else if (status == "Waiting on someone else")
{document.write('<tr bgcolor=\"purple\">');}
}
function StatusFontColor(status)
{
if (status == "Not Started")
{document.write('<font color=\"white\">');}
else if (status == "In Progress")
{document.write('<font color=\"black\">');}
else if (status == "Completed")
{document.write('<font color=\"white\">');}
else if (status == "Deferred")
{document.write('<font color=\"white\">');}
else if (status == "Waiting on someone else")
{document.write('<font color=\"white\">');}
}
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>
<table cellpadding=0 cellspacing=0 width=100%><tr><td><b>Sort By:</b> <%Title Header%>| <%Status Header%>| <%Assigned To Header%>| <%Due Date
Header%>| <%Priority Header%></td></tr></table>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="Tasks">
<tr>
<td class="ms-smallsectionline" width="30" align="center">Edit</td>
<td class="ms-smallsectionline" width="*">Title</td>
<td class="ms-smallsectionline" width="20%">Assigned To</td>
<td class="ms-smallsectionline" width="15%">Due Date</td>
<td class="ms-smallsectionline" width="15%">Priority</td>
</tr>
<END>
<script language="javascript">StatusBackGround('<%Status%>');</script>
<td class="ms-smallsectionline" width="30"><p align="center"><a href="<%EditItemURL%>"><img src="_layouts/images/edit.gif"
border="0"</a></td>
<td class="ms-smallsectionline" width="*"><a href="<%DisplayItemURL%>"><script
language="javascript">StatusFontColor('<%Status%>');</script><%Title%></a> </td>
<td class="ms-smallsectionline" width="20%"><script language="javascript">StatusFontColor('<%Status%>');</script><%Assigned
To%> </td>
<td class="ms-smallsectionline" width="15%"><script language="javascript">StatusFontColor('<%Status%>');</script><%Due
Date%> </td>
<td class="ms-smallsectionline" width="15%"><script
language="javascript">StatusFontColor('<%Status%>');</script><%Priority%> </td>
</tr>
<END>
<tr valign="bottom">
<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>
<table border="1" width="100%" id="table2" style="border-collapse: collapse">
<tr>
<td bgcolor="red" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Not Started</font></td>
<td bgcolor="yellow" width="20%"><font face="Arial" style="font-size: 8pt" color="black">In Progress</font></td>
<td bgcolor="green" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Completed</font></td>
<td bgcolor="blue" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Deferred</font></td>
<td bgcolor="purple" width="20%"><font face="Arial" style="font-size: 8pt" color="white">Waiting On Someone Else</font></td>
</tr>
</table>
]]>
</Display>
<DateFormat xmlns="CorasWSC.Task.SpreadSheet.RollUp">MM/dd/yyyy</DateFormat>