Home > Articles > Web Development > Content Management Systems

  • Print
  • + Share This
This chapter is from the book

Creating New Web Parts

Now let's look at how to use existing HTML code to create a new Web part for your dashboard. You don't really need to be a programmer to do this, but you will need to know a few basics about HTML and XML if you're going to get into this on a regular basis. One of the main rules of thumb is that you should first try to find existing code before you attempt to write your own. Because I assume you're not a programmer, I'll demonstrate some nifty ideas to help you customize your portal.


There are four types of Web parts: HTML, XML, VBScript, and JavaScript. As their names imply, each part can host different types of content. For instance, for pure HTML content, you use the advanced properties to configure the Web part to display HTML-formatted information. VBScript and JScript are excellent languages for passing information between Web parts on a dashboard. XML Web parts are the most versatile type because you can embed HTML code and script-based content inside XML code. You can find more information on this topic in the Digital Dashboard Resource Kit.

Adding a Google Search Web Part1

Many users use the Internet to conduct research. Some of the larger search engines, such as Google and AltaVista, are in regular use by users on your network. You'll need to check with Google regarding permission issues about the following demonstration, but this would be a great Web part addition to most dashboards.

First, navigate to the Google home page at http://www.google.com. Use your mouse to highlight the home page, right-click, and select Copy in the context menu. Then open FrontPage, create a new file, and navigate to the Normal tab. Right-click anywhere inside this tab, and select Paste from the context menu. The Google page should appear.

Now, this is where it gets to be fun. Delete everything on the page except the Google graphic, the search part, and the Google Search button. Then go to the HTML page, and copy all the code to the Clipboard.

Go back to SPS, and create a new Web part by clicking the Contents link and selecting the link to create a new Web part. Name the part Google Search Web Part, and choose to have it appear in the top banner. Then, if you want the search results to appear in a different window, be sure to add the target command when specifying the source for the Web part. Here is the complete set of code for this Web part:


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>


<center><img alt="Google" src="http://www.google.com/images/
 	title_homepage4.gif" width="205" height="75"><br>
<form name="f" action="http://www.google.com/search" method="get" 
 <table cellSpacing="0" cellPadding="0">
   <tr vAlign="center" align="middle">
    <td width="75">&nbsp;</td>
    <td align="middle"><input maxLength="256" size="55" name="q"
     <input type="submit" value="Google Search" name="btnG"></td>
    <td vAlign="top" noWrap align="left"><font face="arial,sans-serif" 



Figure 3–15 illustrates what this Web part looks like if it is placed in the top zone of the Web page. Like any other Web part, it can be moved to another part of the dashboard to meet your users' needs, or it can be set up to start minimized instead of maximized, as illustrated here. In addition, you can place the Web part in a public gallery from which users can pull the part into their own personalized dashboards. When working with proprietary names like this on your dashboard, it is best to secure written permission.

Figure 3-15Figure 3–15 Google Web part on Home dashboard

Adding Web Parts from the Microsoft Gallery

Web parts can be imported from any source. Microsoft has a Web parts gallery that can be accessed at http://www.microsoft.com/sharepoint/downloads/webparts/default.asp. On this site, you'll find a host of Web parts developed by third-party vendors and many that were developed by Microsoft, such as MSNBC Weather. Remember that you must have configured the ServerXMLHTTP object's proxy settings to import Web parts from the Internet. To learn how to configure these settings, please see Chapter 4.

In the Content link from a dashboard, you'll also find a link to a smaller Web Part Gallery, and that link automatically connects to a smaller list of Microsoft Web parts that can be downloaded quickly into your portal. This list of Web parts is represented in the larger Web parts link mentioned in the preceding paragraph.

To add a Web part from the Microsoft gallery, click the Contents link, and then click the Microsoft Web Part Gallery link. This will take you to a Web parts gallery location on Microsoft's Web site. Select the Web parts you want to use, agree to the licensing agreement, and then let them download and install. This happens automatically. Then click Save, and bing-badda-boom, the Web parts are installed into your portal.

Table 3–1 lists the free Web parts that are available for download from Microsoft's site. All these Web parts are found in the Default Web Part Gallery. You might find other locations that offer Web parts as well.

Table 3–1 Free Web parts from Microsoft's Web site

Web Part


Content Viewer

Used to view a file, folder, or Web page within a Web part on the DD

Date Header

Displays current date at the top of your portal Web page

Microsoft Office Spreadsheet

Excel spreadsheet in a Web part*

Outlook Calendar

Used to view personal calendar in the mailbox*

Outlook Contacts

Used to view personal contacts in your mailbox*

Outlook Messages

Used to view personal e-mail*

Outlook Notes

Used to manage personal notes*

Outlook Tasks

Used to manage your personal to-do list*

Simple HTML Viewer

Simple HTML editor

Web Links

Used to create and manage a custom list of links

MSN Encarta Reference

Used to search the Encarta reference encyclopedia or dictionary

MSN MoneyCentral Stock Ticker

Used to view stock information and financial headlines

MSN Search

Used to search the Web

MSN MoneyCentral Search

Used to search MSN MoneyCentral Search for news and information

MSN MoneyCentral Stock Quotes

Used to look up stock quotes

MSNBC Business News

Used to view the latest business news headlines

MSNBC Stock News

Used to view stock headlines about your personal list of stocks

MSNBC Stock Quote List

Used to view a customized list of stock quotes in one Web part

MSNBC Weather

Used to view your local weather

Most of the other Web parts at http://www.microsoft.com/sharepoint/downloads/webparts/default.asp will require you to do one or more of the following: register with the Web part owner, pay for the Web part, or copy HTML code to your server and finish creating the Web part yourself. Many Web parts are proprietary to Microsoft's own product, and thus the Web part is not useful to you unless you're running Microsoft's application.

Creating a Personal Contacts Dashboard

This section demonstrates how to create a dashboard that can appear in either the default dashboard site or a personal dashboard that is dedicated to holding each user's contacts database. Users could also use these instructions to create a Contacts dashboard inside their personal dashboard. Such a dashboard might have its own set of subdashboards, each one dedicated to a certain type of contact, such as customers, vendors, professional contacts, or employees. By the way, you'll need to have installed Office XP Professional and Internet Explorer 5.0 or later before you can create a Contacts dashboard.

The first step is to navigate to the Home dashboard and create a subdashboard as described earlier in this chapter. A sample name for this dashboard might be "My Contacts." Next, import the Contact Web part from Microsoft's Web Part Gallery and configure its advanced settings to force the Web part to run maximized in the center banner.

Once the Web part is saved, the first time you connect to the dashboard, the Office XP Outlook client installation wizard will start asking whether you want to connect to an Exchange Server for e-mail. Click No and then click Finish. Soon, you'll be connected to the Contacts Web part on the dashboard. Note that I'm assuming here that you already have an Outlook profile created. If not, then select Yes in the wizard and connect to your exchange server.

This gives you a subdashboard whose contact information is personalized to each user based on her logon information. This configuration gives her her own Contacts list from her personal mailbox on the Exchange 2000 Server. What I've described here is not a company-wide contacts list that can be shared by all users in the organization. That's described next.

Creating Outlook Functionality in a Default Company-Wide Dashboard for Each User

To expand on the previous discussion, it might be desirable to have your users use the dashboard for their common Outlook tasks instead of opening Outlook itself. For instance, the following Outlook Web parts are ready for download from Microsoft's Web Part Gallery:

  • Tasks
  • Journal
  • Messages
  • Contacts
  • Calendar

The Messages Web part includes inbox, outbox, drafts, and sent items functionality. We are accustomed to seeing these functions as separate folders in the Outlook client, but all of them are presented in the same Web part for the dashboard. The Calendar Web part includes day, week, and month views. By default, all these Web parts are generated with the setting that allows the user to minimize the Web part if necessary. Figure 3–16 illustrates these Web parts in a customized Outlook Tools dashboard.

Figure 3-16Figure 3–16 Outlook Web parts in a single dashboard with the Notes and Tasks Web parts minimized


If you want to create a link on the Home dashboard that invokes the user's local Outlook program outside a Web part or the dashboard, use the following: for Outlook XP, outlook://inbox, and for Office 2000, outlook:inbox. For quick invocation of the Outlook client from within the portal, you could place such a link in the Quick Links Web part.

You can name the dashboard "My Mailbox" or "My Outlook" or some other name that your users will easily recognize as the location where they can find and perform many of their mailbox functions.

Now, suppose you want to place a company-wide Contacts folder or company-wide Calendar folder on your portal for overall contact management or scheduling information. How do you do this? Really, it's simpler than you think.

First, open the browser on your SharePoint Portal Server and enter the following URL:


Then create a new folder by right-clicking the Applications folder, selecting New Folder, and then configuring the type of folder you want to create. If it's a Calendar folder, select Appointment Items. If it's a Contact folder, select Contacts. Click OK and ensure that the folder has been created successfully. Next, right-click the new folder and select Open in New. Then copy the URL from the address bar of the new window. Create a new Web part, and then paste the URL into the Get Content from the Following Link property. Choose Isolate, and make any other configuration changes you desire. Save it, and there you go. You'll now have a Web part that displays overall company contacts or schedules that are hosted within SharePoint Portal Server.

But suppose you don't want to create a new folder because you already have this information sitting in a public folder in Exchange. How do you get that same public folder to appear in a Web part? Following is the code2 to help you do that.

ASP code to query WSS with ADO:

<h3>Retrieving contact details using ADO</h3>
set rsContacts = Server.CreateObject("ADODB.Recordset")
set conn = server.CreateObject("ADODB.Connection")
sConnection = "Provider=Microsoft Exchange OLE DB Provider;Data 
Source=http://pctim/public/public contacts" conn.open sConnection 
sQuery = "SELECT ""urn:schemas:contacts:fileas"", " sQuery = sQuery + 
sQuery = sQuery + "FROM scope('shallow traversal of 
  ""http://pctim/public/public contacts""')" sQuery = sQuery + " ORDER 
BY ""urn:schemas:contacts:fileas""" rsContacts.Source = sQuery
set rsContacts.ActiveConnection = conn
response.write "<table border=1>"
for iCount = 1 to 10
Response.write "<tr><td>" + rsContacts.Fields(0) + "</td>"
Response.write "<td>" + rsContacts.Fields(1) + "</td></tr>"
response.write "</table>"

ASP code using WebDAV:

<h3>Retrieving contact details using WebDAV</h3>
set senddoc = createobject("MSXML2.DOMDocument")
set responsedoc = createobject("MSXML2.DOMDocument")
strURL = "http://pctim/public/public contacts/"
Set pi = senddoc.createProcessingInstruction("xml", "version=""1.0""")
senddoc.appendChild pi Set node = senddoc.createNode(1, 
"searchrequest", "DAV:") Set senddoc.documentElement = node Set node2 
= senddoc.createNode(1, "sql", "DAV:") node.appendChild node2
Set query = 
  emas.microsoft.com/mapi/email1emailaddress"" from """ & strURL & """ ")
node2.appendChild query
Set req = CreateObject("MSXML2.XMLHTTP")
req.open "SEARCH", strURL, False, "yourdomain\yourusername",
req.setrequestheader "Translate", "f"
req.setrequestheader "Content-Type", "text/xml" req.setrequestheader 
"Depth", "0" req.send senddoc
set responsedoc = req.responseXML
response.write "<table border=1>"
Set objNodeList = responsedoc.getElementsByTagName("a:prop")
For i = 0 To (objNodeList.length - 1)
Set objPropNodes = objNodeList.item(i).childNodes
response.write "<tr>"
For j = 0 To (objPropNodes.length - 1)
Set objNode = objPropNodes.item(j)
Response.Write ("<td>" + objPropNodes.item(j).text + "</td>")
response.write "</tr>"
response.write "</table>"

Using Office XP in the Portal

Microsoft Office documents can be saved as individual documents or as Web parts and then published on the dashboard. This means that documents, such as memos, budgets, vacation schedules, project schedules, and so on, can be published immediately on the dashboard. Depending on how you publish the information, it also can be dynamically updated in the portal as the source document is updated.

I'll demonstrate how to save an Excel spreadsheet as a company news item that outlines a fictitious budget for the Networknowledge company. You open Excel, create your budget, and save it as a Web page (Figure 3–17). In this example, I've chosen to publish the file, and that invokes the Publish as Web Page dialog box in Excel, as illustrated in Figure 3–18. When you select AutoRepublish Every Time, Excel updates your Web part each time the original file is saved. After making this selection, click Publish.

Figure 3-17Figure 3–17 Saving the Networknowledge budget as a Web page. Notice that I'm using the client-side Web folder option to specify where I'd like this document to be saved.

Figure 3-18Figure 3–18 Publish as Web Page dialog box in Excel

After you click Publish a second time, the document's profile appears (Figure 3–19. After you configure the document's profile, it is saved to the News folder in the workspace and appears as a news item in the dashboard (Figure 3–20).

Figure 3-19Figure 3–19 Configuring the document's profile

Figure 3-20Figure 3–20 Networknowledge budget document appearing as a news item in the NK workspace

Now, not only can you save documents directly to the workspace using Office XP, but you can also create Web parts whose functionality comprises an Office XP document. To use Office XP to create a Web part, you must save the document to a personal dashboard. To demonstrate this, let's create a spreadsheet called "Current Sales to Date" that will appear, not as a news item, but rather as a Web part on the Home dashboard. Such a Web part could be used to keep users up-to-date on inportant information.

The first step is to create the Web part on your personal dashboard and then import it to the Home dashboard. In my example, I'll create a new personal dashboard, which I'll name Bill (that's creative, eh? <g>). Then you save an Excel document to the dashboard as a Web part.

When you save the document to your personal dashboard as a Web page, you're presented with the Web File Properties dialog box asking you to create a new Web part on your dashboard. I'll name the sample new Web part "Current Sales Figures." Then you click Save (Figure 3–21). Now you have a new Web part that can be imported to the Home dashboard for everyone's viewing pleasure.

Figure 3-21Figure 3–21 Web File Properties dialog box

Note that you do not need to save the file as a Web part. Interestingly, if you save it as a good ol' Excel spreadsheet, the Web part will be created, but when it attempts to load in the user's browser, the user will be asked if he would like to open the file from its present location or save the file locally. Hence, if you want to create a Web part composed of an Office document and want to make that document available for download from within the Web part, then don't save the document as a Web page. Instead, save it as a native document. Then, when the Web part is built in the user's browser, he will be given the choice to either view or download the document.

  • + Share This
  • 🔖 Save To Your Account