Adding a Custom View Style to Windows SharePoint Services

Article
03/25/2009

Deven Hariyani
Les W. Smith
Microsoft Corporation

June 2004

Applies to:
Microsoft® Windows® SharePoint® Services
Microsoft Office SharePoint Portal Server 2003

Summary: Enhance the experience of users in Windows SharePoint Services by creating and deploying a custom view style for lists or document libraries. You can create a view style that goes beyond the default styles to provide users a specific kind of interaction with lists and libraries. A view style can be deployed so that it becomes available for use in all lists and libraries or only in ones you specify. (8 printed pages)

How View Styles Work
How to Add a Custom View Style
Conclusion

How View Styles Work

Views in Microsoft® Windows® SharePoint® Services are used to format list data visually. The kind of list or document library determines the view styles that are available to it. For example, the Contacts list comes with a Boxed style that can be used to format contacts list data into boxed cells so that each data row of the list resembles a business card, as shown in the following figure.

Figure 1. Boxed style applied to Contacts list

A view style defines how list data is displayed within the body section of the page, which in a Boxed style includes everything that is contained within the box.

How to Add a Custom View Style

View styles in Windows SharePoint Services are defined using Collaborative Application Markup Language (CAML) in the file VWSTYLES.XML located in the top-level XML folder of a site definition.

For the default site definition in Windows SharePoint Services, this folder is located at Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\1033\STS\XML, where Local_Drive represents the drive letter where Windows SharePoint Services is installed. Because the definitions for view styles are stored on the file system and not in the database, only a SharePoint administrator with access to the file system is able to deploy new view styles.

Warning The changes that you make to VWSTYLES.XML may be overwritten when you install updates or service packs for Windows SharePoint Services, or when you upgrade an installation to the next product version.

Add CAML for a View Style in VWSTYLES.XML

Using an XML editor, such as Microsoft Office FrontPage® 2003 or Microsoft Visual Studio® .NET, open Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extenstions\60\TEMPLATE\1033\STS\XML\VWSTYLES.XML.

Add a new ViewStyle element within the ViewStyles element. The following table describes the supported attributes for ViewStyle.****

Table 1. Supported attributes for the ViewStyle element

Attribute	Description
ID	Required. The ID for the view style. Each view style must have a unique view style ID.
DisplayName	Required. The name of the view style that appears in the Style section on the Create View or Edit View page.
BaseType	The base type of the list for which the view style is created. Possible values for this attribute include the following: 0 Lists 1 Document libraries 3 Discussion boards. Does not support custom view styles. 4 Surveys. Does not support custom views or view styles.
Type	The type of list or document library, because multiple kinds of list or document library may be included within the same BaseType. For example, picture libraries are specified by Type=109 and form libraries are specified by Type=115, but both types are of the same base type for document libraries (BaseType=1). The following list shows the default lists in Windows SharePoint Services as follows: Name: type, base type. Custom List: 10, 0 Custom List in Datasheet View: 120, 0 Document Library: 101, 1 Picture Library: 109, 1 Survey: 102, 4 Discussion Board: 108, 3 Links: 103, 0 Announcements: 104, 0 Contacts: 105, 0 Events: 106, 0 Tasks: 107, 0 Site Template Gallery: 111, 1 Web Part Gallery: 113, 1 Data Sources: 110, 1 List Template Gallery: 114, 1 Form Library: 115, 1 Issues: 1100, 5
Preview	The path for an image file used to show a preview of the view style.
Description	The description of the view style that is displayed.

Within the ViewStyle element add the view style definition using supported CAML elements and attributes.

Guidelines

Keep the following points in mind as you create a custom view style:

The ViewHeader, ViewBody, ViewFooter, and Script elements are required for every view style.
Definitions for the GroupByHeader, GroupByFooter, and PagedRowset elements are drawn from the STDVIEW.XML file if they are not defined in VWSTYLES.XML.
The PagedRecurrenceRowset element is only supported for view styles that can be applied to events lists.
The Script section should match the other view styles, except that the ID for the array should be the same as the view style''s ID. You can also specify which columns are required for a particular view style by placing it in this section. Example:
```
<Script>
   g_RequiredFields[ID_of_ViewStyle] = new Array;
   g_RequiredFields[14] ["DocIcon"] =  true;
   g_RequiredFields[14]["LinkFilenameNoMenu"] = true;
   g_RequiredFields[14]["Edit"] = true;
</Script>
```

Example: Creating a custom Boxed style

You can easily create a view style by copying the CAML for an existing view style, and then modifying the appropriate tags to achieve the visual effect you want.

The following example shows how you can modify the Boxed style for a contacts list to create a style that displays information in a single column with a company logo.

Figure 2. Custom Boxed style displaying logos and a single column

Modify the attributes of the ViewStyle element, as shown in the following example, which assumes that a preview image named prvboxdlogo.gif has been added to the \_layouts\images folder on the front-end Web server:

<ViewStyle ID="56" DisplayName="Boxed Contacts with Logo" BaseType="0"
     Preview="_layouts/images/prvboxdlogo.gif" Description="Shows a single-column table with
     each list item in a labeled cell and displays the company logo.">

Add a Switch clause at the beginning of the ViewBody element that specifies the name of an image file to use as the company logo, based on the value of the Company column for an item.
```
<SetVar Name="CoLogo" Scope="Request">
   <Switch>
      <Expr>
         <Column Name="Company"/>
      </Expr>
      <Case Value="Company1">Company1.gif</Case>
      <Case Value="Company2">Company2.gif</Case>
      <Case Value="Company3">Company3.gif</Case>
      <Default>blank.gif</Default>
   </Switch>
</SetVar>
```
The example creates a variable named CoLogo that contains either the name of an image file to use for the logo or blank.gif for cases where no company value has been specified for a contact.

Note The example assumes that image files for company logos have been added to the \_layouts\images folder on the front-end Web server.

To insert the company logo next to the contact information, add another table with one row to contain the existing table of the view body, as follows in bold:

<Fields>
  <Switch>
    <Expr><GetVar Name="First" /></Expr>
    <Case Value="1">
      <HTML><![CDATA[
        <td valign="top" width="50%" class="ms-stylebox">
        <table border="0">        <tr><td width="15%">      ]]></HTML>      <Switch>        <Expr>          <GetVar Name="CoLogo" />        </Expr>        <Case Value="blank.gif">          <HTML><![CDATA[              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;          ]]></HTML>        </Case>        <Default>          <HTML><![CDATA[            <img alt="
          ]]></HTML>          <Column Name="Company"/>          <HTML><![CDATA[ Logo" src="/_layouts/images/          ]]></HTML>          <GetVar Name="CoLogo"/>          <HTML><![CDATA[">]]></HTML>        </Default>      </Switch>      <HTML><![CDATA[</td><td>
        <table border="0" width="100%">
        <TR><TD colspan="2" class="ms-vb">
      ]]></HTML>

The example evaluates the CoLogo variable and determines whether a logo exists for the contact. If not, nonbreaking spaces are put in the new first table cell; otherwise, the default is to construct an image tag and insert it in the cell.

To remove the second column, modify the closing section of the ViewBody element:

   <HTML><![CDATA[
     </TABLE></TD>
   ]]></HTML>
   <Switch>
     <Expr><GetVar Name="EvenRow"/></Expr>
     <Case Value="1">      
       <HTML><![CDATA[
         </tr><tr><td><br></td></tr><tr>
       ]]></HTML>
       <SetVar Name="EvenRow" Scope="Request" Value="0"/>
       <SetVar Name="OnlyOneItem" Scope="Request" Value="0"/>
     </Case>
     <Default>
       <HTML><![CDATA[<td> </td>]]></HTML>
       <SetVar Name="EvenRow" Scope="Request" Value="1"/>
     </Default>
   </Switch>

Replace the previous lines of code with the following lines, which include the closing </table>, </tr>, and </td> tags (shown in bold) for the table inserted in the previous step:

   <HTML><![CDATA[
     </TABLE>
     </td></tr></table>
     </TD></tr><tr><td><br></td></tr><tr>
   ]]></HTML>

Change the ID of the Script section to match the ID of the new view style, as follows:
```
   <Script>g_RequiredFields[56] = new Array;</Script>
```

Save and Set the Updated Configurations

After you have added the custom view style to the VWSTYLES.XML****file, save the file.
Restart the Web server process. On the Start menu of the front-end Web server, click Run and then type iisreset.

Apply the Newly Created View Style to a List or Document Library

Browse to a list that supports your custom view style and that is where you want to create a new view using the style.
On the Actions menu in the navigational area, click Modify settings and columns.
In the Views section, then click Create a new view.
On the Create View page, click Standard View. Next, scroll down to the Style section and select the view style that matches the display name of the view style you created.
Fill out the other properties that you want to apply to your new view, and then click OK.

For more information about customizing site definitions, see Introduction to Templates and Definitions. For more information about CAML, see Introduction to Collaborative Application Markup Language (CAML).

Conclusion

View styles provide you with a powerful way to customize the look and layout of SharePoint list and document library data. By adding the appropriate CAML code to a VWSTYLES.XML file, your users can deploy views that may be applied to all lists and document libraries.