Customizing SharePoint Communities for Windows Phone 7

Exclusive offer: get 50% off this eBook here
Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7 — Save 50%

Create enterprise-ready websites and applications that access Microsoft SharePoint on Windows Phone 7 with this book and eBook

$29.99    $15.00
by Todd Spatafore | June 2011 | Enterprise Articles Microsoft

SharePoint is a powerful enterprise content management system. It has an impressive ability to bend to the needs of just about any use case imaginable in an enterprise. That list of use cases also includes several social aspects. When employees are sharing information across multiple departments, it can make a 90,000 employee enterprise feel like a 100 person small company.

This article focuses on customizing the SharePoint communities for use on Windows Phone 7. We will investigate the web-based output of the communities, and customize this output using Visual Studio 2010. This article by Todd Spatafore, author of Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7, will cover the following topics:

  • Blogs
  • Wiki

 

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Create enterprise-ready websites and applications that access Microsoft SharePoint on Windows Phone 7

        Read more about this book      

(For more resources on Microsoft Sharepoint, see here.)

Let's get started with the discussion of SharePoint communities by taking a look at blogs.

 

Blogs

At this point in the 21st century, everyone is familiar with what a blog is. In SharePoint, a blog is a site that is characterized by entries of content being listed from newest at the top of the page to oldest at the bottom. Content is determined by the author and can contain metadata such as the author, date, and keywords or tags to designate the categories in which the content belongs.

Creating a blog site in SharePoint

A blog site can either be the root site or a site contained within another site. This is consistent with all site types in SharePoint. The reason this is pointed out though, is that when creating a new SharePoint engagement, it is important to truly think of the overall goal of the website as a whole. If the website will essentially be a blog with other content thrown in from time to time, then it makes sense for the root site to be of the type blog. Otherwise, it makes sense to make the root site something else like the team site or a blank site and then add a blog site within that root site.

This is important to think about because to add a blog to an existing site is fairly straightforward. Simply, carry out the following steps:

  1. From the root site, click on the Site Actions menu.
  2. On the Site Actions menu, select the New Site option.
  3. From the Installed Items list, select Blog.
  4. Give the new blog site a Title and a URL name.
  5. Finally, click on the Create button.

At this point, SharePoint will create a new blog site. The new blog will contain some seed data to get the blog going. There are three categories named appropriately:

  • Category 1
  • Category 2
  • Category 3

The new blog site will also have a location for archives containing the one entry that was seeded in the site titled Welcome to your Blog! This can all be seen in the following screenshot:

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Customizing a SharePoint blog site

Although this blog site is ready to go right now, we will probably want to customize it for our usage scenario. There are several places to customize it, which are as follows:

  1. About this blog
  2. Categories
  3. Blog Tools
  4. Links

About this blog

When new readers reach a blog they look for information about the blog so they can get a high level overview of what to expect from the content of the site. This is usually found in the "about this blog" section of the site. In the SharePoint blog site, the About this blog section is a Wiki Web Part found in the right column. Although we will learn more about Wikis in the next section, for now just know that this web part allows us a what-you-see-is-what-you-get (WYSIWYG) editing surface to enter any content we want. To get into this editing mode, carry out the following steps:

  1. From the Site Actions menu, select Edit Page.
  2. When the page changes to edit mode, click on the text inside the About this blog section.
  3. At this point, the ribbon at the top will have the following four main sections:
    • Editing Tools: This has the basic text editing tools that are familiar to anyone who has used Word.
    • Table Tools: The about section is actually a table with two rows and one column. The top cell has the image, and the bottom has the text. The Table Tools section of the ribbon allows us to manage this table.
    • Page Tools: These are the basic tools that are global to the page and not specific to this section.
    • Web Part Tools:This part of the ribbon contains tools that allow us to minimize, restore, or delete the web part. It also allows us to edit the Web Part Properties. These properties include the title, as well as other appearance features such as height and width. It also includes layout information and some advanced features.

Categories

The next section to customize on this blog site is the list of categories. When creating a blog entry, we can categorize the contents with a tag. The default categories for a new blog are as follows:

  • Category 1
  • Category 2
  • Category 3

The following steps show how to customize these categories:

  1. Click on the title Categories in the left column. This will open the list page for the categories.
  2. The categories list will display the three default categories. For each category, click on the Edit icon, as shown in the following screenshot:

    (Move the mouse over the image to enlarge.)

  3. Change the Title to something that makes sense for the blog which we are creating.
  4. Click on the Save button.

Repeat these steps for all three of the default categories. To add more categories, click on the Add new item link below the list of categories. To delete a category, carry out the following steps:

  1. Move the pointer over the title of the category.
  2. This will trigger an arrow to appear to the right of the title next to the edit icon. Click on this down arrow.
  3. In the context menu that appears, select the Delete Item option.
  4. A confirmation message will appear asking if we are sure we want to send it to the recycle bin. Click on OK and the category will be deleted.

Blog Tools

Now that we have a blog, how do we manage the content? This is where the Blog Tools section comes into use. There are 4 links to help us manage the blog, which are as follows:

  1. Create a post
  2. Manage posts
  3. Manage comments
  4. Launch blog program to post

Create a post

Clicking on the Create a post link will open a modal dialog with a form to fill out to create a new blog entry. The fields include the following:

  • Title: This is a plain text field used for the title of the entry.
  • Body: This is a rich text field that utilizes the edit ribbon.
  • Category: Here we can select the categories that the entry is a part of.
  • Published: Here we can set a date for our entry to be published. Publishing an entry in the future is helpful when we have information that isn't supposed to be public knowledge until a specifi c time and date, or when information needs to be published at a specifi c time and date.

The preceding fields are shown in the following screenshot:

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Manage posts

Blog entries, like most things in SharePoint, are items in a list. Clicking on the Manage posts link will display all the blog entries. From this list, we can perform many management functions such as the following:

  • Manage approval status
  • Edit entries
  • View entries
  • Manage permissions
  • Delete entries

Manage comments

All of the comments are managed in a separate list from the blog entries. Clicking on the Manage comments link will display all of the comments for all of the blog entries in this site. From here we can view, edit, or delete the comments, as well as manage permissions.

Managing permissions on comments and posts is a lot like managing permissions elsewhere in SharePoint. By default, the list items inherit the parent permissions, but occasionally we will want to have specific permissions for special cases. We could have a blog entry that we only want a small group of people to see, or maybe we want to save a comment, so that only we can see it. The manage permissions section is how we can deal with these cases. More information on managing permissions can be found in the online help or on TechNet at the following URL:
http://technet.microsoft.com/en-us/library/cc721640.aspx

Launch blog program to post

Although creating a blog entry in the web browser works well, sometimes we may want to use a more powerful tool to create entries. The Launch blog program to post link will open Microsoft Word 2007, or a newer version, to edit a new blog entry.

Configuring Windows Live Writer

There is a link in Blog Tools to launch Microsoft Word 2007 or newer, to create a new blog entry. Although Word does a pretty good job of creating new blog entries, there is a free tool from Microsoft, named Windows Live Writer (http://explore.live.com/windows-live-writer) which is true genius when it comes to editing blog entries. Using this tool can make most, if not all, blog posting tasks much easier within SharePoint. Configuring Windows Live Writer for a SharePoint is simple:

  1. When setting up Windows Live Writer, select SharePoint from the What blog service do you use?
  2. Click on Next and enter the URL of the SharePoint blog.
  3. Click on Next and provide the SharePoint authentication information.

That's all there is to it. The Windows Live Writer interface also displays a preview of what the blog entry will look like in the site by clicking on the Preview tab at the bottom, as shown in the following screenshot:

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Links

Finally, the links section allows us to add hyperlinks to the page for easy access to anything. The default entry is to a photo library named Photos. Adding a new link is as simple as the following steps:

  1. Click on the Add new link hyperlink.
  2. Enter the URL for the link.
  3. Optionally, enter a description that will be used in place of the raw URL for display.
  4. Optionally, add any notes. Notes show up when viewing the full list of links. The full list of links can be viewed by clicking on the title Links from the home page.
  5. Click on Save, as shown in the following screenshot:

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

 

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7 Create enterprise-ready websites and applications that access Microsoft SharePoint on Windows Phone 7 with this book and eBook
Published: May 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

 

        Read more about this book      

(For more resources on Microsoft Sharepoint, see here.)

 

Getting SharePoint blog sites working well with Windows Phone 7

The default view of lists is not very easy to read. As a SharePoint blog is a list of blog entries, the default view of all the posts in our blog site looks about the same as with the Announcement list display.

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Specifically, we want to customize and then list item outputs for posts. We need to create a user control. Carry out the following steps to increase the font size of the list of blog entries:

  1. Open Visual Studio 2010 as Administrator by right clicking on the icon and selecting Run as administrator on the context menu.

    As we need to be able to restart Windows Services, specifically the IIS services, we need Visual Studio 2010 to run as Administrator; and in order to do that, we need administrator rights on the development server, as well as in SharePoint.

  2. Select Yes in the UAC (User Authentication Control) dialog.
  3. Once Visual Studio has opened, select File | New Project.
  4. In the 2010 node of the SharePoint templates, select Empty SharePoint Project.
  5. Give the project a name similar to CustomBlogForm.
  6. Give the solution a name, for example Chapter05 and select the OK button.
  7. Next, Visual Studio will give you the option: Specify the site and security level for debugging. Enter the URL for your SharePoint server and select the trust level of Deploy as a farm solution.
  8. Click on the Finish button and Visual Studio will create the empty SharePoint project for us.
  9. Right click on the CustomBlogForm project in Solution Explorer.
  10. In the context menu that appears, select Add | SharePoint Mapped Folder.
  11. In the Add SharePoint Mapped Folder tree view that appears, select the arrow to expand TEMPLATE.
  12. Once TEMPLATE has been expanded, select CONTROLTEMPLATES.
  13. Finally, click the OK button to map this folder into our solution.
  14. In Solution Explorer, right click on CONTROLTEMPLATES and select Add | New Item….
  15. In the Add New Item dialog that appears, select User Control from the SharePoint 2010 installed templates.
  16. Give the user control a name: MoblogPostsViewContents.ascx.
  17. Finally, click on the Add button to create the user control.
  18. Delete the two files: MoblogPostsViewContents.ascx.cs and MoblogPostsViewContents.ascx.designer.cs.
  19. Open the file MoblogPostsViewContents.ascx and ensure that the Source view is enabled.
  20. Delete all the contents of this file.
  21. Add the following code to the file to define the user control and assemblies:
    <%@ Control Language="C#"%>
    <%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0,
    Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  22. Add the following code to register the XML tag prefixes that will be used in the page:
    <%@ Register TagPrefix="mobile" Namespace="System.
    Web.UI.MobileControls" Assembly="System.Web.Mobile,
    Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a
    3a" %>

    <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.
    SharePoint.WebControls" Assembly="Microsoft.SharePoint,
    Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e942
    9c" %>

    <%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.
    MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0,
    Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  23. To start the actual template code for the page, add the following code. Although we've named the file for this user control the same as the ID listed here, it is in fact the ID here that lets SharePoint know that this template should be used for rendering the announcements display form contents:
    <SharePoint:RenderingTemplate runat="server"
    ID="MoblogPostsViewContents">
    ...
    </SharePoint:RenderingTemplate>
  24. Next, inside the Rendering Template element that we just added, we add an element that tells the Rendering Template that we are going to specify our own template.
    <Template>
    ...
    </Template>
  25. The next element nested within the Template element is a div with an inline style attribute to let the browser know that we don't want the default font size, but instead we want a font size of 13 points:
    <div style="font-size: 13pt;">
    ...
    </div>
  26. Finally, add the default code for the mobile blog rendering:
    <SPMobile:SPMobileControlContainer ID="SPMobileControlContainer1"
    RunAt="Server" BreakAfter="false">
    <SPMobile:SPMobileCategoryPicker RunAt="Server"
    id="CategoryPickerForMoblog" BreakAfter="false" />
    <SPMobile:SPMobilePostsRefreshNavigation ID="SPMobilePostsRefreshN
    avigation1" RunAt="Server" Text="<%$Resources:wss, mobile_button_
    refresh_text%>" controlforrefresh="CategoryPickerForMoblog" />
    <SPMobile:SPMobileComponent ID="SPMobileComponent1" RunAt="Server"
    TemplateName="MobileDefaultSeparator" />
    </SPMobile:SPMobileControlContainer>
    <SPMobile:SPMobilePostsListItemIterator RunAt="Server" ListItemSep
    aratorTemplateName="MobileListItemSeparator" />
    <SPMobile:SPMobileLabel ID="SPMobileLabel1" RunAt="Server" Text=""
    Weightless="true" />

The big difference in this is the naming convention. In the previous example, we used this naming convention: IntendedPageUse_SiteTypeID_PageType_PageArea and with that we constructed Mobile_104_DispForm_Contents. Blogs use an older naming convention that does away with the underscores and uses the IntendedPageUse of Moblog instead. This results in a page name and a Rendering Template ID of MoblogPostsViewContents.

The user control code file name doesn't matter as much as the Rendering Template ID. This example shows the use of a string for SiteTypeID. We could have used the SiteTypeID of 301 instead of the string Posts.

Putting all this together and deploying, it results in a view that looks like the following screenshot:

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

In addition to modifying the all posts view, there are two other pages that can be modified. Those are the Comments and the Category list views. They have a SiteTypeID of 302 and 303 respectively. Combining all three of these site types with the various page types will produce a slew of templates for all our needs.

The list of SPListTemplateType enumerations used for SiteTypeID can be found at the following URL:
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.splisttemplatetype.aspx

 

Wiki

Named after the Hawaiian word for fast, the first wiki was created by Ward Cunningham as a way to perform simple create, read, update, and delete operations on web pages. His first wiki software named WikiWikiWeb was described as "the simplest online database that could possibly work". In essence, wiki allows us to create and update web pages in a really simple manner.

Creating wiki site pages

Wiki pages are held in a wiki library or can live separately as individual pages inside a document library. The following is an example of creating an ordinary document library:

  1. In our Chapter 5 blank site, select New Document Library from the Site Actions menu, as shown in the following screenshot:

    Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

  2. Give the new library a name and description, if desired.
  3. Leave the default radio selection that we want this library to appear in the Quick Launch navigation.
  4. Change the default radio selection that we do want to retain document version history.
  5. In the Document Template leave the default as Microsoft Word document.
  6. Click on the Create button.

The document library will be created. As this is a document library, we can upload documents and they will appear here. However, the Site Actions menu now has a new option for New Page. Select this and give the new page a name. SharePoint will create a new wiki page and drop you into the rich text editing experience.

This may not always be the best way to do this type of work. The page will be created when we click on the Save button, there just won't be a link to it anywhere. We'll have to remember the URL and link to it from somewhere.

Another way to create a wiki is to start with a wiki library , as follows:

  1. In our Chapter 5 blank site, select More Options… from the Site Actions menu.
  2. In the dialog that appears, select Wiki Page Library, as shown in the following screenshot:

  3. Give the new library a name, In our example, Wiki Library.
  4. Finally, click on the Create button.

SharePoint will create a Wiki Library and seed it with the following two pages:

  1. Home
  2. How To Use This Library

Although the home page contains information that doesn't need to be kept, the How To Use This Library page contains some very valuable information that should be kept. This page contains some basic information on how wikis work.

Making wiki pages work with Windows Phone 7

The great thing about wikis is that we are editing the content directly. If something doesn't look good in the mobile version, just use a desktop browser to edit the page and either increase the font size or rearrange content in the page to make it look good in the mobile version.

Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

Summary

This article has introduced two main aspects of social computing with SharePoint 2010. Blogs are simple islands of information that are authored, usually by a single person. Wikis are pages or groups of pages that are usually authored by a group of people and represent a living document repository. Utilizing these in an organization can help bridge the gaps between different groups. Customizing the mobile templates used for these pages will allow Windows Phone 7 users to continue to join in the conversations while mobile.


Further resources on this subject:


Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7 Create enterprise-ready websites and applications that access Microsoft SharePoint on Windows Phone 7 with this book and eBook
Published: May 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Todd Spatafore

Todd Spatafore is a professional web developer and software architect who enjoys living life on the bleeding edge of technology. He is an expert on HTML, CSS, JavaScript, ASP.NET (WebForms and MVC), C#, and Silverlight. Todd is currently the Director of Technology at Draftfcb and maintains his own blog at http://www.spatacoli.com, in which he muses about current programming topics such as Silverlight, JavaScript, HTML, CSS, and Hyper-V. Currently Todd is working on a few independent Windows Phone 7 apps, and speaks for MSDN conferences on web application architecture, RIA development in Silverlight, and Windows Azure.

Todd Spatafore is the author of “Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7".

Books From Packt


Microsoft SharePoint 2010 End User Guide: Business Performance Enhancement
Microsoft SharePoint 2010 End User Guide: Business Performance Enhancement

Microsoft SharePoint 2010 Administration Cookbook
Microsoft SharePoint 2010 Administration Cookbook

Microsoft SQL Azure Enterprise Application Development
Microsoft SQL Azure Enterprise Application Development

Microsoft Data Protection Manager 2010
Microsoft Data Protection Manager 2010

Microsoft Dynamics Sure Step 2010
Microsoft Dynamics Sure Step 2010

Microsoft SharePoint 2010 Power User Cookbook: SharePoint Applied: RAW
Microsoft SharePoint 2010 Power User Cookbook: SharePoint Applied: RAW

Microsoft Dynamics AX 2009 Administration
Microsoft Dynamics AX 2009 Administration

Microsoft Silverlight 4 Data and Services Cookbook
Microsoft Silverlight 4 Data and Services Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
i
x
s
d
9
n
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software