Microsoft SharePoint 2010 Business Application Blueprints

SharePoint ships with a number of site template options, but most of the templates were built for a very specific type purpose. When choosing a template for an Intranet site, it is best to select one of the more generic site options. The three to consider are:

A full overview of the available templates can be found on the Microsoft Office website at http://office.microsoft.com/en-us/sharepoint-server-help/a-preview-of-the-sharepoint-server-2010-site-templates-HA101907564.aspx

After choosing a site template and provisioning the site collection, the next step is to activate the initial features needed to support the Intranet site. The robust feature deployment and activation system supported in SharePoint makes it very easy to fine-tune the functionality available within a site. Since the available features vary depending on which version you are running (Foundation, Server Standard, and Server Enterprise), I will specify which version each feature ships with.

The following is a list of features activated on the site being configured for this book:

For anyone that is not familiar with the publishing features, it is important to understand that the document libraries setup for publishing, including the resources provisioned when the feature is activated such as the Style Library, will require that all changes be fully published for non-administrators to be able to view the most recent changes. If changes are made to pages, scripts, images, or CSS stylesheets included in any of these libraries and are not fully published, you will see unexpected behaviors such as 404 errors, out of date content, or miscellaneous unexpected SharePoint page level errors relating to the item's status.

A full overview of the publishing features in SharePoint 2010 is available at http://technet.microsoft.com/en-us/library/ff628963.aspx

Then next step is to choose the high-level structure of the front page. The two default options are a standard home page or the new Wiki home page. While the Wiki home page offers some nice improvements over the standard home page formatting, a better option is to configure a new library to hold Web Part pages in order to leverage the configuration and security capabilities of a SharePoint document library.

With the publishing features activated on SharePoint Server Standard or Enterprise there are a number of layout options to consider. One of the important changes with SharePoint 2010 is that page layouts can now be changed, where previously they were set at the time the page was created and could not be changed later.

After creating the library, create a page and select the Page tab. If this is going to be the home page for the site, be sure to click the Make Homepage button in the ribbon. The Page Layout option will be displayed in the ribbon, and clicking it will provide you thumbnails of the layout options as seen in the following screenshot:

When choosing one of the layouts it is important to consider if you want the left hand navigation to be displayed or hidden. In scenarios where the left hand navigation is important I would select the Blank Web Part page layout under the Welcome Page grouping. In scenarios where you need more screen real estate or where the left hand navigation is not as important on the top-level site you can select the Splash layout. The Splash layout I have selected for this exercise is displayed in the following screenshot:

It is also possible to customize this layout if needed in SharePoint Designer, which may be preferable for simple changes instead of creating custom page layouts. It is important to note that editing page and page layouts directly with SharePoint Designer will put the item in an unghosted state which means that the page will no longer reference the common version of the item and instead store a version of the item in the content database that the site is stored in. This change will have a small impact on performance, but can also complicate future upgrades and should therefore be done with caution.

In the Top Web Part Zone, the default orientation is set to "Vertical", but for the page we are creating, it is more valuable set to "Horizontal" as shown in the following code snippet:

<WebPartPages:WebPartZone runat="server"
AllowPersonalization="false" ID="TopZone" FrameType="TitleBarOnly"
Title="<%$Resources:cms,WebPartZoneTitle_Top%>"
Orientation="Horizontal">

To make the change perform the following steps:

With the layout selected and the page set as the home page, we are now ready to start adding content.

The easiest way to use this service is to load the content into the standard XML Web Part. This approach will also work in cloud-based environments such as Office 365. The XML Viewer Web Part is included under the Content Rollup category as displayed in the following screenshot:

With the XML Web Part added to the page, configure the appearance properties such as title, height, and width. Set the XML link to the path of the service with the required inputs, and set the XSL link to the path of your XSL file. The best way to manage the XSL file is to upload it into a central style and script library on the site.

The contents of the XSL file should format the content into the desired format. The Weather.com web service will return a number of key attributes including the location, the current temperature, and the current time.

A rendered version of the Current Weather Web Part is displayed in the following screenshot:

The standard SharePoint Web Parts can also be exported with configuration settings making it easy to reuse the content on many pages or sites. It can either be uploaded to the desired page(s) or added to the site collection's Web Part Gallery.

We will provision a List Definition and List Instance to store the notification content. This will make it easy to reuse the list if necessary in cases where you need to manage the notifications separately for sites that target different sets of users or in different farms.

To create the feature perform the following steps:

Notification list displayed

Since we are creating both a List Definition and a List Instance, the defined list will be automatically created once the SPBlueprints Notification List Feature is activated. It is important to note that the OnQuickLaunch property was set to FALSE so the list will not show up in the Quick Launch menu. To access the list you will need to click the Site Actions menu, and select the View All Site Content menu item.

The pre-defined list view also makes it easy for the content manager to review the currently logged notifications as shown in the following screenshot:

The New Item form includes the fields we defined in the List Definition, and can be used to log a variety of notifications as displayed in the following screenshot:

To display notifications on the page we will query the Notification list we previously deployed, and leverage the SP.UI.Status class made available in the ECMA Client OM.

<div id="SetStatus">
<script type="text/ecmascript" language="ecmascript">
</script>
</div>

var statusId = '';
var isitDlg = window.location.href.match(/isDlg/i) != null;
if (!isitDlg) {
ExecuteOrDelayUntilScriptLoaded(LoadNotifications, "sp.js");
}

function LoadNotifications() {
var curDate = new Date();
var curDFormatted = curDate.getYear() + "-" +
(curDate.getMonth() + 1) + "-" + curDate.getDate() + "T" +
curDate.getHours() + ":" + curDate.getMinutes() + ":" +
curDate.getSeconds() + "Z";
var listTitle = "Notification";
context = SP.ClientContext.get_current();
var notifList =
context.get_web().get_lists().getByTitle(listTitle);
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query><ViewFields><FieldRef
Name='Title' /><FieldRef Name='Notification' /><FieldRef
Name='NotifType' /><FieldRef Name='NotifStart' /><FieldRef
Name='NotifEnd' /><FieldRef Name='InfoLink'
/></ViewFields><Where><And><Leq><FieldRef Name='NotifStart'
/><Value IncludeTimeValue='TRUE' Type='DateTime'>" +
curDFormatted + "</Value></Leq><Geq><FieldRef Name='NotifEnd'
/><Value IncludeTimeValue='TRUE' Type='DateTime'>" +
curDFormatted +
"</Value></Geq></And></Where><OrderBy><FieldRef
Name='NotifStart' /></OrderBy></Query></View>");
this.listItems = notifList.getItems(camlQuery);
context.load(listItems);
context.executeQueryAsync(ReadListItemSucceeded,
ReadListItemFailed);
}

function ReadListItemSucceeded(sender, args) {
var message = '';
var items = listItems.getEnumerator();
while (items.moveNext()) {
var listItem = items.get_current();
switch (listItem.get_item('NotifType')) {
case "Emergency":
imageRef = "<img
src='/_layouts/IMAGES/error16by16.gif' align='absmiddle'
border='0' alt='Emergency'>";
break;
case "Warning":
imageRef = "<img
src='/_layouts/IMAGES/warning16by16.GIF' align='absmiddle'
border='0' alt='Warning'>";
break;
default:
imageRef = "<img
src='/_layouts/IMAGES/info16by16.gif' align='absmiddle' border='0'
alt='Information'>";
}
message = listItem.get_item('Notification') + " " +
imageRef;
SetStatus(listItem.get_item("Title") + ":", message,
listItem.get_item('NotifType'));
}
}

function SetStatus(title, message, type) {
statusId = SP.UI.Status.addStatus(title, message, false);
switch (type) {
case "Emergency":
SP.UI.Status.setStatusPriColor(statusId, 'red');
break;
case "Warning":
SP.UI.Status.setStatusPriColor(statusId, 'yellow');
break;
default:
SP.UI.Status.setStatusPriColor(statusId, 'blue');
}
}

function ReadListItemFailed(sender, args) {
alert('Error: ' + args.get_message());
}

The rendered version of the list driven notification system is shown in the following screenshot. If multiple notices are returned, each will be displayed on a separate line.

Since this is content we want to display globally, we are going to include it as part of the standard footer in the Master Page. This will guarantee that it is easily accessible. For the presentation, I think this is a good use of the Client OM's SP.UI.Dialog class which creates an Ajax shadowbox.

To simplify the example, we will use a standard SharePoint Survey list for the Incident Report form. You could alternatively create an application page and deploy it to the farm.

We are going to start by adding the div container govFooter to the Master Page, just above the<SharePoint:DeveloperDashboard runat="server"/> control. The remainder of the code will be placed inside this container. We will reference the stylesheet class s4-notdlg which has special meaning within SharePoint. When this class is referenced, it will ensure that this content will be hidden from any dialog windows, such as the ones we are launching with the code added in this section:

<div id="govFooter" class="s4-notdlg" style=" text-align:center;
width:100%">
<script type="text/ecmascript">
</script>
</div>

Calling the modal dialog is as easy as calling the showModalDialog() function, and passing it the input options for what to display. The showPolicy() and showIncidentForm() functions are as follows:

function showPolicy() {
var _options = { url: "http://intranet/Pages/Acceptable-Use-
Policy.aspx", width: "800", title: "Appropriate Use Policy" };
SP.UI.ModalDialog.showModalDialog(_options);
}
function showIncidentForm() {
var _options = { url:
"http://intranet/Lists/Incident%20Reports/NewForm.aspx", width:
"800", title: "Report Incident" };
SP.UI.ModalDialog.showModalDialog(_options);
}

Next we just have to call the two functions with a JavaScript function call added to an anchor tag:

<a href="javascript:showPolicy();" style="text-
decoration:underline">View Acceptable Use Policy</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="javascript:showIncidentForm();" style="text-
decoration:underline">Report Incident</a>

The standard footer linking to the Appropriate Use Policy and the Incident Report dialog is represented in the following screenshot:

The Appropriate Use Policy dialog is represented in the following screenshot:

The Incident Report dialog is represented in the following screenshot:

To create the Employee Corner Web Part we will create a custom Web Part in Visual Studio 2010. The Web Part will leverage the Search API's FullTextSqlQuery class to query the People search scope bringing back values stored within the user profiles that are currently indexed.

It is important to understand the underlying architecture in order to know which development path is really an option. Normal SharePoint list and library data is stored inside of the content database associated with the site collection. The content associated with SharePoint's service applications are however stored in separate databases since those services and the content is not tied to any one site, but available globally to all web applications associated with the service application. This means that the service applications are not accessible via the Client OM or via Sandbox Solutions without implementing some sort of Full Trust proxy that would have to be installed on the server and provide access to the server API. Based on these boundaries, a server solution makes the best choice for the approach in most environments. If the solution needs to be deployed to an environment with server deployment limitations the Full Trust proxy or other alternatives would have to be evaluated.

To create the initial project:

private string searchProxyName;
[WebBrowsable(true),
WebDisplayName("Search Proxy Name"),
WebDescription("Please provide the name of your Search Service
Application."),
Personalizable(PersonalizationScope.Shared)]
public string SearchProxyName
{
get { return searchProxyName; }
set { searchProxyName = value; }
}

Microsoft.SharePoint.Administration
Microsoft.Office.Server.Search
Microsoft.Office.Server.Search.Query
Microsoft.Office.Server.Search.Administration

SearchQueryAndSiteSettingsServiceProxy settingsProxy =
SPFarm.Local.ServiceProxies.GetValue<SearchQueryAndSiteSettingsSer
viceProxy>();
SearchServiceApplicationProxy searchProxy =
settingsProxy.ApplicationProxies.GetValue<SearchServiceApplication
Proxy>(this.searchProxyName);
FullTextSqlQuery mQuery = new FullTextSqlQuery(searchProxy);

mQuery.QueryText = "SELECT LastName, FirstName, JobTitle,
accountname, HireDate, Birthday, PictureThumbnailURL FROM SCOPE()
WHERE (\"scope\" = 'People') AND HireDate >= DATEADD (DAY, -30,
GETGMTDATE())";

mQuery.ResultTypes = ResultType.RelevantResults;
mQuery.TrimDuplicates = true;
mQuery.RowLimit = 100;
ResultTableCollection resultNew = mQuery.Execute();

protected override void CreateChildControls()
{
this.literalMessage = new Literal();
this.literalMessage.ID = "literalMessage";
this.Controls.Add(this.literalMessage);
}

DataTable resultsNewHire = new DataTable();
if (resultNew.Count > 0)
{
ResultTable relevantResults =
resultNew[ResultType.RelevantResults];
resultsNewHire.Load(relevantResults,
LoadOption.OverwriteChanges);
messages.AppendFormat(@"<table width='360' border='0'
cellpadding='0' cellspacing='0'><tr><td align='left'
valign='top' width='14' class='ms-wpTdSpace'
background='/Style%20Library/Images/shadow-
left.png'>&nbsp;</td><td
background='/Style%20Library/Images/mid-
background.jpg'><table><tr><td colspan='2' class='ms-
standardheader ms-WPTitle'><b>{0} New Employees in the last 30
days!</b></td></tr>", resultsNewHire.Rows.Count);
foreach (DataRow row in resultsNewHire.Rows)
{
messages.AppendFormat(@"<tr valign='center'><td width='100'><a
href='/my/person.aspx?Accountname={3}'><img src='{5}' alt='{1}
{0}' border='0'></a></td><td width='250' align='left'
valign='top'><a href='/my/person.aspx?Accountname={3}'>{1}
{0}</a><br>{2}<br>{4}</a></td></tr>", row[0].ToString(),
row[1].ToString(), row[2].ToString(), row[3].ToString(),
String.Format("{0:dddd, MMMM d yyyy}", row[4]),
row[6].ToString());
}
messages.AppendFormat(@"</table></td><td align='right'
valign='top' width='14' class='ms-wpTdSpace'
background='http://intranet/Style%20Library/Images/shadow-
right.png'>&nbsp;</td></tr></table>");
}

The rendered version of the Employee Corner Web Part is shown in the following screenshot:

The stock quote information can be shown in a number of different ways. In cases where the information needs to be on every page, it should be added to a container on the Master Page with the s4-notdlg style reference previously included in the Building an Appropriate Use and Incident dialog section. For this example though, we will include it as an XML Web Part configured in a similar way to the Weather Web Part previously reviewed.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-
prefixes="msxsl">
<xsl:output method="html" indent="yes"/>
<xsl:template name="main">
<xsl:variable name="symbol" select="results/quote/Symbol"/>
<xsl:variable name="price"
select="results/quote/LastTradePriceOnly"/>
<xsl:variable name="change"
select="results/quote/Change_PercentChange"/>
<div id="stockInfo" style="font-size:10pt">
<xsl:value-of select="$symbol" />
<xsl:text> $</xsl:text>
<xsl:value-of select="$price" />
<xsl:text> </xsl:text>
<xsl:value-of select="$change" />
<xsl:text> </xsl:text>
<xsl:choose>
<xsl:when test="contains($change,'+')" >
<img
src="http://intranet/Style%20Library/Images/stock_up.png"
border="0" alt="Trending Up"></img>
</xsl:when>
<xsl:otherwise>
<img
src="http://intranet/Style%20Library/Images/stock_down.png"
border="0" alt="Trending Down"></img>
</xsl:otherwise>
</xsl:choose>
</div>
</xsl:template>
<xsl:template match="/*">
<xsl:call-template name="main"/>
</xsl:template>
</xsl:stylesheet>

A rendered version of the current Stock Ticker Web Part can be displayed in the following screenshot:

There are three common ways to aggregate content to create a content rollup:

Let's review each of these options in more detail.

For the purpose of this exercise a simple subsite was created called News. Articles will be published to the Site Pages library on that site. To make the content easy to identify, a new content type was created called News, which inherits from the Article Page content type. The Article Page, and therefore the News content type has a number of properties that allow you to identify a number of pieces of metadata including By Line, Scheduling Start Date, Scheduling End Date, Article Date, and Rollup Image which will be used in the presentation of the rollup information. In addition, an additional Summary field can be added to provide some additional content.

To start with, Edit the Page and add the Content Query Web Part to the Page. It is available under the Content Rollup category as displayed in the following screenshot:

The next step is to configure the source of the content. To query for content within the entire site collection you can keep the default setting as Show items from all sites in this site collection. If the site is large, or you only want to look in specific locations, you can select one of the other options that narrow the scope. A list of the Source options are shown in the following screenshot:

Next you define what types of items to display by setting the List Type value, along with the Content Type, as displayed in the following screenshot:

You also have the option of further filtering based on the property metadata that is available. This can be helpful to pinpoint the most valuable content within the system. In this case we are going to filter on the Scheduling End Date field and look for items with a date that is less than or equal to today, as seen in the following screenshot:

For the presentation configuration you have the ability to determine Group By, Sorting, and Item Limit information similar to a list view.

The Styles section has the most impact on how the content is presented, because it is used to select the associated XSL used to format the content for the page. For the headline with summary option we have chosen the Large title Item style as displayed in the following screenshot:

Next we need to map the list properties to the standard CQWP fields. In the case of the News article example we will stick pretty close to the default values, and only modify the Description field to include the Summary field we added to the News content type as displayed in the following screenshot:

Once configured this will pull and display any items added to the site collection with the News content type and display them until after the scheduled end date has passed. Newest articles will be displayed at the top of the list. The News content rollup is displayed in the following screenshot: