Business Problem
- Create template based web pages with a consistent style
- Allow non-web developers to apply content to pages
Definitions
Site Content Type:A content Type is abstraction of a content entity built using site types (Site Columns), a collection of settings and can have an associated workflow, document template and management policy. The scope of a content type is restricted to the site but can be applied within the site collection when created in the root site of the site collection.
Page Layout: A web page template that describes how an associated content type will be displayed. It lends itself to code reuse and a standardised view of a type across all its instances. Page Layouts also provide the ability to dynamic change the view and push them down to existing instances (web pages) of the page layout.
Process
- Define the type of content that needs to be shown by creating the underlying data model (site content type) utilising Site Columns in particular Publishing Columns.
- Create the Page Layout using SharePoint Designer
- Style the Page using Cascading Style Sheets
Practical Example
Business Context
Note:
Sometimes it is hard to know which feature of a technology should be to accomplish a task and SharePoint holds true to this, due to the vast set of features and multiple versions.
As the Microsoft Innovation Centre Manager I work with Microsoft Partners to develop integrated solutions incorporating new wave products. This activity inevitability leads to web-based marketing of the partner solutions.
From a web content management perspective it is easy to see that each partner solution will inherently have the same underlying structure and view. For example each solution will have a solution name, name of the partner that developed the solution, contact details, description of the solution, artwork of the solution, etc.
Define and Create a Content Type
The Content Type in this example will be the partner solution page Content Type abstracting the state of the real world object ‘the solutions’ publishing/content characteristics. The partner solution page is comprised of the following types and content
Types
- Solution Name / Title (Single Line of Text)
- Solution Description (Publishing HTML)
- Solutions Poster (Publishing Image)
- Partner Logo (Publishing Image)
Figure 1: Solutions Page Types Required
Content
- Partner Contact Details (Custom List)
- Solutions Documents (Document Library)
Figure 2: Solutions Page Content
When creating a Content Type you must inherit from an existing site content type and in this instance as we are trying to create a publishing page of the solution, the ‘Page’ content type is best. The Page Content Type is comprised of the following types
Figure 3: Page Content Type
1. Click on Site Actions -> Click on Site Settings -> Click on Modify All Site Settings
Figure 4: Viewing the Site Content Type Gallery Contained in the Site Settings
2. Under Galleries column Click the Site Content Types
3. Click Create from the Site Content Type Gallery
Figure 5: Creating a new Site Content Type
4. On the new Site Content Type page inherit from the Page Content Type and place it in a Page Layout Content Types
Figure 6: Creating the Solutions Page Content Type
5. Identify the differences in the inherited types (Figure 3: Page Content Type) and the required Types (Figure 1: Solutions Page Types Required)
6. Excluding the name of the inherited type and focusing on the underlying type itself the following mapping and new type (site column) creations are required.
| Inherited / Created Type | Required Type | |
| Title (Single Line of Text) | Solution Title (Single Line of Text) | |
| Add ‘Page Content’ Type from Existing Site Columns | Solution Description (Publishing HTML) | |
| Add ‘Page Image’ Type from Existing Site Columns | Solutions Poster (Publishing Image) | |
| Create New ‘PartnerLogo’ Type | Partner Logo (Publishing Image) |
Figure 7: Solutions Page Content Type Mapping
As only the site Title was inherited from the ‘Page’ Content type the remaining types have to be added from existing Site Columns or a new site column has to be created.
7. Firstly add the existing Site Columns. Under the newly created Solution Page Content Type click add from existing site columns
Figure 8: Adding Types (Site Columns) to Solutions Page Content Type
8. Add the Page Image and Page Content from within the Page Layout Columns
Figure 9: Adding Existing Site Column
9. Secondly create all new Site Columns. Under the newly created Solution Page Content Type click add from existing site columns
10. Create a PartnerLogo Site Column that is of type Publishing Image and place it under the Partner Solution Publishing
Figure 10: Create a new Site Column
On completion of creating new Types (Page Logo) and adding existing Types (Page Content and Page Image) the Solution Page Content Type should look as follows. Notice how the newly added types don’t have a source; it is because they are not inherited.
Figure 11: Solution Page Content Type
Create Page Layout
The first step is to create the Page Layout, using the Office SharePoint Designer 2007 (Shah & German, 2006).
11. Click File -> New -> SharePoint Content
12. In dialog box select SharePoint Publishing in the left hand pane, Page Layout in the middle pane and the appropriate content type the Page Layout should be associated with.In this example the Page Layout is associated with the Solutions PageContent Type. The newly created page layout is stored as an aspx page in the Master Pages Gallery.
Figure 12: Creating a Page Layout associated with a Solutions Page Content Type
13. Once the Page Layout is created using the <table> tag partition the page layout into 2 columns with a 65/35 split using the <td width=”35%” valign=”top”> tag
14. Simply drag and drop the appropriate fields (publishing controls) into the tables <td> tags
Figure 13: Content Type Fields
After the Page Content Type fields have been added, insert the various SharePoint content (List & Libraries) using web parts.
15. Click New Web Part Zone to create Web Part Zone Partitions within the Web Parts Pane
16.Click the Insert Selected Web Part button to add SharePoint content using web parts. In this example a Content Query Web Part was used to display a filtered (by solution) set of documents from a document Library.
17.The completed Page layout Looks as follows in SharePoint Designer
Figure 14: Solutions Page PageLayout
Style the Page Using CSS
The last step in the process is styling the Page Layout. As there is plenty of material about CSS on the Internet I will focus on CSS integrated with Web Content Management. One of the best ways to control styles using Web Content Management is in a publishing control (Spiers, 2007). By locking down the styles, content editors who create the content can easily select from a styles drop down the various styles.
18. Select the Publishing Controls (that was previously dragged onto the page layout)
19. Add the prefixstylesheet attribute to the HTML field control and set the value to ic-pub. This is the style sheet prefix name for the class.<PublishingWebControls:RichHtmlField FieldName=”PublishingPageContent” runat=”server” prefixstylesheet=”ic-pub” />
20. In the attached style sheet place the prefix style ‘ic-pub’ with a ‘Custom’ string followed by the name of the CSS class. In the example CSS only the ic-pubCustom-BodyText and ic-pubCustom-Heading will be shown in the drop down styles of the publishing control.
ic-pubCustom-BodyText
{
font-family: “Trebuchet MS”, Arial, Verdana, sans-serif;
font-size: x-small;
color: #666666;
}
.ic-pubCustom-Heading
{
font-family: “Trebuchet MS”, Arial, Verdana, sans-serif;
font-size: small;
color: #3366CC;
}
.ic-pub-Title
{
font-family: “Trebuchet MS”, Arial, Verdana, sans-serif;
font-size: large;
color: #333399;
}
.ic-pub-EditControlPadding
{
padding: 1px 5px 5px 5px
}
Figure 15: Innovation Centre Publishing CSS
The Styles can be selected from the edit control as the content editor is editing the text.
Figure 16: Lock down Styles in Publishing Controls
The end product that results from using Page Layouts are the following Content Pages which take less than 5 minutes to format with the content at hand.
Figure 17: Example 1 - Data #3 Online Collaboration Portal
Figure 18: Example 2 - Zap Technology Business Intelligence and Performance Management
In the example above you can notice that there is an additional video present compared to the previous content page. The use of web part zones in a page layout allows the added flexibility for the content editor to insert additional data.
Figure 19: Example 3 - Avanade Next Generation Workplace
Figure 20: Example 4 - WARDY IT Solutions Virtual DBA
Figure 21: Example 5 - Getronics Rapid Deployment eXperience
Figure 22: Example 6 - Dimension Data IPAD Connecting IP Telephony to Active Directory
Bibliography
Shah, A., & German, B. (2006). Using Web Content Management Features of MOSS 2007 to Build Great Looking Sites. Tech Ed 2006. Boston: Microsoft Corp.
Spiers, A. (2007). Tips for Developing portals with MOSS. The Alistair Speirs Blog, http://wss.alspeirs.com/Lists/Posts/Post.aspx?ID=17.
