Custom Display: Roll-Up with Sort Options on Top

This section walks through the process of creating a roll-up with sorting options that appear outside the roll-up table display. For the purposes of this example, the Company Events roll-up is recreated as it appears in the CorasWorks Enterprise Showroom at http://enterprise.corasworks.net.

How it Works

One list and two web parts are required for these procedures.

o An Event list

o A Content Editor web part – This web part is used simply to provide a title for the roll-up, and sits above the Spreadsheet Advanced web part. The content for the Content Editor web part is set in the Source Editor of the Content Editor’s web part properties, and contains a simple table.

o An Event Spreadsheet Advanced web part – This web part does all of the work in this solution. It creates a table containing the items in the Events list, and creates links allowing users to sort the items it lists. For this solution, the DWP file of a standard Event Spreadsheet Advanced web part is modified.

While the Content Editor web part allows the addition of scripts through a Source button in the web part properties, the Spreadsheet Roll-Up Advanced web part’s DWP must be modified to achieve the desired functionality.

A specially modified advanced spreadsheet roll-up (Company Events.dwp) displays the items in the list and the sorting options. The table is hard-coded in the Display property of the Company Events.dwp file (click here).

The Display property is shown here:

<Display xmlns="CorasWSC.Event.SpreadSheet.RollUp"><![CDATA[<table cellpadding=0 cellspacing=0 width=100%><tr><td colspan=2><b>Sort By:</b> <%Title Header%>| <%Begin Header%>| <%End Header%></td></tr><tr><td colspan=2> </td></tr><END><tr><td colspan=2 align=left><b><a href="<%DisplayItemURL%>"><%Title%></a></b></td><tr><td align=left colspan=2><%Description%></td></tr><tr><td width=50%><b>Begin:</b> <%Begin%></td><td width=50%><b>End:</b> <%End%></td></tr><tr><td colspan=2> </td></tr><END></table>]]></Display>

Remembering that certain symbols (“<”, “>”, and “&”) have to be translated for use in the .dwp file, it may be useful to see Company Events.dwp written with symbols that are more easily understood:

<Display xmlns="CorasWSC.Event.SpreadSheet.RollUp"><table cellpadding=0 cellspacing=0 width=100%><tr><td colspan=2><b>Sort By:</b> <%Title Header%>| <%Begin Header%>| <%End Header%></td></tr><tr><td colspan=2> </td></tr><END><tr><td colspan=2 align=left><b><a href="<%DisplayItemURL%>"><%Title%></a></b></td><tr><td align=left colspan=2><%Description%></td></tr><tr><td width=50%><b>Begin:</b> <%Begin%></td><td width=50%><b>End:</b> <%End%></td></tr><tr><td colspan=2> </td></tr><END></table></Display>

If you look at the table in the Spreadsheet Roll-Up Advanced roll-up, 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%, %Begin Header%, %End Header%) and the field values (%DisplayItemURL%, %Title%). When working with an Event list, these are the available fields while building a custom solution.

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.

Building it

The Scenario

These procedures assume that there is a site at http://site/ and an Events list has been created. After the Events list has been populated with data, you realize you want the data to display a little bit differently than a standard Event Spreadsheet Advanced Roll-Up Advanced permits. To make this change, you need to edit the web part’s Display property.

Step 1: Create the Company Events Title Roll-Up

1. Add a Content Editor web part to the zone where you want the roll-up to be displayed.

2. Modify the web part properties of your new Content Editor web part

o In the Appearance Properties:, change the Title to “Company Events”

o Open the Source Editor and paste the following code into the Source Editor:
<br><H2>Total Expenses: </H2>

o Click Save and then click OK

Step 2: Create the Company Events Roll-Up

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

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

o Click on the Actions menu and then Export…

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

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

o Click on the Actions menu and then Delete

o Click OK to confirm

4. Edit Company Events.dwp on your computer

o Change the Title of the web part by replacing the text between the <Title></Title> tags with “Company Events”

o Insert the following lines between the last property tag <TypeName></TypeName>, and before the closing tag, </WebPart>:

<ListTemplates xmlns="CorasWSC.Event.SpreadSheet.RollUp"><?xml version='1.0' ?><Lists><List><ListType>Events</ListType><ListTypeName>ERS00001</ListTypeName><NumberOfFields>12</NumberOfFields><OrderBy>Title, BeginDATE, EndDATE, Description</OrderBy><ListFields>Title,Begin~DATE,End~DATE,Description</ListFields><DisplayPer>,,,</DisplayPer><SearchFields>Title,Begin~DATE,End~DATE,Description</SearchFields></List></Lists></ListTemplates>

<ShowSearch xmlns="CorasWSC.Event.SpreadSheet.RollUp">false</ShowSearch>

o Save the .dwp file as Company Events.dwp.

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

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

6. Drag the uploaded web part to the zone where you want the roll-up to be displayed, making sure that its Part Order places it below the Company Events Title Content Editor web part.

7. Select the Company Events list on the web part’s Sites and Lists tab of the administration interface.

Roll-Up with Sort Options on Top – Company Events.dwp

<?xml version="1.0" encoding="utf-8"?>

<Title>Company Events</Title>

<FrameState>Normal</FrameState>

<HelpLink>http://download.corassolutions.com/WPSupport/Adv-RollUp-Spreadsheet/</HelpLink>

<Dir>Default</Dir>

<MissingAssembly>This Web Part has failed to load due to a missing software file. Please contact CorasWorks (http://www.corasworks.net) and provide them with the name of the Web Part [Event-Spreadsheet Roll-Up Adv] and the URL in your browser.</MissingAssembly>

<PartImageLarge>_WPR_/Event.gif</PartImageLarge>

<Assembly>CorasWSC.Event.SpreadSheet.RollUp.Adv, Version=51.0.29.3, Culture=neutral, PublicKeyToken=db78bf77ebd2e732</Assembly>

<TypeName>CorasWSC.Event.SpreadSheet.RollUp.Adv</TypeName>

<ShowAdmin xmlns="CorasWSC.Event.SpreadSheet.RollUp">false</ShowAdmin>

<ShowSearch xmlns="CorasWSC.Event.SpreadSheet.RollUp">false</ShowSearch>

Roll-Up with Sort Options on Top – Content Editor Web Part.dwp

<?xml version="1.0" encoding="utf-8"?>

<Title>Content Editor Web Part</Title>

<Description>Use for formatted text, tables, and images.</Description>

<FrameState>Normal</FrameState>

<Dir>Default</Dir>

<PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge>

<Assembly>Microsoft.SharePoint, Version=11.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>

<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>

<TR>

<font face="tahoma" size="2" color="#000066">Company Events</font></b><hr style="color: #2254B1; height: 4px"></TD></TR>

</TABLE>]]></Content>

</WebPart>