Creating Smart Tags in Web Parts

  • 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 and Scott Phibbs
Microsoft Corporation

Created: April 2001
Revised: July 2001

Applies to:
     Microsoft® Office XP Developer

Summary: Microsoft Office XP installs a helper behavior that enables Smart Tag support in Internet Explorer. The Smart Tag feature in Internet Explorer is present in a slightly different way than in Microsoft Word and Microsoft Excel. This document explains how to implement this technology within Web Parts of a Digital Dashboard. (6 printed pages)

Contents

Introduction
Creating a Dashboard Project
Creating HTML Web Parts with Smart Tags
Saving Excel or Word Documents as Web Parts Containing Smart Tags

Introduction

There are two ways to implement Smart Tags within Web Parts. The first way is to create a Microsoft® Word or Microsoft Excel document that contains Smart Tags and save the document as a Web Part to a Microsoft SharePoint™ Portal Server or Microsoft Exchange 2000 SP1 Server dashboard. The other way is to add specific custom HTML tags to an HTML Web Part created in Microsoft Office XP Developer. This white paper will discuss these two methods of implementation using the sample SimpleTerm Smart Tag discussed in the Office XP Developer Smart Tag SDK.

Prerequisites

To follow along with this walkthrough, you must have Office XP Developer, access to a server running SharePoint Portal Server or Exchange 2000 SP1, and the appropriate permissions on the server.

Creating a Digital Dashboard requires the following components:

  • **Server
    **SharePoint Portal Server or Exchange 2000 SP1 Server as the back end for the application.
  • ****Development too**l
    **Office XP Developer as the tool for creating the dashboard. This tool can either reside on a client computer with access to the server or on the server itself. The Dashboard Development Tools and Smart Tag SDK components must be installed.
  • **Smart Tags Support
    **Smart Tags installed on the development and client machines. Smart Tags support is included as part of the Office XP install.
  • **Smart Tag
    **SimpleTerm DLL registered using the following steps:

    • Run the SimpleTerm.reg file.

    • Register the SimpleTerm.dll using regsrv32.exe.

      **Note   **These files are installed by default in the directory \Program Files\Microsoft Office Developer\SDK\Simple VB Sample.

Creating a Dashboard Project

A Digital Dashboard is an Active Server Page (ASP) that references one or more Web Parts. Web Parts are self-contained modules of Web content (XML, HTML, or script).

You can use the Office XP Developer environment to create Digital Dashboard projects. When you do, Office Developer creates a Digital Dashboard project and adds a default HTML Web Part to the project.

To create a dashboard project:

  1. From the Start menu, point to Programs, point to Microsoft Office XP Developer, and then click Microsoft Development Environment.
  2. On the File menu, point to New, and then click Project. The New Project dialog box is displayed.
  3. Select Office Developer Projects.
  4. Under Templates, select the Dashboard Project icon.
  5. In the Location box, enter http://<ServerName>/Public.
  6. In the Name box, enter a name for your dashboard project.
  7. Click OK.

These steps create a new project in your application and populate it with the necessary files. In this case, all the files required by the Digital Dashboard are copied onto the server and a <ProjectName>.ddp project file is added. The next step is to create a Web Part.

Creating HTML Web Parts with Smart Tags

Now that you have created a new dashboard project and have it open in the Office XP Development environment, you will add custom HTML tags to the default HTM Web Part to enable Smart Tag support.

  1. In the Solution Explorer, double-click the Part.HTM Web Part that is added automatically to your dashboard project to open it in the Code Editor.

  2. In the Code Editor, you should see default code that looks like this:

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

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

  3. Enter this code between the two comments in the Code Editor:

    <HTML xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:st1="schemas-fourth-com/fourthcoffee"
xmlns="http://www.w3.org/TR/REC-html40">

    This declares the Office namespace, the Smart Tags namespace, and the Worldwide Web Consortium (W3C) HTML 4.0 namespace.

    Note   Each Smart Tag can have its own namespace. Smart Tag namespaces are declared at the top of the HTML document.

  4. Declare the Smart Tag type element by entering this code following the Smart Tags namespace:

    <HEAD>
<o:SmartTagType name="coffeeshop" 
namespaceuri="urn:schemas:place" downloadurl="http://www.fourthcoffee.com/download.asp">
</o:smarttagtype>

    The SmartTagType element belongs to the Office namespace, as can be inferred from o:, which is the shorthand alias for the Office namespace.

    There are three attributes for this element:

    • **name
      **The name of the Smart Tag type. This attribute is required.
    • **namespaceuri
      **The namespace URI for the Smart Tag type. This attribute is required.
    • **downloadurl
      **A URL useful for downloading a Smart Tags package. This attribute is optional.

    The o:SmartTagType element is declared in the <HEAD> of an HTML document.

  5. Insert the following object element code after the Smart Tag type declaration to enable Internet Explorer to render Smart Tags:

    <object classid="clsid:38481807-CA0E-42D2-BF39-B33AF135CC4D" id=ieooui>
</object>

  6. Enter the following code after the object element code, and add a closing </HEAD> tag to include the behavior attribute within the style declaration:

    <style>
st1\:*{behavior:url(#ieooui) }
</style>
</HEAD>

  7. Enter this code after the </HEAD> tag:

    <BODY>
I love drinking <st1:flavor>Latte</st1:flavor>!
</BODY>
</HTML>

    This is the body of the HTML document, which contains the paragraph you want displayed with Smart Tags. Portions of text to be Smart Tag enabled should be contained in their respective Smart Tag type namespaces.

    The complete Part.HTM Web Part source code should now look like this:

    <HTML><BODY>
<!-- Do not edit anything above this comment -->
<HTML xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:st1="schemas-fourth-com/fourthcoffee"
xmlns="http://www.w3.org/TR/REC-html40">
<HEAD>
<o:SmartTagType name="coffeeshop" 
namespaceuri="urn:schemas:place" 
      downloadurl="http://www.fourthcoffee.com/download.asp">
</o:smarttagtype>
<object classid="clsid:38481807-CA0E-42D2-BF39-B33AF135CC4D" id=ieooui>
</object>
<style>
st1\:*{behavior:url(#ieooui) }
</style>
</HEAD>
<BODY>
I love drinking <st1:flavor>Latte</st1:flavor>!
</BODY>
</HTML>
<!-- Do not edit anything below this comment -->
</BODY></HTML>

  8. Save all the changes that you made to the Web Part.

  9. Preview your dashboard by right-clicking the Project folder (named Dashboard by default) in the Solution Explorer and selecting the View in Browser command from the shortcut menu.

After following the previous steps, you can hover over the text that has been Smart Tag enabled to display the Smart Tag actions.

Saving Excel or Word Documents as Web Parts Containing Smart Tags

A fast and easy way to create Web Parts that contain Smart Tags is by using Office XP. You can save your Office XP documents that contain Smart Tags as Web pages to a dashboard folder that lives on an Exchange 2000 SP1 server or SharePoint Portal Server. This will display a Web Part meta-data input form that prompts you for the Web Part name, description, and zone.

To save an Office XP document as a Web Part:

  1. Open an Office XP document and enter content, including recognized Smart Tags.

    Note   If Smart Tags are not being recognized, you might have to recheck the document for Smart Tags. On the Tools menu, click AutoCorrect Options, and then click the Smart Tags tab. Click Recheck Document.

  2. Select Save as Web Page from the File menu.

  3. Enter the complete HTTP address of the dashboard, including a name for your Web Part, in the File Name box, for example, http://<ServerName>/Public/<DashboardName>/SmartTagsPart.HTM.

  4. Click Save. The Web File Properties dialog box will appear.

  5. In the Web File Properties dialog box, enter in a name, a description, and a zone for where you want your Web Part to be displayed.

  6. Click OK.

  7. Close the Office XP document.

  8. In Office XP Developer, refresh the dashboard view by clicking the Refresh button in the Solution Explorer to display the new Office XP Web Part. Now you can double-click the Office XP Web Part and edit its contents from within the Office XP Developer development environment.

  9. Preview your dashboard by right-clicking the dashboard folder in the Solution Explorer and selecting the View in Browser command from the shortcut menu.

The previous steps show how to save an Office XP document that contains a Smart Tag as a Web Part to a Digital Dashboard. Previewing the dashboard in Internet Explorer and hovering over the Smart Tag enabled word within the Web Part will display the Smart Tag actions, thus showing that the Smart Tag has been retained within the Web Part.

For more information about Digital Dashboards and Web Parts, see the Microsoft Office XP Developer online Help.