One of my favorite aspects of working with Project Server is the flexibility of its web interface (PWA), largely due to the fact that it's built on top of SharePoint technology. Even a hacker like myself can twist, mold, and shape PWA pages any number of ways... without writing, compiling, and installing a single line of .NET code!
In this webisode, we'll look at just a few ways that you can quickly and easily manipulate the PWA interface, such as re-arranging the information that's displayed on a page, adding more information to a page, and tweaking what's already there. To accomplish this, we'll use a SharePoint concept called 'web parts'.
What are Web Parts, Exactly?
Without getting too technical, a SharePoint web part can be thought of as a 'widget'... or a 'block' of information that can be displayed on a page within a SharePoint website. Some pages within a SharePoint site -- otherwise known as 'web part pages' -- can be configured to look like 'dashboards' by simply adding various 'blocks' of information (a.k.a. 'web parts') and arranging them on the page. Here are a couple of examples of web part pages:
The first example above is a PWA homepage which has two web parts (outlined in red), and the second example is a Project Workspace homepage which has four web parts (also outlined in red). Each of the outlined web parts has a specific purpose and displays a specific type of information -- or 'content' -- on the page.
How Do I Work With the Web Parts on a Page?
Although you could use a fancy tool like SharePoint Designer or Visual Studio to manipulate the web parts on a page, in most cases this would be overkill. To work with the web parts on a SharePoint page, all you need is a web browser and the appropriate permissions to edit the page. Once you've got these two prerequisites knocked out, simply pull open the 'Site Actions' drop-down menu located near the upper right corner of the page, then click the 'Edit Page' option:
After doing this, the page should be opened in 'edit mode', as shown below:
Located near the upper left corner of the page is a small message stating 'You are editing the Shared Version of this page':
Located near the upper right corner of the page is a small link which allows you to 'Exit Edit Mode':
Note: not all pages in a SharePoint website are web part pages. In other words... not all pages can be edited. To determine if a page can be edited, simply pull open the 'Site Actions' menu and look for the 'Edit Page' option. If it's not there, then the page can't be edited using the methods described here.
Notice that when a web part page is in 'edit mode', it's divided into large sections -- or 'web part zones' -- which may hold one or more web parts:
In the screen scrape shown above, we can clearly see four web part zones on the page: the 'Header' web part zone, the 'Left' web part zone, the 'Middle' web part zone, and the 'Right' web part zone. If you look VERY closely, you'll even see the top of the 'Footer' web part zone, located near the bottom of the window. In the top of each web part zone, there is an 'Add a Web Part' button which spans the entire width of the zone:
Adding a Web Part to a Web Part Page
To add a web part to a page, simply do the following:
1. Switch the page into 'edit mode' as described above by using the 'Site Actions' menu near the upper right corner of the page.
2. Identify the web part zone where you'd like to add the new web part, then click the respective 'Add a Web Part' button at the top of that zone.
3. In the 'Add Web Parts' dialog box, select the checkbox next to one or more web parts which you would like to add to the web part zone, then click the 'OK' button:
You should see the selected web part appear at the top of the appropriate web part zone on the page (in my case, the 'Content Editor Web Part' was added to the top of the 'Header' web part zone):
4. Exit out of 'edit mode' as described above by using the 'Exit Edit Mode' link near the upper right corner of the page.
Rearranging Web Parts on a Page
To rearrange web parts on a page, simply do the following:
1. Switch the page into 'edit mode' as described above by using the 'Site Actions' menu near the upper right corner of the page.
2. Click on the header / title of the web part that you'd like to move (as indicated by a 4-way cursor arrow), then drag the web part into another web part zone on the page.
3. When the web part is in the desired location (as indicated by the colored 'I-beam'), drop the web part into place:
After dropping the web part, it should appear in the new location:
4. Exit out of 'edit mode' as described above by using the 'Exit Edit Mode' link near the upper right corner of the page.
Removing a Web Part from a Page
To remove a web part from a page, simply do the following:
1. Switch the page into 'edit mode' as described above by using the 'Site Actions' menu near the upper right corner of the page.
2. Identify the web part that you'd like to remove from the page, pull open the 'edit' menu located near the upper right corner of the web part, then select the 'Delete' option:
3. In the following warning dialog, click the 'OK' button to confirm the deletion of the web part:
The web part should no longer appear on the page:
4. Exit out of 'edit mode' as described above by using the 'Exit Edit Mode' link near the upper right corner of the page.
Configuring / Tweaking a Web Part
Some web parts need configuration in order to display the desired information properly; to configure a web part, simply do the following:
1. Switch the page into 'edit mode' as described above by using the 'Site Actions' menu near the upper right corner of the page.
2. Identify the web part that you'd like to configure, pull open the 'edit' menu located near the upper right corner of the web part, then select the 'Modify Shared Web Part' option:
3. An edit panel with appear on the right side of the web page containing configuration options specific to that type of web part; expand the headings by clicking the [+] and select the appropriate options such as 'Title', 'Chrome Type', and so forth, then click the 'OK' button at the bottom of the panel:
After clicking the 'OK' button, the web part will be updated on the page to reflect the changes that were made:
4. Exit out of 'edit mode' as described above by using the 'Exit Edit Mode' link near the upper right corner of the page.
In Summary...
As you most likely noticed in the 'Add Web Parts' dialog box, there are many web parts available for building web part pages, and if your Project Server is installed with Microsoft Office SharePoint Server 2007 (MOSS 2007), there will be even more to pick from! I won't go into the gory details here, but if you're interested in learning more about the various web parts that are available for use in SharePoint web part pages, a little online searching and a little careful experimenting will go a long way.
Also, please keep in mind that when you make changes to a web part page, you're changing that page for EVERYONE who uses the system... so be careful!
Happy hacking!