Custom Display: Contact Roll-Up with Pictures

This section walks through the process of using the roll-up display interface and static grouping to enhance the capabilities of your CorasWorks web parts. For the purposes of this process, a modified picture library will be utilized to display contacts with pictures of individuals.

How It Works

Several items are needed for this process:

o Contacts with Pictures List template

o Picture library

o Document SpreadSheet Roll-Up Advanced web part

o Static grouping displays and display HTML, made available here, that will alter the display of the roll-up showing a phonebook-like display of contacts. It is important to note that this contact phonebook will come from a picture library which has been modified to look and act like a contact list.

These are the items that need to be changed to alter the default static grouping and/or display of the web part.

o Display HTML (click here)

o Static Grouping (click here)

o Add a static group for each letter of the alphabet by last name. The filter has been modified to support the complex needs required for Contacts with Pictures Static Grouping.

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 the field values (%EditItemURL%, %DisplayItemURL%, %Company%, %Contact First Name%, %Contact List Name%, %Status%, %E-mail Address%, %Web Image URL%, %Position%, %Work Phone%, %Home Phone%, %Mobile Phone%, %Fax Number%, %City%, %Address%, %State%, %Country%, %Postal Code%, %E-mail Address 2%, %Notes%, %Web Site%). When working with Contacts with Pictures, 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 Contact with Pictures List with the Contacts with Picture List template (provided with the Workplace Suite) 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 Contacts with Pictures roll-up.

Step 1: Create the Contacts with Pictures Roll-Up

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

2. Add the following data to the Static Grouping property in the Properties section of the web part. It is recommended that you open the Text Builder for pasting the text. This builder is available when you click inside the text box for the property and click on the “…” on the right hand side of the text box. Paste the following text in the Text Builder:

A;Contact Last Name=%' AND ContactLastName LIKE 'A%;#DDDDDD;Black;false
<NEW>B;Contact Last Name=%' AND ContactLastName LIKE 'B%;#DDDDDD;Black;false
<NEW>C;Contact Last Name=%' AND ContactLastName LIKE 'C%;#DDDDDD;Black;false
<NEW>D;Contact Last Name=%' AND ContactLastName LIKE 'D%;#DDDDDD;Black;false
<NEW>E;Contact Last Name=%' AND ContactLastName LIKE 'E%;#DDDDDD;Black;false
<NEW>F;Contact Last Name=%' AND ContactLastName LIKE 'F%;#DDDDDD;Black;false
<NEW>G;Contact Last Name=%' AND ContactLastName LIKE 'G%;#DDDDDD;Black;false
<NEW>H;Contact Last Name=%' AND ContactLastName LIKE 'H%;#DDDDDD;Black;false
<NEW>I;Contact Last Name=%' AND ContactLastName LIKE 'I%;#DDDDDD;Black;false
<NEW>J;Contact Last Name=%' AND ContactLastName LIKE 'J%;#DDDDDD;Black;false
<NEW>K;Contact Last Name=%' AND ContactLastName LIKE 'K%;#DDDDDD;Black;false
<NEW>L;Contact Last Name=%' AND ContactLastName LIKE 'L%;#DDDDDD;Black;false
<NEW>M;Contact Last Name=%' AND ContactLastName LIKE 'M%;#DDDDDD;Black;false
<NEW>N;Contact Last Name=%' AND ContactLastName LIKE 'N%;#DDDDDD;Black;false
<NEW>O;Contact Last Name=%' AND ContactLastName LIKE 'O%;#DDDDDD;Black;false
<NEW>P;Contact Last Name=%' AND ContactLastName LIKE 'P%;#DDDDDD;Black;false
<NEW>Q;Contact Last Name=%' AND ContactLastName LIKE 'Q%;#DDDDDD;Black;false
<NEW>R;Contact Last Name=%' AND ContactLastName LIKE 'R%;#DDDDDD;Black;false
<NEW>S;Contact Last Name=%' AND ContactLastName LIKE 'S%;#DDDDDD;Black;false
<NEW>T;Contact Last Name=%' AND ContactLastName LIKE 'T%;#DDDDDD;Black;false
<NEW>U;Contact Last Name=%' AND ContactLastName LIKE 'U%;#DDDDDD;Black;false
<NEW>V;Contact Last Name=%' AND ContactLastName LIKE 'V%;#DDDDDD;Black;false
<NEW>W;Contact Last Name=%' AND ContactLastName LIKE 'W%;#DDDDDD;Black;false
<NEW>X;Contact Last Name=%' AND ContactLastName LIKE 'X%;#DDDDDD;Black;false
<NEW>Y;Contact Last Name=%' AND ContactLastName LIKE 'Y%;#DDDDDD;Black;false
<NEW>Z;Contact Last Name=%' AND ContactLastName LIKE 'Z%;#DDDDDD;Black;false

3. 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 Contacts with Pictures.dwp

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

o Click on the Actions menu and then Delete

o Click OK to confirm

5. Edit Contacts with Pictures.dwp on your computer

o Change the Title of the web part by replacing the text between the <Title></Title> tags with Contacts with Pictures

o Insert these contents (click here) between the last property tag

o Save your .dwp file.

6. Import your 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.

7. Drag the uploaded web part to the zone where you want the roll-up to be displayed. The administration interface is displayed, where you can choose the sites and lists from which you wish to roll up data.

8. Once you have finished making these selections, close the administration interface. You will see the contacts roll up into each static group. Each static group will include a count at each letter, so choose one that has an amount greater than 0 and expand it.

Contact Roll-Up with Pictures – Display HTML

<END>

<tr>

<a href="<%DisplayItemURL%>"><img border="0" src="<%Web Image URL%>" width="100" height="126"></a></td>

<%Contact First Name%> <%Contact Last Name%>

</a>

</td>

</tr>

<tr>

<td>

<%Position%>, <a href="<%Web Site%>">

<%Company%>

</a>

</td>

</tr>

<tr><td>Work Phone: <%Work Phone%></td></tr>

<tr><td>Home Phone: <%Home Phone%></td></tr>

<tr><td>Mobile Phone: <%Mobile Phone%></td></tr>

<tr>

<td>

Sec. Email Address: <a href="mailto:<%E-mail Address 2%>">

<%E-mail Address 2%>

</a>

</td>

</tr>

<tr><td>Notes: <%Notes%></td></tr>

</table>

<END>

Contact Roll-Up with Pictures – Static Grouping

A;Contact Last Name=%' AND ContactLastName LIKE 'A%;#DDDDDD;Black;false

<NEW>B;Contact Last Name=%' AND ContactLastName LIKE 'B%;#DDDDDD;Black;false

<NEW>C;Contact Last Name=%' AND ContactLastName LIKE 'C%;#DDDDDD;Black;false

<NEW>D;Contact Last Name=%' AND ContactLastName LIKE 'D%;#DDDDDD;Black;false

<NEW>E;Contact Last Name=%' AND ContactLastName LIKE 'E%;#DDDDDD;Black;false

<NEW>F;Contact Last Name=%' AND ContactLastName LIKE 'F%;#DDDDDD;Black;false

<NEW>G;Contact Last Name=%' AND ContactLastName LIKE 'G%;#DDDDDD;Black;false

<NEW>H;Contact Last Name=%' AND ContactLastName LIKE 'H%;#DDDDDD;Black;false

<NEW>I;Contact Last Name=%' AND ContactLastName LIKE 'I%;#DDDDDD;Black;false

<NEW>J;Contact Last Name=%' AND ContactLastName LIKE 'J%;#DDDDDD;Black;false

<NEW>K;Contact Last Name=%' AND ContactLastName LIKE 'K%;#DDDDDD;Black;false

<NEW>L;Contact Last Name=%' AND ContactLastName LIKE 'L%;#DDDDDD;Black;false

<NEW>M;Contact Last Name=%' AND ContactLastName LIKE 'M%;#DDDDDD;Black;false

<NEW>N;Contact Last Name=%' AND ContactLastName LIKE 'N%;#DDDDDD;Black;false

<NEW>O;Contact Last Name=%' AND ContactLastName LIKE 'O%;#DDDDDD;Black;false

<NEW>P;Contact Last Name=%' AND ContactLastName LIKE 'P%;#DDDDDD;Black;false

<NEW>Q;Contact Last Name=%' AND ContactLastName LIKE 'Q%;#DDDDDD;Black;false

<NEW>R;Contact Last Name=%' AND ContactLastName LIKE 'R%;#DDDDDD;Black;false

<NEW>S;Contact Last Name=%' AND ContactLastName LIKE 'S%;#DDDDDD;Black;false

<NEW>T;Contact Last Name=%' AND ContactLastName LIKE 'T%;#DDDDDD;Black;false

<NEW>U;Contact Last Name=%' AND ContactLastName LIKE 'U%;#DDDDDD;Black;false

<NEW>V;Contact Last Name=%' AND ContactLastName LIKE 'V%;#DDDDDD;Black;false

<NEW>W;Contact Last Name=%' AND ContactLastName LIKE 'W%;#DDDDDD;Black;false

<NEW>X;Contact Last Name=%' AND ContactLastName LIKE 'X%;#DDDDDD;Black;false

<NEW>Y;Contact Last Name=%' AND ContactLastName LIKE 'Y%;#DDDDDD;Black;false

<NEW>Z;Contact Last Name=%' AND ContactLastName LIKE 'Z%;#DDDDDD;Black;false

Contact Roll-Up with Pictures – Contents for Contacts with Pictures.dwp

<ShowIcons xmlns="CorasWSC.Document.SpreadSheet.RollUp">false</ShowIcons>

<ListTemplates xmlns="CorasWSC.Document.SpreadSheet.RollUp"><?xml version='1.0' ?><Lists><List><ListType>PictureLibrary</ListType><ListTypeName>PRC0001</ListTypeName><NumberOfFields>52</NumberOfFields><OrderBy>ContactName, ContactFirstName, ContactLastName</OrderBy><ListFields>Contact Name,Contact First Name,Contact Last Name,E-mail Address,E-mail Address 2,Company,Position,Work Phone,Fax Number,Home Phone,Mobile Phone,Address,City,State,Postal Code,Country,Web Site,Notes,Web Image URL</ListFields><DisplayPer>,,,,,,,,,,,,,,,,,,</DisplayPer><SearchFields>Contact Group,Contact Name,Contact First Name,Contact Last Name,E-mail Address,E-mail Address 2,Company,Position,Work Phone,Fax Number,Home Phone,Mobile Phone,Address,City,State,Postal Code,Country,Web Site,Notes,Expires~DATE,Web Image URL</SearchFields></List></Lists></ListTemplates>

<![CDATA[

<END>

<tr>

<a href="<%DisplayItemURL%>"><img border="0" src="<%Web Image URL%>" width="100" height="126"></a></td>

<%Contact First Name%> <%Contact Last Name%>

</a>

</td>

</tr>

<tr>

<td>

<%Position%>, <a href="<%Web Site%>">

<%Company%>

</a>

</td>

</tr>

<tr><td>Work Phone: <%Work Phone%></td></tr>

<tr><td>Home Phone: <%Home Phone%></td></tr>

<tr><td>Mobile Phone: <%Mobile Phone%></td></tr>

<tr>

<td>

Sec. Email Address: <a href="mailto:<%E-mail Address 2%>">

<%E-mail Address 2%>

</a>

</td>

</tr>

<tr><td>Notes: <%Notes%></td></tr>

</table>

<END>

]]>

</Display>