Custom Display: Event Roll-Up with Standard SharePoint Look and Feel

This section walks through the process of using the roll-up display interface with JavaScript to enhance the capabilities of CorasWorks web parts. For the purposes of these procedures, a modified Event list displayed in same way as an Event list homepage will be utilized.

How It Works

Several items are needed in order to show a roll-up with Events and display them in the same way as is shown inside an Event list:

o A standard SharePoint Event list with no modifications to field names

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

o Display HTML and JavaScript, made available here, to alter the display of the roll-up

As implemented in the Standard Look and Feel Events, one Event list and one Event Spreadsheet Roll-Up with the display interface which includes HTML and JavaScript are utilized. These are the items that need to be changed to alter the default display of the web part.

1. JavaScript (click here )

o ShowAttachment – Returns the Paper Clip image if attachments exist for the event

o ShowWorkspace – Returns the Workspace image and URL if an Event Workspace exists for the event

o ShowRecurrence – Return the Recurrence image if the Event is of a Recurring type

o ShowNext – Displays a Next link if more items are to be displayed, connected to Maximum Results Returned.

o ShowPrevious – Displays a Previous link if previous items exist to be displayed, connected to Maximum Results Returned.

2. Display HTML (click here )

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%, %Location Header%, %Begin Header%, %End Header%) and the field values (%DisplayItemURL%, %Workspace%, %Attachments%, %Recurrence%, %Title%, %End%, %Begin%, %Location%, %NextURL%, %PreviousURL%). When working with Events with Time Zone, these are the fields available to you while building your custom solution.

Building It

The Scenario

These procedures begin with the assumption that a standard SharePoint Event list has been created in your site and it has been populated with some test data. There is a personal dashboard at http://site/yoursite/ where you want add the Standard Look and Feel Events roll-up.

Create the Standard Look and Feel Events Roll-Up

1. Add an Event Spreadsheet Roll-Up Advanced web part to the zone where you want your roll-up to be displayed.

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

o Click on the Actions menu and then Export…

o Save the file on your computer as Standard Events.dwp

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

o Click on the Actions menu and then Delete

o Click OK to confirm

4. Edit Standard Events.dwp on your computer

o Change the Title of the web part by replacing the text between the <Title></Title> tags with Standard Look – Events

o Insert the content from here (click here ) between the last property tags and then save the .dwp file

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

o Place the page in Edit mode and select the Add a Web Part link

o Click the Advanced Web Part gallery and options link

o Click the small arrow on the right-hand side of the Browse bar and select Import

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

o Click Upload

6. Drag the uploaded web part to the zone where you want your roll-up to be displayed.

7. The administration interface is displayed, where you can choose the sites and lists to be included in the roll-up. Make the desired selections and then click OK to close the administration interface. You should see the Events roll-up displayed in the same manner as the Event lists pages for your list.

JavaScript for Event Roll-Up with Standard SharePoint Look and Feel

function ShowAttachment(strAttachment)

{

if (strAttachment == "-1")

{

document.write('<img src=\"_layouts/images/attachhd.gif\">');

}

else

{

document.write(' ');

}

function ShowWorkspace(strWorkspace, strTarget)

{

if (strWorkspace != "")

{

var arrHoldLink = strWorkspace.split(",");

document.write('<a target=\"" + strTarget + "\" href=\"" + arrHoldLink[0] + "\"><img border=\"0\"

src=\"_layouts/images/mtgicon.gif\"></a>');

}

else

{

document.write(' ');

}

function ShowReccurence(strReccurence)

{

if (strReccurence == "-1")

{

document.write('<img src=\"_layouts/images/recur.gif\">');

}

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>

Display HTML for Event Roll-Up with Standard SharePoint Look and Feel

<tr>

</tr>

<END>

<tr>

<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script

language="javascript">ShowReccurence("<%Recurrence%>")</script></td>

<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script

language="javascript">ShowAttachment("<%Attachments%>", "_self")</script></td>

<td class="ms-smallsectionline" width="4%" align="center" valign="top"><script

language="javascript">ShowWorkspace("<%Workspace%>")</script></td>

<td class="ms-smallsectionline" width="30%" align="left" valign="top"><a href="<%DisplayItemURL%>"

target="_self"><%Title%></a> </td>

</tr>

<END>

<td valign="abs_bottom" align="left" colspan="4"><script

language="javascript">ShowPrevious('<%PreviousURL%>')</script></td>

<td valign="abs_bottom" align="right" colspan="3"><script

language="javascript">ShowNext('<%NextURL%>')</script></td>

</tr>

</table>

Contents for Standard Events.dwp – Event Roll-Up with Standard SharePoint Look and Feel

<ListTemplates xmlns="CorasWSC.Event.SpreadSheet.RollUp"><?xml version='1.0' ?><Lists><List><ListType>Events</ListType><ListTypeName>ERC0001</ListTypeName><NumberOfFields>20</NumberOfFields><OrderBy>Title, BeginDATE, EndDATE, Description, Location, Recurrence, Workspace, Attachments</OrderBy><ListFields>Title,Begin~DATE,End~DATE,Description,Location,Recurrence,Workspace,Attachments</ListFields><DisplayPer>,,,,,,,</DisplayPer><SearchFields>Title,Begin~DATE,End~DATE,Description,Location,Recurrence,Workspace,Attachments</SearchFields></List></Lists></ListTemplates> <DontConvertHttp xmlns="CorasWSC.Event.SpreadSheet.RollUp">true</DontConvertHttp>

<![CDATA[

function ShowAttachment(strAttachment)

{

if (strAttachment == "-1")

{

document.write('<img src=\"_layouts/images/attachhd.gif\">');

}

else

{

document.write(' ');

}

function ShowWorkspace(strWorkspace, strTarget)

{

if (strWorkspace != "")

{

var arrHoldLink = strWorkspace.split(",");

document.write('<a target=\"" + strTarget + "\" href=\"" + arrHoldLink[0] + "\"><img border=\"0\"

src=\"_layouts/images/mtgicon.gif\"></a>');

}

else

{

document.write(' ');

}

function ShowReccurence(strReccurence)

{

if (strReccurence == "-1")

{

document.write('<img src=\"_layouts/images/recur.gif\">');

}

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>

<tr>

</tr>

<END>

<tr>

<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script

language="javascript">ShowReccurence("<%Recurrence%>")</script></td>

<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script

language="javascript">ShowAttachment("<%Attachments%>", "_self")</script></td>

<td class="ms-smallsectionline" width="4%" align="center" valign="top"><script

language="javascript">ShowWorkspace("<%Workspace%>")</script></td>

<td class="ms-smallsectionline" width="30%" align="left" valign="top"><a href="<%DisplayItemURL%>"

target="_self"><%Title%></a> </td>

</tr>

<END>

<td valign="abs_bottom" align="left" colspan="4"><script

language="javascript">ShowPrevious('<%PreviousURL%>')</script></td>

<td valign="abs_bottom" align="right" colspan="3"><script

language="javascript">ShowNext('<%NextURL%>')</script></td>

</tr>

</table>

]]>

</Display>