Changing the Way Lists and Libraries are Displayed

• Introduction to lists and libraries
• Examples
• How to change the way lists and libraries are displayed
• Frequently asked questions
• See it in action
• Additional resources
   

Introduction to lists and libraries

Lists and libraries are cornerstones of Windows SharePoint Services functionality. They allow you to store information and documents in a central location, and allow content owners to upload and update the information and documents themselves. List and library views can also be sorted or filtered, and even displayed on multiple pages on your site. This article discusses some of the most common ways to use FrontPage 2003 to customize the way Windows SharePoint Services lists and libraries are displayed on Web pages.

Topics covered in this article include:

• Inserting a view of a list or library into a page
• Changing fields displayed
• Changing list styles
• Removing the title bar
• Changing menu options
• Filtering to display a subset of the data
• Changing sort order
• Grouping list content
• Creating collapsible lists
• Free-form formatting with XSLT views

Examples

The number of ways you can change the display of Windows SharePoint Services list or library views is immense. Here are just a few examples of ways you can customize the display of Windows SharePoint Services lists and libraries with FrontPage 2003. Click the thumbnail image to see a larger view of it.

Change Made	Example (click to enlarge image)		Change Made	Example (click to enlarge image)
List view inserted into page			Removed title bar
Fields displayed changed			Filtered content
Changed list styles	Basic Table		Changed sort order
	Alternating Colors		Sorted and grouped content
	Datasheet View		Sorted, grouped, and collapsed content
Changed menu options	Full toolbar		Created free-form list with XSLT views
	Summary toolbar
	No toolbar

How to change the ways lists and libraries are displayed

One of the biggest advantages to centralizing data in lists and libraries is that you can freely re-use that data in other places on your Web site. Once a view of a list or library is inserted into your Web page, you can also change the way that data is displayed in a wide variety of ways. The remainder of this article describes how to change the way that a staff list is displayed on a page. You can use these principles to change the views of libraries and other Windows SharePoint Services elements as well.

Tip: If you would like to follow these steps using the same list we used, you can download our Staff List spreadsheet and then convert the spreadsheet into a list.

View of a list inserted into a page

Here are the steps to take to insert a view of a Windows SharePoint Services list or library into a Web page on the site that contains that list.

1. Open FrontPage 2003 and the page you want to insert the list or library into.
2. Click the location on the page you want the list to appear.
3. Click the Web Part option on the Data menu. The Web Parts task pane opens.
   
   
    
4. Click the name of the Web Part you want to insert on the Web Part List, and then click the Insert Selected Web Part button. The Web Part is inserted into your page.
5. Save your Web page by clicking the Save option on the File menu. Now you can view the list in the browser.

List with fields displayed changed

It is easy to change the fields displayed in a list or library once you have inserted a view of it into a Web page. Here are the steps to follow:

1. Open FrontPage 2003 and then open the page that contains the list you want to change the view of.
2. Right-click on the list, and then click List View Properties.  The Data View Details task pane opens.
   
   
    
3. Click the Fields link and then the Displayed Fields dialog box opens.
   
   
    
4. To add fields to the list, click on them in the Available fields box, and then click the Add>> button. To remove fields from display, click on them in the Displayed fields box, and then click << Remove. You will notice that some fields cannot be removed from some views. These fields are marked with the *.
   
   Tip: You can use CTRL + click to select multiple items, and then click Add>>.
    
5. You can also change the order of the fields displayed by clicking the field in the Displayed fields box and then clicking the Move Up or Move Down buttons. When the fields are as desired, click the OK button.
6. Save your Web page by clicking the Save option on the File menu.  The fields displayed are changed.

Tip: Try changing to a different list style if there are fields you want to remove from the view on your page that are not removable. See the Changing List Styles section in this document for more information.

List viewed with different styles

There are ready-made templates for lists that you can take advantage of to save time and give all of your list views a professional look. Here is how to change list or library view styles:

1. Open FrontPage 2003 and then open the page that contains the list you want to change the view of.
2. Right-click on the list, and then click List View Properties.  The Data View Details task pane opens.
   
   
    
3. Click the Style link, and then the View Styles dialog box opens.
   
   
    
4. Click the style you would like to use in the HTML view styles scroll box, and then click OK. 
5. Save your Web page by clicking the Save option on the File menu.  The style for the list is changed.

Limiting the number of records displayed

There may be cases where you do not want to display an entire list due to space constraints on your Web page. You can easily limit the number of records display in a list or library when you follow these steps:

1. Open FrontPage 2003 and then open the page that contains the list you want to limit the number of records displayed in.
2. Right-click on the list, and then click List View Properties.  The Data View Details task pane opens.
   
   
    
3. Click the Style link.  The View Styles dialog box opens.
4. Click the Options tab.
5. In the Record Sets section of the View Styles dialog box, make sure that the Limit the total number of items displayed to radio button is selected, and then type the number of records you would like to display.
   
   
    
6. Click OK.
7. Save your Web page by clicking the Save option on the File menu.  The list is changed.

List with title bar removed

The lists displayed on the home page of a default Web site created with Windows SharePoint Services include a title bar that contains the name of the list, such as Announcements, Events, and Lists. If you want to remove this title bar, you can follow these steps:

1. Open FrontPage 2003 and then open the page that contains the list you want to remove the title bar from.
2. Double-click on the list, and then the <List Name> window opens.
3. Click the None option from the Frame Style drop-down box.
   
   
    
4. Click OK. The title bar is no longer on the list or library view.
5. Save your Web page by clicking the Save option on the File menu. 

List with menu options changed

The lists that are displayed on the home page by default in sites created with Windows SharePoint Services have the option to add new items.  However, you can change the toolbar options to suit your needs. Here are your options:
 

Toolbar Option	Example
No Toolbar
Summary Toolbar
Full Toolbar

Here are the steps to follow to change the type of toolbar used on the view of a list or library.

1. Open FrontPage 2003 and then open the page that contains the list on which you want to change the toolbar type displayed.
2. Right-click on the list, and then click List View Properties The Data View Details task pane opens.
   
   
    
3. Click the Style link, and then the View Styles dialog box opens.
4. Click the Options tab, and then follow the steps for the type of toolbar you would like to use:


 

Option	Steps
No toolbar	Make sure that the Show toolbar with options for checkbox is unchecked.
Summary toolbar	Select Summary toolbar from the Show toolbar with options for drop-down box.
Full toolbar	Select Full toolbar from the Show toolbar with options for drop-down box.

5. Click OK.  The toolbar has been changed.
6. Save your Web page by clicking the Save option on the File menu. 

Filtered list

You can insert a view of a list or library into a page, and then limit the data displayed by using filtering. Filtering allows you to display only the records that meet the criteria you choose. Here is how to filter a list that you have inserted into a page.

1. Open FrontPage 2003 and then open the page that contains the list display you want to filter.
2. Right-click on the list, and then click List View Properties. The Data View Details task pane opens.
   
   
    
3. Click the Filter link and then the Filter Criteria dialog box opens.
4. Click the Click here to add a new clause link.
5. Select the field you would like to filter on by clicking the Field Name drop-down box, then click the Comparison drop-down box and then select the comparison option you want to use (such as Equals, Greater Than, and Less Than).
6. Click the Value drop-down box and then type the value you want to compare against, such as “Region Equals Asia Pacific.”
   
   
    
7. Click the Click here to add a new clause link to add more criteria to filter against. 
8. When you are finished, click the OK button.
9. Save your Web page by clicking the Save option on the File menu.  The list is now displayed with only the data that meets the criteria you set.

List with changed sort order

Changing the sort order of list or library views is easy; simply follow these steps:

1. Open FrontPage 2003 and then open the page that contains the list of which you want to change the sort order.
2. Right-click the list, and then click List View Properties. The Data View Details task pane opens.
   
   
    
3. Click the Sort & group link. The Sort and Group dialog box opens.
   
   
    
4. If the fields you want to sort against are already in the Sort order box, you can click them and then click the Move Up or Move Down button to change their sort priority.
5. If there are fields in the Sort order box that you do not want to sort against, click the fields and then click the <<Remove button.
6. If there are fields in the Available Fields box that you want to sort against, click them and then click the Add>> button.
7. Make sure that the Ascending radio button is selected for each field you want to sort against if you want the sort to go from lowest to highest, or that the Descending radio button is selected if you want the sort to go from highest to lowest.
8. Click OK when you are finished.
9. Save your Web page by clicking the Save option on the File menu.  The list is now displayed with the sort order you specified.

List that is sorted and grouped

New in FrontPage 2003, you can create grouped list or library views to make it easier for users to find the information they are looking for. For example, in the list view shown, the staff list is grouped by region to make finding people in each region easier.  You can follow these steps to display list data grouped by a field:

1. Open FrontPage 2003 and then open the page that contains the list you want to group.
2. Right-click on the list, and then click List View Properties. The Data View Details task pane opens.
   
   
    
3. Click the Sort & group link. The Sort and Group dialog box opens.
   
   
   
4. Click fields you want to sort on first, and then click the Add>> button to add them to the Sort order box.
5. Make sure that the Ascending radio button is selected for each field you want to sort against if you want the sort to go from lowest to highest, or that the Descending radio button is selected if you want the sort to go from highest to lowest.
6. Make sure that the field you want to group by is in the Sort order box.  In the example above, we grouped against the Region field so made sure that it was first in the list.
7. Make sure that the Show group header check box is checked and that the Expand group by default radio button is selected.
8. Click OK. 
9. Save your Web page by clicking the Save option on the File menu.  The list is now displayed grouped and sorted as desired.

List that is sorted, grouped, and collapsed

Grouping and then collapsing list content is a great way to make a long list of data easier to navigate. For example, this Staff List is grouped to show only the Regions by default, and when the visitor clicks the , the list of staff by region expands. Similarly, if the visitor clicks the , the list of staff by region contracts. Here are the stops to take to create a view of a list that is sorted, grouped, and collapsed.

1. Open FrontPage 2003 and then open the page that contains the list you want to group and collapse.
2. Right-click on the list, and then click List View Properties. The Data View Details task pane opens.
   
   
    
3. Click the Sort & group link and then the Sort and Group dialog box opens.
   
   
    
4. Click fields you want to sort on first, and then click the Add>> button to add them to the Sort order box.
5. Make sure that the Ascending radio button is selected for each field you want to sort against if you want the sort to go from lowest to highest, or that the Descending radio button is selected if you want the sort to go from highest to lowest.
6. Make sure that the field you want to group by is in the Sort order box.  In the example above, we grouped against the Region field so made sure that it was first in the list.
7. Make sure that the Show group header check box is checked and that the Collapse group by default radio button is selected.
8. Click OK. 
9. Save your Web page by clicking the Save option on the File menu. The list is grouped, sorted and collapsed as desired.

List with free-form formatting in XSLT View

XSLT Data Views represent powerful new ways to format list and library view data in FrontPage 2003. XSLT Data Views allow you to display and then format Windows SharePoint Services list or library data however you choose. This example shows form data interspersed with plain text to form complete sentences from the data. For example, the sentence in the XSLT Data View of the staff list that reads, "Helge Hoeing is part of the Americas region and is a Sales Representative reporting to Britta Simon" is actually created by displaying [Full  Name]+" is part of the "+[Region]+" region and is a "+[JobTitle]+" reporting to "+[Reports To]+"."

Here are the steps to take to convert a list or library view and convert it to an XSLT Data View, and then format the data:

1. Open FrontPage 2003 and then open the page that contains the list you want to work with.
2. Right-click the list, and then click Convert to XSLT Data View. The Data View Details task pane opens.
   
   
    
3. Click inside the list Web Part where you want to edit the list, and then type freely. You can add or remove columns in the table displaying the data, you can change fonts and formatting, and more. For example, for our free-form staff list we simply clicked after the name of a staff member, and then typed "is part of the."
   
   
   
   You will notice that this text is automatically added to all of the records in your list view.
    
4. Click inside the list Web Part where you want to add a field from your list, and then right-click the field you want to add on the Data View Details task pane. Choose one of the formatting options by clicking on it.
   
   
   
   Tip: To create our free-form staff list, we chose Insert as Text for all of the fields except for the EmailAddress field — for that field, we chose Insert as Hyperlink.
    
5. Repeat steps 3 and 4 until the XSLT Data View is the way you want it.
6. Save your Web page by clicking the Save option on the File menu.  The XLST Data View is now displayed.

Frequently asked questions

See it in action

• The Announcements list on the home page of the finance sample site is an XSLT View of the Announcements data.
• The Events list on the home page of the human resources sample site is a formatted List View of the Events data.
• The Sales Organization list on the home page of the sales and marketing sample site is a grouped collapsed list.

Additional resources

Here are links to articles regarding lists:

	Converting an Excel Spreadsheet into a List
	Using Lists to Create Collapsible Navigation Bars