Microsoft Enterprise Content Management (ECM) Team Blog : Customization

Building a real world extranet application with MOSS 2007 (Part 1 of 3)

ecmblog — Sat, 17 Feb 2007 15:04:00 GMT

Occasionally, I ask SharePoint professionals, who have implemented real world solutions on SharePoint Server, to do a guest blog entry about their experience. This is one such case. Read on and enjoy.

Introduction

In November 2006, Infotech Canada (a Microsoft Gold Certified Partner) was approached by Microsoft and presented with the challenge of creating a web-based application with Microsoft Office SharePoint Server 2007 that would boost productivity for a major enterprise retailer through a shared extranet repository, which was to replace a system already in place.

This is the first of a three part blog series that will outline the experience of building the application with a focus on the customization and development choices that were made along the way.

Project Requirements

The application was to be built on top of Microsoft Office SharePoint Server 2007 due to its ability to enable content sharing and publishing in a controlled environment but still accurately represent a well established brand. The solution was also required to be highly reusable for effective implementation across 5 uniquely branded sister companies, which were all represented via their own websites.

The following technical requirements existed:

· Internet facing extranet portal.

· An intuitive “drill down” navigation allowing users to quickly locate files by browsing categories.

· Must support multiple image formats and allow for an intuitive grouping of different formats for as a single image group.

· Single click downloads of individual and groups of images.

· Multi-browser friendly.

· Must support multiple languages (English and French) for the user interface as well as content.

· Must be easily extendable via a template system.

· Must integrate with current Active Directory environment.

· Must represent several unique brands.

Timeline

The timeline for the project was one of the most challenging obstacles. We not only had to build an intuitive system on a new platform, but we had a very aggressive timeline with less than a month to plan, develop, test and implement the solution into a production environment.

The Solution (breaking it down into manageable modules)

With such an aggressive timeline, planning was incredibly important. We were able to break the solution into several major modules, which while very interdependent, were much more manageable and could be developed separately.

Setting the Stage - Creating the Site Hierarchy and Content Types

The initial site hierarchy consisted of a single site collection with the main corporate gateway at the top level and several subsites to represent other subsidiary companies.

Like most websites, some elements were able to be reused across all subsites/pages, and as such we were able to store them at the top level of the site collection in document libraries. We were able to share both the images and a single style sheet across all sites using this approach.

· The image content was stored in a picture library, with one library per company site. The categories for each image were represented as folders, with the last level in the folder structure representing a single image group. All of the different formats of that image were stored in the folder for that group. For example:

o Image Category A

§ Image Group 1

· Image1.jpg

· Image1.ai

· Image1.eps

§ Image Group 2

· Image2.jpg

· Image2.ai

· Image2.eps

o Image Category B

§ Image Group 3

· Image3.jpg

· Image3.eps

§ Image Group 4

· Image4.jpg

· Image4.ai

· In order to distinguish between the different types of folders, we created two content types that inherited from the Folder content type: Image Category and Image Group. These content types also contained extra site columns, so that we could associate metadata with the folders themselves. We created a site column for an optional field called French Name, that lets content administrators specify an optional French display name for any image category or image group. Another site column was added to the image group content type that allows content administrators to specify language of the image group as Multilingual: English or French. This approach allowed us to store all of the images in a common folder structure, and still allow for translated content when needed. Rather than having to maintain two separate folder structures, content administrators can simply translate the English folders by adding French names as metadata.

The Navigation

We were able to take advantage of the out of the box site map providers and navigation to create an interface that allowed users to easily navigate between the subsites. To navigate the image content, we built a custom navigation control that was aware of our custom content types as well as the current language. This allowed us to distinguish between the content types visually in the navigation and also display the extra metadata like the French Title when appropriate, all in an easy to navigate tree-view style menu system.

· A Dynamic tree view navigation menu built as a custom server control and implemented into the master page of each company site. This tree view, much like Windows Explorer enabled users to quickly locate files.

· Selecting Files from the menu triggered a web part to display customized results grouped by the category selected. Each image set is stored as a custom folder content type.

Custom Results Display

The end result of using the tree view navigation is the display of a set of results, which presents the user with the image groups in the selected category.

· If a .JPG file exists in the set, the web part displays the thumbnail that’s generated by SharePoint automatically.

· Each file in the set has a hyperlink to the file as well as a checkbox for selecting multiple.

Users can select multiple files to download at which point a .ZIP file is generated, complete with the folder structure and files of the set(s) selected.

In the next installment of this blog series, I will describe how we customized the master pages and style sheets to create a visually appealing website which was accommodating to multiple unique brands.

Shane Perran – User Experience Lead, SharePoint MVP
Jared Rypkema – Lead Software Architect
Infotech Canada | Information Worker Solutions

Building tylerbutler.com, Part 5: Final Touches

ecmblog — Mon, 18 Dec 2006 22:49:00 GMT

Part 1 :: Part 2 :: Part 3 :: Part 4 :: Part 5 :: Part 6

This is part 5 of an ongoing series of posts about my experience building a custom site on top of Office SharePoint Server 2007. If you haven't yet read parts 1 through 4, I'd strongly suggest starting there.

In my last post, I discussed using detached pages and migrating content from my old site. In this post, I'll cover a few of the final touches that I added to the site.

The "All Posts" Page

In my old site, when you visited a rollup page, only the first five posts were displayed. If you wanted to see additional posts, you could search for them, or you could click one of the numbers at the bottom of the rollup page. That would take you to a different "page" that displayed items further down the list. For example, if you went to page 2, you'd see items 6-10. Page 3 contained items 11-15, and so on. This was fine, but using Content Query web parts in MOSS didn't allow me to configure this behavior right out of the box. Instead, I opted to create an "All Posts" page that would list all the posts for a given category.

In order to do this, I created a special page layout called "AllPostsLayout.aspx," and added a CQWP to a zone right in the middle of the layout. I configured that web part to get all the Pages except those that had category "Rollup Page." I then went through on every subweb and created a page using that new layout. I had to customize the individual CQWP's on every new page, to make sure they rolled up the right data, but this was pretty painless since I made sure that most of the properties were set properly when I added the web part to the layout.

The other thing I did was add a link to the "all posts" page in the Site Rollup layout. To make sure that this link worked properly regardless of what subweb the rollup page was in, I made use of some SharePoint controls I'd used previously for other things in the site. This is what the markup looked like:

<SharePointWebControls:splinkbutton runat="server" NavigateUrl="~site/Pages/AllPosts.aspx" id="onetidProjectPropertyTitle">
see all posts in <SharePointWebControls:ProjectProperty Property="Title" runat="server" /></SharePointWebControls:SPLinkButton>

This was a major change from the way things worked in my old site, but I think it's for the better. The problem with paging (showing items 1-5 on the first page, 6-15 on the second, etc.) is that people only ever use the first 2 or three pages. For example, they know that there was a very recent post that they saw and they want to get back to it. After that they use search because it's faster than sorting through every page. I could have built paging with a custom web part or control that changes the parameters of the CQWP based on some query strings, but frankly, it would have been more work than it's worth. The All Pages view was simple to put together and meets my needs. To be fair, it doesn't scale – if you have hundreds or thousands of items in a single category you'll start having problems. Not necessarily in performance, but definitely in usability. Definitely keep this in mind if you're looking at a similar solution.

The Current Date and Time

My old site had a gratuitous little feature that out put the current date and time in top right-hand corner of the page, right under the search box. This should be pretty straightforward, right? All I needed to do was call System.DateTime.Now.ToString() with a special date time format string. Unfortunately, this was slightly more complicated in SharePoint because I couldn't just get ASP code blocks to execute in my master page by default. However, I was able to enable this functionality by adding some markup in web.config:

<PageParserPaths> 
         <PageParserPath VirtualPath="/_catalogs/masterpage/*" CompilationMode="Always" AllowServerSideScript="true" IncludeSubFolders="true" /> 
</PageParserPaths>

Once this was added to my web.config, I was able to add code blocks to items only in the master page gallery. This is important – you typically don't want to enable code blocks on every page in your site because if you do, any user with access to any library in your site can upload an ASPX page that executes code. Then they can visit that page and get code to execute on your box, leading to major pwnage. There are very good reasons why code blocks are disabled by default in SharePoint.

However, in this case, I only enabled code blocks for pages in the master page gallery (check out the VirtualPath property in the snippet above), which is much safer. Only your site designers or owners should have access to the MPG, so there's a level of trust there that is probably OK. In my case, this is further mitigated by the fact that I am currently the only person with write access to the site. However, even if I allow users to post content later, they still won't have rights to upload content to the MPG.

After the code blocks were enabled, all I had to do was paste in my code snippet into the right spot in my master page. This is the markup:


<div class="header-datestamp">
    <asp:ContentPlaceHolder ID="HeaderDate" runat="server">
        <% Response.Write(System.DateTime.Now.ToString("dddd, MMMM d yyyy @ h:mm tt")); %>
    </asp:ContentPlaceHolder>
</div>

I should point out that you can most definitely also do this sort of thing with a user control. In this case, it would be a very simple user control, but wrapping functionality in controls, marking them as safe, and putting them in your layouts is in general the best approach to custom functionality. In my case, because the functionality I needed was so basic, I opted to do it in a code block. However, if you're looking at enabling code blocks in any part of your SharePoint site, take some time to really consider the ramifications and your needs. If the functionality you need is even remotely complicated (read: more than one line of code), write a control.

RSS Feeds

The next step was configuring RSS feeds for my site. I had a couple of different options to accomplish this. The CQWP's that were already on my homepage could easily be configured to spit out feeds. However, they only contained five items, and I wanted my feed to contain ten items.

In order to accomplish this, I added a page to my site using a layout with a web part zone. This page wasn't meant to be seen by any visitors to my site, so it didn't matter which layout I used, as long as it had a zone in which I could put the web parts. I added a CQWP to this page with its RSS feeds turned on. I configured this web part with the same properties that I used for the ones on the front page, except I set it to roll up ten items instead of five.

When you turn on the RSS feed, the CQWP by default renders out a little orange feed icon that links to the feed. You can override this presentation by editing CQMain.xsl in the Style Library. Another feature of turning on the RSS feed on a CQWP is that it injects markup into the page header that lets browsers like Firefox and IE 7 discover the feed automatically.

This functionality is perfect if you want to make your feeds available only on the page that's hosting your CQWP. However, in my case the CQWP that was serving my feed was on a "hidden" page, so I needed to copy the URL of the feed and then modify my master page to include it. I also wanted some statistics around feed subscriptions, so I wrapped my feed up through FeedBurner so I could get these statistics easily.

Customizing the master page was very straightforward. I added the following markup to the header to get the auto-discovery in Firefox and IE 7:

<link rel="alternate" type="application/rss+xml" title="Recent posts on Tyler Butler.com" href="http://feeds.feedburner.com/TylerButlerAllPosts"/>

Then I added a section in right column that linked to the feed, for people who were using other browsers. In the future, I can add more feeds here, or I might opt to build out a feed landing page that lists all of my feeds, similar to what sites like CNet or GameSpot do.

At this point, I had my feed configured and linked to, but unfortunately, it wasn't outputting things exactly like I wanted. For example, I wanted the date and time of a post to be the date and time I set, not the Creation Date, which is the default. I also wanted to provide full post text with my feeds, so people who use RSS readers such as Bloglines or Google Reader don't have to visit my site if they don't want to.

Supporting this sort of feed customization was super straightforward. The thing to remember is that ultimately, the feed is supported by a Content Query Web Part. That means that all the functionality and extensibility that the CQWP provides can apply to the feed. In my case, what I needed to do was customize the fields that were returned by the web part (namely, override the CommonViewFields property on the web part). That ensured that the query that the CQWP was issuing would return the fields I wanted to include in my RSS feed. Note that this process was the same as what I did back in part 2 of series.

In order to customize exactly what content went into my feed, I had to edit RSS.xsl in the Style library. You can also create a copy of RSS.xsl, then modify the copy to suit your needs. This is a better approach, because then you can customize specific feeds by modifying the XSL that governs them specifically. There are some specific things you have to do if you go down this road, but George goes into much greater detail about this in his post on RSS customization. If this is something that interests you, his post is a great resource.

At this point, my site was pretty much migrated. It's not done, of course! I have lots of cool ideas for some customizations, and I'm still missing some core functionality, most noticeably user comments and the ability for people to sign up for an account and post. The core functionality and look and feel, though, is complete. That means this post series is about to come to an end. Not quite yet, though. :-) I will post a final post soon to discuss some of the specific challenges I encountered while working on this project and flesh out some of my ideas for future functionality. Until next time...

Part 1 :: Part 2 :: Part 3 :: Part 4 :: Part 5 :: Part 6

Customizing the WSS 3.0/MOSS 2007 Menu Control -- MossMenu source code released

LLiu — Sat, 02 Dec 2006 20:37:00 GMT

(Cross-posted from the SharePoint Team Blog.)

The AspMenu class that ships with WSS 3.0 (and by extension MOSS 2007) is nearly identical in behavior to ASP.NET 2.0’s Menu class (as the name implies). AspMenu derives from Menu and adds tweaks to work around a few reasonably well known annoyances and provides improved highlighting support.

Unfortunately, this class was marked sealed and is therefore not eligible to be used as the base class for derived types. Effectively, this means that customers cannot inherit the additional functionality of the AspMenu class when trying to provide further customization of the menu.

We realized this problem too late in the release process and were unable to remove the sealed marker from the AspMenu class that ships with WSS. However, we are instead providing the source code for that class here (as an attachment to this blog entry) under the name MossMenu.

Note: MossMenu is provided as is and will only work on sites built with WSS 3.0 or MOSS 2007. MossMenu relies on some JavaScript which has been included along with the C# source. This is really just for completeness’ sake [aside: some trival about the use of the apostrophe for the possessive forms of nouns] as this script is automatically included on most pages through the core.js script include reference.

Issues with the ASP.NET 2.0 menu, which have been worked around:

1) If the mouse pointer happens to be hovering over a menu item that exposes a fly-out as the page is loading, it is possible that an error dialog will appear stating: "Internet Explorer cannot open the Internet site, Operation aborted" and a blank page will be shown upon clicking OK. It seems that the problem arises from attempting to append to the DOM before it is properly initialized.

2) If SSL termination is employed on a site with a menu, users will be greeted with “This page contains both secure and nonsecure items. Do you want to display the nonsecure items?” when hovering over a menu item which exposes fly-outs. (http://support.microsoft.com/?id=910444)

3) In right-to-left locales, the fly-out indicator arrow still points from left-to-right.

Improvements to default highlighting behavior of ASP.NET 2.0 menu:

· When hooking the menu up to a SiteMapProvider through a SiteMapDataSource, the menu automatically highlights the node that matches that returned by the provider’s CurrentNode property. However, if the particular node returned by CurrentNode is not shown by the menu nothing will be highlighted at all. The improved behavior determines if there is an ancestor of the current node which is displayed in the menu and highlights this node instead.

Hope this helps.

Chris Richard, Software Design Engineer, WCM Features