One of the ways you can establish ownership of the team portal is by customizing it with company colors and logo. The key to customizing the team portal is using Microsoft FrontPage 2003 as your design tool. Because we will be dealing with HTML and Cascading Style Sheets (CSS), it helps if you have some familiarity with Web design.
Let's walk through the process of changing the look and feel of the portal. Later, you will learn how to incorporate those changes into your process template.
Launch Microsoft Office FrontPage 2003.
Click File⇨Open Site.
In the Site name field, type the address of your team portal. For example: http://TeamFoundationServer/sites/TeamProject (substituting the names of your own target server and project for TeamFoundationServer and TeamProject).
You may be prompted to for a username and password. Enter them and click OK.
Important | You can configure Internet Explorer to avoid having to type in your username and password every time you access the team portal. Simply click Tools⇨Internet Options. Click the Security tab, and then click the Custom Level button. If you scroll down the list of security settings, you'll notice one for User Authentication / Logon. Select Automatic logon with current username and password and click OK. This allows Internet Explorer to authenticate you based on your current security context. |
Click Open. The following interface appears (as shown in Figure 10-9).
Figure 10-9
Let's look at all the elements in the left menu and find out what they are used for. Note that the following layout was created based on a Team Project using the MSF for Agile Software Development process template. Depending on the template you use to create your project, the folder names may vary:
_catalogs - This folder contains a list of galleries contained on your SharePoint site. By default, you'll find the List Template Gallery, the Web Part Gallery, and the Site Template Gallery.
_fpclass - This is a folder typically found in FrontPage extensions that is used to hold the Hover Button and Banner Ad Manager components. Note that the existence of this folder doesn't mean that the FrontPage Extensions was installed on your server; in fact, you should never install FrontPage Extensions on a machine hosting Team Foundation Server. (For details, please refer to the installation documents.)
_private - Whenever you install FrontPage Extensions, this folder is created to hide files that are meant to be hidden on the Web site. The folder itself can't be browsed.
_themes - This folder contains the cascading style sheets (CSS) and .inf configuration files to define the look of your site. If you use the MSF for Agile Software Development and MSF for CMMI Process Improvement, you'll find a SharePoint template in this folder called agile2-default-. It contains the style sheets, MSF logo (header_vsts_logo.gif), and gradient graphic that appear at the top of the page (header-bg.jpg).
Development - This is one of the document libraries.
images - This folder is quite important as it is used to store the images on your Web site. To upload an image to the team portal, all you need to do is drag it from your desktop to the folder. FrontPage will automatically FTP the file over to the site.
Lists - This contains your default lists from SharePoint Services. Lists include Announcements, Contacts, Events, General Discussions, Links, and Tasks. If you created a new list, it will be included here.
Process Guidance - The Process Guidance files are prerendered in HTML and can easily be manipulated using FrontPage 2003. Note that making changes to the process guidance of a particular Team Project will affect that instance only. If you want to make changes to several team projects, the best approach is to incorporate the new guidance within the process template, or manually make changes to the projects one by one.
Requirements, Security, and Test - These folders are generated as part of the process template, and will contain the project templates (or work products) you define within the process template. See the "Customizing the Process Template" section later in this chapter for more details.
default.aspx - This is the main page of the Team Portal. You can make any changes you want to the HTML portion of the file to change its appearance.
Now that you have a handle on the layout of your Team Portal within FrontPage, let's now find out how to make basic customizations to the site.
Important | There may be circumstances where you would want to use a pre-existing SharePoint site on a SharePoint server instead of the pre-defined site created with your Team Project. The following TechNote on the MSDN site describes the process of configuring your Team Foundation Server to use a remote SharePoint site for a pre-defined Team Project: http://msdn.microsoft.com/vstudio/technotes/tfs/conf_for_remote_ss.aspx. |
One of the most common customer requests is to find out how to brand a Team Project with a custom company logo. The steps are quite simple:
Open up the Team Project you want to modify in Microsoft FrontPage 2003.
Double-click default.aspx. This will show the current page layout of the Team Portal in the design screen on the right.
Upload your logo to the Web site (either by dragging the graphic file into the images folder within FrontPage or selecting File⇨Import).
Important | You can use a similar technique to upload custom Web Parts (.dwp) files. Before clicking the Import option, open up the folder list and select _catalogs⇨wp (Web Part Gallery). That will make it available on the site when you select Modify Shared Page on the portal site. |
Select the current MSF logo and hit the Delete key to remove it.
Open the images folder from the tree view on the left side of the screen and drag your new custom logo into the placeholder in the design view of the portal.
Save your changes.
From within the process template, you can define elements such as process guidance, document templates, SharePoint templates, and other important files stored on the Team Project Portal. Windows SharePoint Services artifacts are created using the Windows SharePoint plug-in (Microsoft.ProjectCreationWizard.Portal).
From within the process guidance folder (Agile or CMMI), the Windows SharePoint Services directory contains all the files you need to manipulate the portal guidance and template. Within this directory, you will find several folders:
Process Guidance - This folder contains HTML and XML versions of your process guidance files. See the section earlier in the chapter entitled "Customizing the Team Portal" for more information on customizing that part of the project.
Work Product Folders - These contain work products (templates and supporting files) for project management, security, project requirements, and tests.
Any directory, file, or template contained in the Windows SharePoint Services directory can be updated and customized to fit your process requirements.
The WssTasks.xml file located in the Windows SharePoint Services directory of your process template definition file contains an enumeration of all the SharePoint elements that can be customized once a new Team Project has been created (You can learn more about process template customization in Chapter 6.) The file is divided into three sections. The first section lists the entire document libraries (including titles and descriptions) related to your process. This is a high-level way of categorizing your documents - you can easily add and remove any of these categories based on your specific needs. Please note that these libraries are accessible when you click the Documents and Lists link on the main page of the project portal.
<?xml version="1.0" encoding="utf-8" ?> <tasks> <task name="Create Sharepoint Portal" plugin="Microsoft.ProjectCreationWizard.Portal" completionMessage="Project site created."> <dependencies/> <taskXml> <Portal> <site template="VSTS_MSFAgile" language="1033"/> <documentLibraries> <documentLibrary name="Security" description="Documents for the architect team"/> <documentLibrary name="Test" description="Documents for the test team"/> ... </documentLibraries>
The folders node lists all the folders within specific document libraries. The example defines the folders found in the Process Guidance library:
<folders> <folder documentLibrary="Process Guidance" name="Supporting Files"/> <folder documentLibrary="Process Guidance" name="Supporting Files/Code" /> <folder documentLibrary="Process Guidance" name="Supporting Files/CSS" /> <folder documentLibrary="Process Guidance" name="Supporting Files/EULA" /> <folder documentLibrary="Process Guidance" name="Supporting Files/HTML" /> <folder documentLibrary="Process Guidance" name="Supporting Files/images" /> <folder documentLibrary="Process Guidance" name="Supporting Files/Other" /> <folder documentLibrary="Process Guidance" name="Supporting Files/Schema" /> <folder documentLibrary="Process Guidance" name="Supporting Files/XML" /> <folder documentLibrary="Process Guidance" name="Supporting Files/XSLs" /> </folders>
The Files section of WssTasks.xml lists all the files to be included into a Team Project once your process file has been selected. These include process guidance files and work products:
<files> <file source="Windows SharePoint Services\Process Guidance\ProcessGuidance.html" target="Process Guidance/ProcessGuidance.html" /> <file source="Windows SharePoint Services\Process Guidance\Supporting Files\AboutRoles.htm" target="Process Guidance/Supporting Files/AboutRoles.htm" /> ... </files> </Portal> </taskXml> </task> </tasks>
Adding a work product within your process is quite easy using XML. Simply define the path to your source file and the target path of the folder on the server (as defined in the documentLibraries collection):
<file source="Windows SharePoint Services\Templates\YourPolicy.doc" target="Security/YourPolicy.doc" />
You can perform several activities to customize the team portal without having to do any kind of deep extensibility. The following are among them:
Add existing Web Parts (calendars, lists, galleries)
Manage portal contents
Apply new themes
Change the display name and description of the portal
Let's look at each one of these customization features of Windows SharePoint Services.
Windows SharePoint Services comes with a library of preconfigured Web Parts. You can use these Web Parts to add functionality to a page or change the layout of the controls in a page. To add new Web Parts, click the Modify Shared Pages option at the top-right of the screen. An interface will pop up (as shown in Figure 10-10).
Figure 10-10
You can then drag any of the built-in controls (and your custom controls) to anywhere on your screen.
Windows SharePoint Services allows you to modify any part of the site contents including the Announcements, Contacts, Events, Links, and Tasks. It will also allow you to modify properties for folders specific to team portals (such as Process Guidance). To access these page properties, simply click Site Settings⇨Customizations⇨Modify Site Content (as shown in Figure 10-11).
Figure 10-11
You can change the theme of your team portal by clicking Site Settings⇨Customizations⇨Apply Theme to Site. You find a huge list of predefined themes in Windows SharePoint Services (and you can upload other themes by using the stsadm.exe tool). You can view the Apply Theme window (as shown in Figure 10-12).
Figure 10-12
Important | Once you change the site template, there is no easy way to revert the site to the original one. |
You can change the name of the site, simply click Site Settings⇨Customizations⇨Change Site Title and Description. You can change the title and description of the site (as shown in Figure 10-13) and click OK. You must then return to the root of your team portal to see the changes.
Figure 10-13