Dashboard Site Customization | Microsoft SharePoint(TM) Portal Server 2001 Resource Kit (Examples & Explanations Series)

The following section describes methods you can use to customize your dashboard site, including creating custom Web Parts, creating Web Parts from documents created in Microsoft Word, Microsoft Excel, or Microsoft PowerPoint® or creating additional dashboards and importing or exporting Web Parts. This section provides procedures for each of these tasks.

Creating Web Parts

After you open the project in the Office XP Developer environment, you can customize the dashboard site by adding new Web Parts.

A Web Part can contain any kind of Web-based information. To add Web Parts to a dashboard project, use the Add New Item command. By using this command, you can add an HTML, Microsoft JScript®, Microsoft Visual Basic® Scripting Edition (VBScript), or Extensible Markup Language (XML) Web Part to the dashboard project.

To add a new Web Part to a dashboard:

In the Solution Explorer, select the dashboard project.
Right-click the Portal folder, point to Add on the shortcut menu, and then click New Item.
Select a Web Part type, and then click Open. For this example, select an HTML Web Part type.

When you add a Web Part, Office Developer associates a standard set of properties with the Web Part. To view the properties of a Web Part in the Properties Window, select the Web Part in the Solution Explorer.

If the Properties Window is not visible, click the Properties icon in the Solution Explorer to make it visible or select the Properties Window from the View menu.

Writing Reusable Web Parts

You can add content to your Web Part using two fundamental coding practices for SharePoint Portal Server:

To associate a resources folder with a Web Part, you must follow the _Files naming convention. For example, if you name your Web Part my_Web_Part.htm, then name the associated resources folder for this Web Part my_Web_Part_files.
You should use the Web Part Resource (_WPR_) token when referring to the resources folder of a Web Part. For example, if you want to render an image that you imported into the resources folder of a Web Part, then use the following naming convention <img src="_WPR_\my_Image.jpg">.

By following these naming conventions, you can write functional and reusable Web Parts.

Adding Content to a Web Part

In this example, you will add content to the HTML Web Part created in the previous procedure. You can edit some properties for the Web Part and display an image in the Web Part.

To add content to a Web Part:

To open the Web Part in the code editor, double-click the Part.htm Web Part in the Solution Explorer.
In the body of the Web Part, type <h1>Hello World</h1>.
Right-click the Portal folder, point to Add on the shortcut menu, and then click New Folder. This folder stores resources used for Part.htm.
Right-click the Folder1 folder, and then click Rename on the shortcut menu.
Rename Folder1 to Part_Files.
You also can do this by changing the Name property of Folder1 to Part_Files.
Right-click Part_Files, point to Add on the shortcut menu, and then click Existing Item.
Browse to the location that contains the image resource that you want your Web Part to display (for example, c:\Images\Logo.gif).
You must change the filter Files of type: to All Files (*.*) to see the resources.
Select the image, and then click Open.

In the code editor for Part.htm, type <img src="/books/2/912/1/html/2/_WPR_\Logo.gif">.

Your code should look like this:

 <HTML><BODY> <!— Do not edit anything above this comment —> <h1>Hello World</h1> <img src="/books/2/912/1/html/2/_WPR_\Logo.gif"> <!— Do not edit anything below this comment —> </BODY></HTML>

In the Solution Explorer, click Part.htm.
In the Properties Window, scroll down to the Title property, and change it from Part to Hello World HTM Part.
In the Properties Window, find the Zone property, and from the drop-down list, change it from Body to Header.
Click Save All, or select Save All from the File menu.

You can use this procedure to add resources of other types. You can preview the dashboard using your Web browser.

Saving Office XP Documents as Web Parts

Office XP provides an easy way to create custom Web Parts for your workspace. You can create a Web Part by saving a document as a Web page into a SharePoint Portal Server workspace folder.

To save an Office XP document as a Web Part:

After you finish entering content in your Office XP document, on the File menu, click Save As Web Page.
Type the address of the workspace, including the Portal folder and a name for your Web Part:
http://server_name/workspace_name/Portal/Web_Part_name.htm
Click Save.
In the Web File Properties form, enter a name, a brief description, and a zone for where you want your Web Part to display.
Click OK.
Close the document.
Refresh the workspace view by clicking the Refresh button in the Solution Explorer to display the new Web Part as part of the workspace. You can now double-click the Web Part and edit its contents from within the Office Developer environment.

Creating Subdashboards

A subdashboard is a digital dashboard that is a child of a parent digital dashboard. You can add subdashboards to your dashboard site to organize the content that you want to display using different levels and sections. You can merge subdashboards and any related dashboards into a single navigation bar by setting the MergeSubDashboards property to True. The navigation bar appears under the title bar of the subdashboard. SharePoint Portal Server optimizes the format of the navigation bar to handle a single root dashboard with one level of child dashboards.

To add subdashboards to your workspace:

In the Solution Explorer, click the Portal folder or a subdashboard (depending on where you want the subdashboard).
Right-click, point to Add, and then click New Subdashboard.

After creating a subdashboard, you can specify the dashboard properties and add Web Parts to it as you would with any other dashboard.

Exporting and Importing Web Parts

SharePoint Portal Server is considered a schema-capable data source. You can export and import Web Parts from SharePoint Portal Server to different data sources such as a computer running Microsoft Exchange 2000 computer or a computer with a Microsoft SQL Server^™ 2000 dashboard. For more information about exporting Web Parts to different data sources, see Chapter 23, Deploying Digital Dashboards to Multiple Stores.

When you save a Web Part as XML, Office Developer describes the Web Part in XML format. This stores Web Parts and dashboards independent of the schema-capable data source. XML is a universal format for representing Web Parts and dashboards. It enables the transfer of definitions between different storage platforms. Using this format, you can store definitions in the file system or exchange them among applications. After you click Save, Office Developer saves your Web Part and its properties as an XML document with a DWP extension (.dwp). Office Developer also saves any resources associated with the Web Part to a folder you specify as part of the Save As DWP command. The following steps describe how to export the Web Part that you created in the earlier example.

To export a Web Part from your workspace:

In the Solution Explorer, click the Part.htm Web Part.
On the File menu, click Save Copy of Part.HTM As.
In the drop-down list, change the Save as type to DWP file (*.dwp).
Enter a file name for your Web Part (for example, Part.dwp).
Set the Save in location to a path on your local file system (for example, C:\DWPFiles).
Click Save.

When in XML format, a Web Part can be exchanged outside operating systems that manage Web Distributed Authoring and Versioning (WebDAV) properties. Office Developer saves these files in *.dwp format, so there is a common way of representing Web Parts saved as an XML document. When you receive a Web Part as a *.dwp file, you can easily import it into a dashboard. You can import the Web Part to a digital dashboard on a computer running Exchange 2000, SQL Server 2000, or another computer running SharePoint Portal Server. In addition, Office XP Developer provides a catalog of Web Parts. To import a Web Part from this catalog, perform the following steps.

To import a Web Part into your workspace:

In the Solution Explorer, select the Portal folder.
Right-click the Portal folder, point to Add, and then click Existing Item.
Click the Web Links.dwp.
Click Open.

This adds the Web Links.VBS Web Part to the workspace. Notice that importing the Web Links.dwp added a Web Links.VBS Web Part and a Web Links_Files folder to the workspace. The Web Links_Files folder contains the resources for the Web Links Web Part.

Previewing Your Dashboard

You can preview your dashboard at any time by using your Web browser.

To preview a dashboard:

In the Solution Explorer, click the Portal folder.
Right-click the Portal folder, and then click View in Browser on the shortcut menu.