Extended Design | Software Testing Fundamentals: Methods and Metrics

The previous section described several modifications that are easy to do on any SharePoint site page. In this section, you will see more advanced modifications that SharePoint Designer allows you to do.

Managing Site Themes

The look and feel of a SharePoint site is completely controlled by its Master Page, which uses Cascading Style Sheets (CSS) to define how the site looks. But WSS sites also have another technique called site themes to define what fonts, sizes, and colors are to be used by different parts of a page. By using preconfigured site themes, a team site owner can easily change its look and feel directly using the web browser. Using the link Site Actions Site Settings, and click on Site theme in the Look and Feel section the site owner can select between 18 different themes. Note that some of them are especially high contrast themes for visually impaired users, and these are hard to see for people with normal eyesight.

Using SharePoint Designer Themes

Site themes are just another way of using CSS files in WSS site, which was introduced in previous versions of SharePoint. Today when WSS 3.0 can use Master Pages, themes may be less essential, but still only site themes change the color setting for the complete page, while Master Pages affect just the site chrome, that is, the navigation, Quick Launch, and logotypes of the page. You must decide if you want to use Master Pages or site themes for a site. If you select anything other than the Default Master page, it will have precedence over the site theme setting on the content page, that is, the Home page for the site, and the list and library views. But the Site Setting pages and other administrative pages will still be affected by the site theme - probably something you may want to avoid. You may want to create your own theme; this is easily done with SharePoint Designer, since these themes in SharePoint are indeed SharePoint Designer themes.

Important

In FrontPage 2003 (the predecessor of SPD) you could manage Site Themes directly. This feature has been removed, since you now can modify the style of each visual element of a page.

Adding New SharePoint Themes

You can add your own site themes to WSS; this will make it possible to apply that theme to new sites without the need to use SharePoint Designer. Even though this chapter is about SharePoint Designer, this section provides an interesting discussion of SharePoint themes in general.

All of the preconfigured themes in SharePoint are stored in the file system on the SharePoint server. Each theme consists of a number of CSS and GIF files. Instead of creating all of the elements from scratch for your new theme, you can copy an existing theme folder and modify its files as necessary.

Try It Out Create New Standard SharePoint Themes

Log on to the SharePoint server as an administrator.

Open this folder:

     C:\Program Files\Common Files\Microsoft Shared\web server↩     extensions\12\TEMPLATE\THEMES

Note that it contains a number of folders, each with a name that matches one of the themes listed in the team site's administrative page. Start by copying one of these folders, for example VINTAGE, and paste it into the same THEMES folder. Rename the new folder using capital letters only; for example, DEMO.
Open the new folder; locate the INF file with the same name as the folder you copied, in this example VINTAGE.INF. Rename it to match your folder exactly: DEMO.INF.
Edit the DEMO.INF with Notepad. Change the Title to the same name as your folder; note that you don't have to use capital letters here. When finished, save the file.
```
     [info]     title=Demo 
```

Next, open this file in Notepad:

     C:\Program Files\Common Files\Microsoft Shared\web server↩     extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML

Each theme has a section in this XML file; for example, the theme VINTAGE:

     <Templates>       <TemplateID>Vintage</TemplateID>       <DisplayName>Vintage</DisplayName>       <Description>Description</Description>       <Thumbnail>../images/thvintage.png</Thumbnail>       <Preview>../images/thvintage.gif</Preview>     </Templates>

Copy this section and paste it back. Then edit the copied section to match the name of your theme. The TemplateID must match your folder name but must include small letters! You also need to change the DisplayName and the Description field, since they are displayed in SharePoint's theme list.
```
     <Templates>       <TemplateID>demo</TemplateID>       <DisplayName>Demo</DisplayName>       <Description>My Demo Theme</Description>       <Thumbnail>../images/thice.png</Thumbnail>       <Preview>../images/thice.gif</Preview>     </Templates> 
```
The new theme is now active. Open the list of Themes to check that it is there (Site Actions Site Settings Site theme); make sure to refresh the cache in your web browser (Ctrl+F5) or else you may get an error stating that this theme already exists.
Next step is to change this theme so that is does not look the same as the one you copied. Open the THEME.CSS file in your newly created Theme folder. Change whatever element you need in this CSS file, then save the file.

Important

In order to see the modification you must: a) first select another theme, then b) apply your new theme, and then c) refresh the browser (Ctrl+F5).

It is not so easy to understand the Theme.css file and what elements to modify to get a specific result. Luckily there are some good resources that describe what each element does:

q This article by Microsoft describes each locator and an image of each object so you easier can see what it does: http://msdn2.microsoft.com/en-us/library/ms438349.aspx.
q The SharePoint MVP Shane Perran not only offers a good explanation of how to create your own theme, but also offers a package of free themes, which all contains descriptive comments so that you will understand what it does. This is an excellent tool to learn the fine art of creating themes: http://www.graphicalwonder.com and search for "themes."

Adding Pages to SharePoint

You may have noticed that each WSS site only consists of one single Web Part page; the other pages for displaying a document library and lists are, in fact, also Web Part pages and can be modified with a standard web browser. Sometimes you may need one or more extra pages, perhaps because there is too much information to be displayed on this site. In MOSS sites, it is very easy: simply add a new Publishing Page, and then configure the navigation settings to display this page on the top navigation bar. In WSS this is harder, since it does not have the feature for Publishing Pages and page libraries, and therefore WSS pages will not be listed in the top navigation bar.

WSS allows you to create two types of pages: basic HTML pages and Web Part pages, either through the browser or by using SharePoint Designer. This section describes how to add an extra page of each type to the Home page of a WSS team site. Each page, regardless of type, must be stored as a file in a document library on this site. The trick is not to create these extra pages, but to make them easily and seamlessly integrated in the Home page.

Important

In SharePoint 2003, you had to use FrontPage to create navigation tabs to any extra pages. In SharePoint 2007, you can simply change the navigation settings, so you don't need SPD for this. However, in some situations there may be a need to create custom tabs on a WSS site. Both methods are described in the following section.

Adding Web Part Pages

This type of page is exactly like the Home page of a team site; it has one or more Web Part zones, which you add Web Parts to. This type of page will also display the same header and menus as the Home page.

In this example, you will use a web browser to add one new Web Part page to the following team site: http://srv1/SiteDirectory/it. The new page will also have some Web Parts added to it. At this stage, you will just create the page; later on you will create buttons to make the page easer to use for the user.

Try It Out Create a New Web Part Page within the Browser

Open the IT team site in a web browser.
Start by creating a new document library for storing the page files: Click Site Actions Create Document Library, and create a library named WSS-pages.
Next, create a Web Part page: select Site Actions Create Web Part Page, then enter these settings:
1. Name: WP-Page.
2. Choose a Layout Template: Header, Footer, 3 Columns.
3. Document Library: WSS-pages. This is where this file will be stored.
4. Click Create.
The new page opens. Add some Web Parts, for example Site Users and Shared Documents.
Click IT to open to the default start page for the team site.

The big question now, of course, is how to display it again. The answer is as simple as it is surprising: Open the WSS-page library, and click on the WP-Page file. This was easy but not intuitive, right? You will soon see some ways to make this more intuitive.

Adding Standard HTML Pages

Now let's create the other type of pages. The difference here is how the page behaves; it will not contain any Web Part zones, so you cannot add Web Parts to it. But it will contain a Content Editor server control that allows you to enter most types of HTML-formatted information, such as text, images and links. With SPD you can also add any other type of HTML tags and form controls to the Content Editor, such as an IFrame.

In this example, you will create a basic web page in the same document library as previous page:

Try It Out Create a Basic Web Page

Open the team site in a web browser.
Click Site Actions Create and select Basic Page in the Web Pages section.
Enter a name for the page, then use the menu next to Document Library to change its name to WSS-pages. Then click Create.
The new page is displayed, and its Content Editor is opened. Now, you can start adding information to the Content Editor. Click Save when you're ready (see Figure 13-9 for an example).

Figure 13-9
Option: If you open the basic page in SPD, you can then add more HTML tags and forms controls to it than the default tools in the Content Editor offer. When you save it, SharePoint will inform you that the page will now be unghosted; click Yes to save it.

Making Pages Easier to Open

Creating extra pages both is easy and opens up interesting opportunities. As stated before, the challenge is to make them work seamlessly with the rest of this team site. There are several options available:

q Create a link in a list: Requires that you create a SharePoint list of links. This is very easy, but may not be the most intuitive way of opening these added pages.
q Create a link in the Quick Launch bar: Requires that you change the navigation for the WSS site: Click Site Actions Site Settings Navigation, and add the link in the section Navigation Editing and Sorting. The result is easy for the user to use and understand.
q Create a button linked to the page: Requires SharePoint Designer; this option is also easy to use and may be a very intuitive, since you can design the buttons to make them more recognizable and attractive.
q Create a list of tabs, version 1: You can add a tab to the global top navigation bar of the WSS site, as described below. But to do that you must create a unique set of navigation tabs for the site. That is, the site will only show its own navigation tabs, not the global Home, Document Center, and News tabs. This is really an advantage, since users will understand better that the new set of tabs points to pages related to the particular WSS site.
q Create a list of tabs, version 2: Instead of using the built-in navigation tabs you can create buttons shaped as tabs and place them near each other to give the impression of a number of tabs instead of pages. The best result will be when using Web Part pages, since they also use the same top header and color as the Home page. This technique is described in the following Try It Out.

Try It Out Create Navigation Tabs to Pages

In this example, you will customize the standard navigation tabs for the WSS site that contains multiple pages. Start by open the site in a web browser.
Click Site Actions Site Settings Navigation (in the Look and Feel section). Note that there is an option for showing pages but it is grayed out, since it only works for Publishing Pages, that is, pages in MOSS sites.
You must configure the WSS site to show customized navigation elements: In the Global Navigation section, select the option Display the navigation items below the current site.
The previous step will display the new heading Global Navigation in the Navigation Editing and Sorting section. Select Global Navigation, and then click Add Link. Then enter these values:
1. Title: Enter the tab title - try to keep it short but descriptive.
2. URL: Enter the full URL to the page. You can use Browse to select the page URL, or enter the URL manually.
3. Open link in new windows: Optional.
4. Description: Optional; this information will show up as a tooltip when the user hovers the mouse over this tab (see Figure 13-10).
  
  Figure 13-10
5. Audience: Optional; use it to target this page for specific groups of users.
6. Click OK.
Go back to the navigation settings (see Figure 13-11). Add any extra links you need, then click OK to save and close the page.

Figure 13-11
Open the WSS site and inspect the new navigation tabs (see Figure 13-10).

The second version adds tab buttons to give the impression that this is a Pages view. The advantage compared to the first version is that the global navigation function is still intact. The drawback is that this approach requires some extra steps. The challenge here is that you must add the tab buttons on all pages, and in the same position, to make it seamlessly integrate with the team page. This can be tricky at times, but if you are careful it will be very nice. Instead of adding single tab buttons on each page, you can create a layer that contains the tab buttons, then copy this layer onto each page. The following Try It Out shows one way of doing this.

Try It Out Create Tab Buttons

Open the site's start page, Default.aspx, with SharePoint Designer.
Use the Insert menu to select HTML Layer. Locate the layer where you want the tab buttons to go, for example just under the top menu. You may need to adjust the size of the layer to fit all the buttons you will add.

Important
If the Layer option is grayed out, you have located a part of the page that does not allow you to create a layer. If so, go to the top of the code for the page and try again.
Make sure that the cursor is inside the layer, then add the first tab button:
1. Click Insert Interactive button.
2. Select the tab button you prefer; note that there are several types and colors to choose from. In this example, use Glass Tab 1.
3. Text: Home. Since you will add this layer to several pages, you should also have a button that takes you back to the Home page. This is especially important to get a consistent view of these navigation tabs.
4. URL: Click Browse and select Default.aspx, which is the Home page for the team site.
5. Click OK to save this button.
Add the second button next to the first one. Instead of creating the button from scratch, select the existing one; right-click and select Copy.
1. Place the cursor directly to the right of the first tab button.
2. Right-click and select Paste.
3. Double-click on the new button. Its configuration pane opens.
4. Change the Text to whatever you want to call the second page.
5. Click Browse for the URL field; open the document library WSS-pages, where these added page files are stored, and select the second page.
6. Click OK to save and close the page.
If you have more pages, add a tab button for each of them to the layer in the same way.
When you are done, adjust the position and size of the layer so that it will look good on every page, and then save the page. Click OK to save the images for the buttons, but do not close SharePoint Designer yet.
Right-click on the frame around the layer and select Copy; you will now paste the layer into all the other pages:
1. Open the second page in SharePoint Designer.
2. Select the menu options Edit Paste. This will place the layer in the same location as on the first page.
3. Save the page.
4. Repeat steps a–c for all the pages added to this team site.
Make sure that you have saved all modifications in SharePoint Designer. Open the team site with a browser; click on one of the tab buttons. It should open that page, which should also contain the same buttons. Make sure that it works and that it looks good. See Figure 13-12, where the second page is displayed with its three buttons.

image from book
Figure 13-12

If you choose to add tab buttons to these pages, you may want to remove the text Home from the start page for this team site to make that page look better; use SharePoint Designer to do this.

Data Sources and Data Views

A very common request is to make content in one site available in another site. Most SharePoint installations uses team sites for managing projects, and after some time there is a need for a shared view of tasks as different sites emerge. Another similar request is to have one team site that displays the document libraries in other sites. Finally, a third request may be to display content in an external database, for example a product database on an MS SQL server.

There are several ways to meet these needs: MOSS Standard Edition comes with the Content Query Web Part, (see Chapter 8), which is very good for displaying content in lists and libraries in other sites. MOSS Enterprise Edition also adds the Business Data Catalog, which is a very flexible and advanced feature that allows SharePoint to view, update, and search in almost any type of external data source, such as MS SQL databases, Oracle databases, or a SAP system. However, there are two other Web Parts that also can be used to meet these needs: Data Source and Data view; these two Web Parts are only available when using SharePoint Designer 2007:

q Data Source: Defines what source to read.
q Data view: Defines how this source will be displayed.

Both of these are integrated in the same package in SharePoint Designer: the Data View package. These are not standard Web Parts and cannot be installed in a Web Part zone; you must add them to another part of the page. In the following example, you will see how to display a document library in another team site and how to display a table in an external MS SQL database.

Displaying Content in Other Sites

The first example will use the team site http://srv1/SiteDirectory/sales to display a document library stored in http://srv1/SiteDirectory/it. This example can easily be extended to display any type of list, and it works for both MOSS and WSS environments.

Try It Out Display Content in Another Site

Log on as an administrator.
Open the team site http://srv1/SiteDirectory/sales in SharePoint Designer.
Using Design mode, place the cursor directly under the left Web Part zone.
Select the menu options Data View Insert Data View. This will open the Task Pane and display all the data sources in the current team site, as shown in Figure 13-13.

Figure 13-13
The data source you need (i.e., http://srv1/SiteDirectory/it) is not listed. Click Connect to another library at the bottom of the Task Pane, and then click the Add button and enter the following:
1. Display Name: IT Team Site.
2. Location: http://srv1/SiteDirectory/it.
3. Click OK twice. Note that the Data Source Library pane now lists IT Team Site.
Expand the IT Team Site (click on its plus sign); all lists and libraries in this site are now listed. Expand SharePoint Libraries; you will see the Shared Documents library. Add this library to the page like this:
1. Place the cursor where you want the new list to be displayed.
2. Click on the name Shared Documents. A menu is presented.
3. Click Show Data. The columns for the document library are displayed in the Data Sources Details pane.
4. Select all the properties you want to display in the new list, then click the Insert Selected Fields button to open that menu and chose Multiple Item View. Note that to select more than one property you must hold down the Ctrl key.
5. Verify that the content is displayed. If you are happy with this view, then save the page in SharePoint Designer.
You can also change the view of table, for example what columns to display, the sort order and formatting. This is similar to creating views for any SharePoint list but is more powerful. Following are some of the things you can do, starting with how to display more columns. Note that it is a bit tricky, so make sure to follow these instructions exactly.
1. Continue with SPD working on the same page as in the previous step. If you want to display more columns on the Data View list, you must first create a new empty column and then insert a Data Source column. Place the cursor at the top of the column you want to move to the right; when you see a black arrow pointing down, you are in the right position. (It is easiest if the list is not currently selected.) Right-click and select Insert Column to the left (or right); a new column is displayed in the table.
2. Set the cursor inside the new column for any of the data rows. Make sure not to set the cursor in the title row! Note that the column is very narrow, since it does not contain any data yet. It is actually easier to use the arrows on the keyboard to place the cursor in this cell than it is to use the mouse.
3. In the Current Data Source pane, right-click the column to be added. Select Insert as <Text/Number/Currency>. (Choose whatever type is appropriate for this column.)
4. Place the cursor in the title row for the column; type a name for the column.
Another thing you probably want to do is to create a link to these documents, so they can be opened. By default, only their names will be displayed, but you cannot click on them to open them, as you can in a normal document library. You will need to include the property URL Path in the list, then you can replace the existing URL column with the same content but with hyperlinks:
1. Right-click the URL path for the first document in the list (but not the title row).
2. Select Format item as Hyperlink. You will be prompted as to whether you trust this environment. Click Yes, then you can edit the hyperlink. Just accept the default and click OK.
Another way to do this is to make the document names hyperlinks. Clicking a name first opens the web form for the document, where the user can open the actual document.
1. Select any of the existing filenames.
2. Right-click, and select Format Item as Hyperlink to Display Form.
To change the sort order and group items, you can do this:
1. Click anywhere on the new list; at the top right part of the list an arrow pointing to the right is displayed. Click on the arrow to open the Common Data View Tasks menu (see Figure 13-14).
  
  Figure 13-14
2. Click Sort and Group in the menu.
3. Select the column to sort by; click Add. If necessary add more columns. Check Show group header if you want to group the list items based on the added column.
4. Click OK to save and close the page.

You can do a lot more, such as conditional formatting, filtering, and changing the layout for the list, using the Common Data Views Tasks menu, but these examples will give you the general idea of how to use and customize this list.

Displaying External Information

The second use for the Data view is to display content in sources outside SharePoint., and it is capable of connecting to many type of sources, such as:

q MS SQL Databases
q XML files
q Web Services

In this example, you will connect to the demo database Northwind that is included by default in all MS SQL databases. By coincidence this database is stored on the same SQL server that SharePoint uses, but you can use these steps to connect to any database. You will display the Products table on the same team site as in the previous example.

Try It Out Display Content in an External Database

Log on as an administrator.
Open the http://srv1/SiteDirectory/sales site, then open Default.aspx in SharePoint Designer.
Select the menu options Data View Manage Data Sources. This will open the Data Source Library pane and display all the data sources in the current team site. Look at the listing under this site name; it will show you all the sources available for this team site, that is, lists and libraries, plus database connections, XML files, Business Data Catalogs, server-side scripts, and XML Web services.
Expand the database connections:
1. Click Connect to a database. A dialog box opens.
2. Click Configure Database Connection.
3. Enter the server Name for the SQL database, and select the Provider Name. You must also define what user account to use when reading this information. You could also choose Single Sign-on authentication, if you have configured Single Sign-On in SharePoint. This is a separate database that stores user accounts and passwords for accessing databases and information outside SharePoint. Click Next to continue. You may receive a warning that the user name will be stored as clear text in the data connection string. Click OK to continue.
4. All databases on the MS SQL server are listed; select Northwind. A list of all tables for that database appears. Select Products and click Next.
5. A list of options for filtering and formatting the table is displayed. Don't change anything now, just click OK.
6. In the Data Source Library, under Database Connections, you will see Products on Northwind. Click on this, and add data in the same way as described in the previous example on how to show content in other sites.

As you can see, the Data Source and Data view offer a number of ways to present information stored in other SharePoint sites, as well as external data sources. If you need more control and functionality, you should use the Business Data Catalog Web Part, but remember that this is only available for MOSS Enterprise installations.