Customizing the SharePoint Portal Server with Office XP Developer

  • Article

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

 

Reza Chitsaz
Microsoft Corporation

April 2001

Applies to:
   Microsoft® Office XP Developer

Summary: This article describes how the Microsoft Office XP Developer development environment can be used to customize and build on the SharePoint Portal Server workspace easily. Tasks, such as editing content, adding resources, adding, importing, and exporting Web Parts, adding sub-dashboards, previewing dashboards, and saving Office XP documents as Web Parts, are all outlined in this article. In addition, it discusses good Web Parts coding practices to write reusable Web Parts and also the Web Part XML interchange format that makes it possible for you to interchange Web Parts from one store to another. (6 printed pages)

Contents

Introduction
Connecting to a SharePoint Portal Server Workspace
Creating Web Parts
Adding Content to Web Parts
Creating Sub Dashboards
Exporting and Importing Web Parts
Saving Office XP Documents as Web Parts

Introduction

With the architecture of the Microsoft® SharePoint™ Portal Server being built on Digital Dashboard technology and with Microsoft® Office XP Developer being the tool for building Web Parts, developers must have a way to open the SharePoint Portal Server and edit/add content to it using the Office XP Developer development environment. Although dashboard applications have customization pages that make it possible for you to create simple Web Parts, developers will want to use the rich editing tools in Office XP Developer to build more complex Web Parts.

Connecting to a SharePoint Portal Server Workspace

Before you can start using the Office XP Developer development environment for building Web Parts in the SharePoint Portal Server workspace, you must open the workspace in Office XP Developer. Connecting to or opening the workspace will display the contents of the workspace in the development environment. The dashboard, its Web Parts and any resources, and any sub dashboards will be displayed hierarchically in the Solution Explorer. All dashboard, Web Part, and sub dashboard properties will be displayed in the Properties grid.

To open the SharePoint Portal Server workspace for the first time

  1. From the Start menu, point to Programs, then Microsoft Office XP Developer, and then select Microsoft Development Environment.

  2. From the File menu, point to New, and then select Project.

  3. The New Project dialog box is displayed. Select Office Developer Projects.

  4. In the Location text box, enter http://<SharePointPortalServername>/<workspacename>.

  5. In the Name text box, enter Portal.

    Note

       

    You must name the project Portal; otherwise, you cannot open the SharePoint Portal Server portal.

  6. In the Templates window, select the Dashboard Project icon.

  7. Click OK.

This will add a Portal.ddp project file to the Portal folder. In addition, it will add a solution file to your client machine in My Documents\Office Developer Projects\PortalX\Portal.sln.

Now that you have created a project and solution file for your workspace, you can open it in the Office XP Developer development environment at any time by following these steps:

To open the SharePoint Portal Server workspace

  1. From the Start menu, point to Programs, then Microsoft Office XP Developer, and then select Microsoft Development Environment.
  2. From the File menu, point to Open, and then select Project.
  3. Select the Portal project you want to open from the Open Project dialog box (for example, Portal.sln).

If you do not have the solution file on your computer, you still can open an existing dashboard project:

  1. Create a Web folder to your workspace folder (for example, http://<servername>/<workspacename>/Portal).
  2. Double-click the Portal.ddp file in the Portal folder.

Creating Web Parts

Now you have opened the SharePoint Portal Server workspace in the Office XP Developer environment so you can begin customizing the portal by adding new Web Parts.

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

To add a new Web Part to a dashboard

  1. In the Solution Explorer, select the dashboard project.
  2. Right-click the Portal folder, and, from the shortcut menu, select Add, and then select New Item.
  3. Select a part type, and click Open. For this example, select an HTML part type.

When you have added a Web Part, you can see there is a standard set of properties that are associated with the Web Part. To view the properties of a Web Part in the Properties grid, select the Web Part in the Solution Explorer. If the Properties grid is not visible, you can make it visible either by clicking the properties icon in the Solution Explorer or by selecting Properties Window from the View menu.

Adding Content to Web Parts

Now you can add some content to your HTML Web Part. The following are two fundamental Web Part coding practices:

  • To associate a resources folder with a Web Part you must follow the _Files naming convention. For example, if you name your Web Part myWebPart.HTM, then the associated resources folder for this Web Part should be labeled myWebPart_Files.
  • You should use the _WPR_ (Web Part Resource) token when referencing the resources folder of a Web Part. For example, if you want to render an image that you have imported into the resources folder of a Web Part, use the following naming convention <img src= "_WPR_\myImage.jpg">.

Following the previous Web Part naming conventions make it possible for you to write truly reusable and functional Web Parts.

Example Web Part

In this example, you will add some content to the HTML Web Part that was added in the previous procedure (see To add a new Web Part to a dashboard). You will edit some of this Web Part's properties and have it render an image.

  1. Double click on the Part.HTM Web Part in the Solution Explorer to open it in the code editor.

  2. Type in the body of the Web Part <h1>Hello World</h1>.

  3. Right-click the Portal folder, point to Add on the Shortcut menu, and then select New Folder. You will use this folder to store resources used for Part.HTM.

  4. Right-click the Folder1 folder, and select Rename from the Shortcut menu.

  5. Rename Folder1 to Part_Files. You also can do this by changing the Name property of Folder1 to Part_Files.

  6. Right-click Part_Files, point to Add on the Shortcut menu, and then select Existing Item.

  7. Browse to the location that contains the image resource that you want your Web Part to display (for example, C:\Images\Logo.gif).

    **Note   **You must change the filter Files of type: to All Files (*.*) to be able to see the resources.

  8. Select the image, and click Open.

  9. In the code editor for Part.HTM, type in <img src="_WPR_\Logo.gif">.

    Your code should look like this:

    <HTML><BODY>
<!-- Do not edit anything above this comment -->

<h1>Hello World</h1>
<img src="_WPR_\Logo.gif">

<!-- Do not edit anything below this comment -->
</BODY></HTML>

  10. Select Part.HTM in the Solution Explorer.

  11. In the Properties grid, scroll down to the Title property, and change it from Part to Hello World HTM Part.

  12. In the Properties grid, find the Zone property, and change it from Body to Header from the drop-down list.

  13. Click the Save All button, or select Save All from the File menu.

Now that you have saved your changes, you are ready to view the contents of your workspace.

Previewing Your Workspace

You can preview your workspace by viewing it in a browser.

To preview a workspace

  1. In the Solution Explorer, select the Portal folder.
  2. Right-click the Portal folder and select View in Browser from the Shortcut menu.

Creating Sub Dashboards

Adding sub dashboards to your workspace is a great way to organize the content that you want displayed into different levels and sections.

To add sub dashboards to your workspace

  1. In the Solution Explorer, select the Portal folder or a sub dashboard (depending on where you want the sub dashboard created).
  2. Right-click and point to Add, and then select New Sub Dashboard.

Exporting and Importing Web Parts

XML is the interchange format for Web Parts. After clicking Save, your Web Part and its properties will be saved as XML with a DWP extension (.dwp). Any resources associated with the Web Part also will be saved to a folder in the destination given as part of the Save As DWP command. The following steps show how to export the Part.HTM that you created in the example section earlier:

To export a Web Part from your workspace

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

When in XML format, a Web Part can be exchanged outside operating systems that manage WebDAV properties. These files are saved in *.dwp format, so there is a common way of representing XML format Web Parts. When you receive a Web Part as *.dwp, you can import it into a dashboard easily (regardless of what store your digital dashboard is running on—Microsoft® SQL Server™ 2000, SharePoint Portal Server, or Microsoft® Exchange 2000 Server). In addition, there is a catalog of Web Parts that ships with Microsoft Office XP Developer. The following steps import one of these .dwp files into your workspace:

To import a Web Part into your workspace

  1. In the Solution Explorer, select the Portal folder.
  2. Right-click the Portal folder, point to Add, and then select Existing Item.
  3. Select the Web Links.dwp.
  4. 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.

Saving Office XP Documents as Web Parts

A fast and easy way to create Web Parts is by using Microsoft Office XP. You can save your Office XP documents as Web pages out to a dashboard folder. This will display a Web Part metadata input form that prompts you for the Web Part name, description, and zone.

To save an Office XP document as a Web Part

  1. After you have finished entering content into your Office XP document, select Save As Web Page from the File menu.
  2. Enter in the HTTP address of the workspace, including the Portal folder and a name for your Web Part (for example, http://<SharePointPortalServername>/<workspacename>/Portal/Office.htm).
  3. Click Save.
  4. In the Web File Properties form, enter in a name, a description, and a zone for where you want your Web Part to be displayed.
  5. Click OK.
  6. Close the Office XP document.
  7. Refresh the workspace view by clicking the Refresh button in the Solution Explorer to display the Office XP Web Part as part of the workspace. You can now double-click the Office XP Web Part and edit its contents from right within the Office XP Developer development environment.