Microsoft CorporationCreating mashups using SharePoint: Recruiting Scenario

Microsoft Corp.

Published: July2009

For the latest information, please see

The information contained in this document represents the current view of Microsoft Corporation on the issues discussed as of the date of publication. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.

This White Paper is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS DOCUMENT.

Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.

© 2009 Microsoft Corporation. All rights reserved.

Microsoft, Active Directory, Excel, SharePoint, Silverlight, SQL Server, Popfly, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

The names of actual companies and products mentioned herein may be the trademarks of their respective owners.

Contents

WHO SHOULD READ THIS PAPER?

INTRODUCTION

SOLUTION CONCEPT

Developing the Recruiting Tracking Mashup (Part 1)

Step 1 – Create a Recruits List

Step 2 - Create a New Page

Step 3 – Build the Recruits Data View

Step 4 – Create Map View

Developing the Recruiting Tracking Mashup (Part 2)

Step 1 – Create New Page

Step 2 - Build the Recruit Details Data View

Step 3 – Build Twitter View

Step 4 – Build the MSN Weather View

Using the Recruiting Tracker Mashup

MICROSOFT’S VISION FOR ENTERPRISE MASHUPS

WHO SHOULD READ THIS PAPER?

This information is relevant to developers, IT Professionals, or advanced business users who are considering or planning to implement composite solutions. This paper will help these individuals learn techniques and approaches to when creating solutions using Microsoft Office SharePoint Server 2007 and SharePoint Designer 2007.

INTRODUCTION

This article focuses on building mashups using SharePoint. Specifically, we will show you how to connect to external REST services using SharePoint Designer to bring data into a page in the form of web parts, and connect these web parts to create the mashup. Finally, we will show you how to render data on a geographical map using XSLT.

The business scenario we will implement is about recruiting. Imagine a recruiter who has to stay in touch with a group of potential recruits and provide each one of them with personalized conversations as part of the recruiting process. This scenario is applicable to HR recruiting, college and professional sports recruiting, etc. In our example, the recruiter would like a way to have some insight as to what is going on in the recruit’s life before placing a phone call to follow up. In order to accomplish this, the recruiter would like to create a mashup using Twitter, MSN Weather, and the recruit’s personal information stored in a SharePoint list.

SOLUTION CONCEPT

Our solution will consist of two pages.

The main page (recruits.aspx, shown in Figure 1) will show the recruits information in a list in addition to a geographical map that displays their location. When the user clicks on one of the pins or markers on the map, a bubble pops up showing basic information about the recruit. This bubble also includes a link to our second page (recruit.aspx shown in Figure 2). This page shows the recruit’s information, his or her Twitter image and latest status, and local weather information from MSN Weather.

When a user clicks on the recruit’s name on recruits.aspx, they navigate to recruit.aspx. Recruit.aspx receives a parameter in the query string called “Recruit” to determine which recruit to render.

The solution will be developed using SharePoint Designer 2007 and will utilize the power of the DataFormWebPart and Webpart connections to present data stored in SharePoint lists. To integrate with Microsoft Virtual Earth, we will be adding a little JavaScript, and demonstrating the power of the JQuery library to simplify our Virtual Earth integration with SharePoint List data.

Developing the Recruiting Tracking Mashup (Part 1)

Recruits.aspx has essentially two areas: the Recruits list, and a Virtual Earth Map displaying the recruits’ locations. To build the page, we need to do the following:

  1. Create a Recruits List
  2. Create a New Page
  3. Build the Recruits Data View
  4. Build the Recruits Map View

Step 1 – Create a Recruits List

Create a new list named “Recruits” by selecting Site Actions > View All Site Content”. This SharePoint list should contain basic recruit contact information.

Figure 3 - Create Recruits List

The list needs to include full address information including Street Address, City, State and Zip (to map their location). ZIP is also required to connect to MSN Weather. The list also needs to contains a column named Twitter (the Twitter Screen Name of the candidate).

Figure 4 - Add Custom Fields

Step 2 - Create a New Page

The next step is to create the page we will use to display our mashup. To create our new page:

  1. Run SharePoint Designer 2007
  2. Click File > Open Site and enter the URL of the site to open.
  3. From the folder view tree, expand the _catalogs\masterpage folder and select “default.master”
  4. Right-Click and select New from Master Page on the context menu

A new page named “Untitled_1.aspx” is created and displayed in the edit pane. Save the page with the desired name and location (Ctrl+S or click the Save button). We are going to call the page “rentals.aspx” and save it to the root of the site.

Now that we have created our new page, let’s setup our default layout for the page. Select the Design tab at the bottom to allow us to view the default page, and then right-click on the PlaceHolderMain (Master) and select Create Custom Content. This allows us to insert our own HTML into the page.

Figure 6 - Create Custom Content

Now let’s insert a simple table layout. Select the code view at the bottom of the page to allow us to see the page markup, and insert a simple HTML table between the <ASP:Content> tags for PlaceHolderMain. We are making the map column a fixed width 800px by 500px.

Next we want to include the JavaScript libraries for Virtual Earth and JQuery. Add the following code between the <ASP:Content> tags with contentplaceholderid=”PlaceHolderAdditionalPageHead”. This place holder is merged by SharePoint with the site master page, and anything included in this placeholder is added to the page <HEAD>.

Figure 8 - Page Header

Step 3 – Build the Recruits Data View

The first thing we will want to do is add the Recruits list to the bottom of the page. SharePoint Designer makes it easy to add a Data View to the page. Select the Design tab at the bottom of the page to view the page, and perform the following steps:

  1. Select the [Recruits List] text in the bottom row of our layout table. This placeholder text is there to make it easy to identify our <DIV> area for insertion of the Data View.
  2. Select Data View > Insert Data View from the top menu. The Data Source Library task pane should automatically be displayed in the right-side of the screen. If the Data Source Library is not displayed, you can select Task Panes > Data Source Library from the top menu
  3. Expand the SharePoint Lists node and select the Recruits list. From the drop-down menu, select Show Data.
  4. Use Ctrl-Click to select all of the desired fields to show in the list about the rental, then click Insert Selected Fields as… and select “Multiple Item View” from the drop-down menu.

The list view will now display our existing content in a table format with headers for each column.

We now need to make a small modification to the XSLT generated by the DataFormWebPart to add a hyperlink to the Full Name column to load the Recruit.aspx page details. Select the Code tab to view the page markup, and find the <xsl:template> with the name attribute “dvt_1.rowview”. Make the following change.

Figure 10 - Data View XSLT Modifications

Step 4 – Create Map View

The Microsoft Virtual Earth API is a JavaScript library that can be added to any Web page to provide a map view. The API provides functions to add markers to a map, center the map, zoom the map, display a route with waypoints, etc.In our mashup, we want to be able to take addresses from our Recruit List and display them as markers on the Map. We will combine the power of JQuery with the Microsoft Virtual Earth API to build our Map view.

The first thing we need to do is create a new scripts folder off the root folder of the site. The script can technically go anywhere, but a scripts folder is a common folder name.

The next step is to link the Virtual Earth API and JQuery into our page. While it is most common practice to link scripts into the SharePoint MasterPage, for the purposes of our mashup, we will link them directly into our page by adding <SCRIPT> tags to the PlaceHolderAdditionalPageHead. This placeholder in SharePoint is merged with the page head provided by the Masterpage.

Within the PlaceHolderAdditionalPageHead we can also add script directly into the page. Any code we place in the $(document).ready() function will be executed when the page loads. For those unfamiliar with JQuery, the $ object is a root symbol for the JQuery library. It also possible to replace the $ with the full jQuery(document).ready() syntax, but using the $ symbol is more commonly used.


Now that we have our page header script stubbed out, and our external JavaScript libraries, loading it is time to initialize the Virtual Earth map object and start placing markers on it. Below I have filled out the $(document).ready() function to include the initialization code necessary.


Figure 13 - Page Initialization Script

Here is a brief walk-through the initialization code:

  1. Load Map: We create a new VEMap object by passing in the ID of an empty <DIV> tag where the map object will be injected. We initialize the map by calling the LoadMap() function. These two lines of code are all that is required to see a Map displayed on your page, although there will be no custom information loaded.
  2. Get Recruits: By inspecting the HTML markup generated by the DataFormWebPart for the Recruits List, we can use JQuery to easily pull information from HTML elements and create an array of objects that can then be used to place markers on the Map object.
  3. Find Locations:The Virtual Earth API expects latitude and longitude to plot markers or mark routes on the Map. Now that we have our array of Recruits addresses, we need to call theVEMap.Find() function on them to lookup the latitude and longitude and mark the location on the map.
  4. Attach Event Handlers: Event handlers respond to user actions on the page. In our mashup design, when the user clicks a marker on the map, we want to load the Recruit.aspx page for the selected candidate.

Let’s drill into the two most important functions described above: the “getRecruits()” and “findLocations()”.

The “getRecruits()” function uses the power of JQuery selectors and iterators to make looping through the HTML table containing the Rental List easy.

If we examined the XSL script associated with the Recruits Data View we would see the markup used to render the list is a normal table structure.

To make it possible to find Rental List rows easily with JavaScript, an ID tag was added to each <TR> generated by the XSL to indicate a row item.

By looping over each row, we can pull out individual field values based on the ordinal position of the column – the index of the <TD> tag within the <TR> row.

The code assigns those values to an array of objects, and then formats two pieces of information used by the Virtual Earth Map object – a location containing the full address of the rental property (street address, city, state, zip), and a description formatted using HTML markup that is displayed in a tooltip popup when the user hovers their mouse over a marker location on the map.

Figure 15 - Add Map Markers

Now that we have our array of rental objects, it is time to load them into the Map.The Virtual Earth Map API plots markers and routes using latitude and longitude. Since we often don’t have those rather abstract values handy, it is often necessary to find those values based on a full or partial address.

The VEMap.Find() function takes a number of parameters including a callback function that is called when one or more matching locations is found for a provides address.In our findLocations() method, we loop through each of the Recruit objects in our array and perform a VEMap.Find() to lookup and plot the location on the map.

We can now save our final page, right-click on the page in the Folder View, and select “Preview in Browser”.

Clicking on a marker, or selecting the name in the list will load Recruit.aspx to show the Recruit details.

Developing the Recruiting Tracking Mashup (Part 2)

The Recruit Details page has three areas we need to build: the individual’s information, the Twitter web part, and the MSN Weather web part. The following is a concise outline of how mashing.aspx is created:

  1. Create a New Page
  2. Build the Recruit Details View
  3. Build the Twitter View
  4. Build the MSN Weather View

Step 1 – Create New Page

The next step is to create the page we will use to display our mashup. To create our new page:

  1. Run SharePoint Designer 2007
  2. Click File > Open Site and enter the URL of the site to open.
  3. From the folder view tree, expand the _catalogs\masterpage folder and select “default.master”
  4. Right-Click and select New from Master Page on the context menu

A new page named “Untitled_1.aspx” is created and displayed in the edit pane. Save the page with the desired name and location (Ctrl+S or click the Save button). We are going to call the page “recruits.aspx” and save it to the root of the site.

Now that we have created our new page, let’s setup our default layout for the page. Select the Design tab at the bottom to allow us to view the default page, and then right-click on the PlaceHolderMain (Master) and select Create Custom Content. This allows us to insert our own HTML into the page.

Figure 17 - Create Custom Content

Now let’s insert a simple table layout. Select the code view at the bottom of the page to allow us to see the page markup, and insert a simple HTML table between the <ASP:Content> tags for PlaceHolderMain. The layout includes areas for the Recruit Details, Twitter Status and Local Weather.

Figure 18 - Page Layout

If we select the Design view tab at the bottom of the page editor, our page will look like this.

Step 2 - Build the Recruit Details Data View

Let’s start by inserting and configuring our Data View:

  1. Select the placeholder text on the page for Recruit Details
  2. Select Data View > Insert Data View
  3. From the Data Source Library, select the Recruits list and from the drop-down, select Show Data
  4. Select our detail fields: FullName, Phone, Email, Address, City, State, Zip and Comments
  5. From the Insert Selected Fields As…, select Single Item View.

Our page should now display the default single item two column view. The next step is to modify the default XSLT generated by the DataFormWebPart to format the Recruit Details for our design. Select the Code tab from the bottom of the page editor to view the page markup.