Custom Display: Announcement Roll-Up with Images

This section walks through the process of creating announcement roll-ups that include both text and images. For the purposes of this example, the Company Announcements roll-up is recreated as it appears in the CorasWorks Enterprise Showroom at http://enterprise.corasworks.net.

How it Works

One list, one image library, and several web parts are required for these procedures, including:

o An Announcements 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 parts. 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 Multiple Announcement Spreadsheet Advanced web parts – These do all of the work in this solution. Each web part, named “main”, “left”, and “right”, contains a table that displays text from the Announcements list, as well as images from the Announcements image library, which has been filtered for that web part. For this solution, the DWP file of a standard Announcement Spreadsheet Advanced web part is modified.

While the Content Editor web parts allow 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 Spreadsheet Roll-Up Advanced (Company Announcements.dwp) displays the items in the list and sorting options. The table is hard-coded in the Display property of the Company Announcements.dwp file (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.

The Display property is shown here:

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:

The Filter property specifies in which web part the announcement will display. Remembering that the three Company Announcement web parts are designated “main”, “left” and “right”, these values must be assigned to each web part’s .dwp file. The only difference between the .dwp file of the three web parts is the last line, the <Filter> tag:

o The “main” Announcement Spreadsheet Advanced web part contains:
<Filter xmlns="CorasWSC.Announcement.SpreadSheet.RollUp">publish=main</Filter>

o The “left” Announcement Spreadsheet Advanced web part contains:
<Filter xmlns="CorasWSC.Announcement.SpreadSheet.RollUp">publish=left</Filter>

o The “right” Announcement Spreadsheet Advanced web part contains:
<Filter xmlns="CorasWSC.Announcement.SpreadSheet.RollUp">publish=right</Filter>

Later, when the Announcements list is created, a new column called Publish will be created, in which each announcement will be assigned to one of the web parts.

If you look at the table in Announcement 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 the field values (%Image Location%, %DisplayItemURL%, %Title%, %Body%). When working with an Announcement list, these are the fields available to you while building your custom solution.

Building it

The Scenario

These procedures assume that there is a site at http://site/ and an Announcements list has been created. After populating the Announcements list with data, you realize you want the data to display a little bit differently than a standard Announcement Spreadsheet Advanced Roll-Up permits; you want images to appear alongside your announcements, and you want your list distributed to several zones. To make this possible, an image library must be created, the structure of your list must be modified, and the Display property of several Announcement Spreadsheet Advanced Roll-Up web parts must be edited.

Step 1: Create an Announcements List and Add a Field

1. Create a list using the Announcements schema, then view it at http://site/ Lists/Company%20Announcements/AllItems.aspx and click on Modify Settings and Columns.

2. Add the Publish field.

o Under Columns, click Add a New Column.

o For Column Name, enter Publish.

o For Column Type, select Choice (menu to choose from).

o Enter the possible choices where you are prompted to Type Each Choice on a Separate Line:

o main

o left

o right

o Click OK.

3. Add the Image Location field.

o Under Columns, click Add a New Column.

o For Column Name, enter Image Location.

o For Column Type, select Single Line of Text

o Click OK.

NOTE: When adding Announcements, remember you can refer to your images with relative addresses like “./Image Library/Image1.jpg”

Step 2: Create an Image Library

1. Create a Picture Library.

2. Name it Image Library.

Step 3: Create the Company Announcements Title Roll-Up

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

o Modify the web part properties of your new Content Editor web part

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

o Open the Source Editor and paste in the following code:

o <br><H2>Company Announcements: </H2>

o Click Save and then click OK.

Step 4: Create the Company Announcements Roll-Up

1. Add an Announcements 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 Announcements – main.dwp

o Save the file twice more, as Company Announcements – left.dwp and as Company Announcements – right.dwp

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

o Click on the Actions menu and then Delete

o Click OK to confirm

4. Edit Company Announcements – main.dwp on your computer

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

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

<ListTemplates xmlns="CorasWSC.Announcement.SpreadSheet.RollUp"><?xml version='1.0' ?><Lists><List><ListType>Announcements</ListType><ListTypeName>SPSAR0001</ListTypeName><NumberOfFields>14</NumberOfFields><OrderBy>Title, Body, ExpiresDATE, Publish, ImageLocation</OrderBy><ListFields>Title,Body,Expires~DATE,Publish,Image Location</ListFields><DisplayPer>,,,,</DisplayPer><SearchFields>Title,Body,Expires~DATE,Publish,Image Location</SearchFields></List></Lists></ListTemplates>

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

<Filter xmlns="CorasWSC.Announcement.SpreadSheet.RollUp">publish=main</Filter>

o Save the .dwp file, Company Announcement – main.dwp

5. Edit Company Announcements – left.dwp on your computer

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

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

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

<Filter xmlns="CorasWSC.Announcement.SpreadSheet.RollUp">publish=left</Filter>

o Save the .dwp file, Company Announcement – left.dwp

6. Edit Company Announcements – right.dwp on your computer

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

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

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

<Filter xmlns="CorasWSC.Announcement.SpreadSheet.RollUp">publish=right</Filter>

o Save the .dwp file, Company Announcement – right.dwp

7. Import the modified web parts to your site, http://site/.

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

8. Drag the uploaded web parts to the zone where you want the roll-up to be displayed, ensuring that its Part Order places it below the Company Events Title Content Editor web part, and that the “main”, “left” and “right” versions of the .dwp file are placed in separate and proper zones.

9. Select the Company Announcements list in each web part’s administration window.

Announcement Roll-Up with Images – Company Announcements.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>

<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>

<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>

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

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

Announcement Roll-Up with Images – 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>