How to embed a clickable Visio diagram in a SharePoint site

By special request, here is a quick instruction on how to embed a clickable diagram on a SharePoint site. It’s applicable to SPS 2003, WSS and MOSS 2007.

For the tutorial, we will create a simple flow diagram with 3 phases. Phase 2 consists of three processes. We want to be able to zoom in on these processes.

Step 1. Create a diagram in Visio.

1. Start a new drawing (File > New).
2. Create a the flow diagram as shown below.
   
3. Insert a new page (Insert > New Page).
4. On this new page, create a second flow diagram and a text object labeled ‘Return’, as shown below.
   

Step 2. Define hyperlinks in the diagram

1. On page 1, select the box ‘Phase 2’.
2. In the menu Insert, choose Hyperlinks.
3. On the line Sub Address, click Browse.
4. Select Page-2 and confirm with OK.
   
5. Then again confirm with OK.
6. To present ‘Phase 2’ as a hyperlink, change its text color to blue.

In the same way, create a hyperlink back for the text ‘Return’ on page 2.

Step 3. Export the diagram to HTML

1. In the File menu, choose ‘Save as Web Page’.
   Choose a name and a location, and save the file.
   If all went well, you now have a clickable Visio diagram as a web page. The web page consists of an html-file and a folder of the same name.
2. Test the webpage: click on ‘Phase 2′, and when page 2 opens, click on ‘Return’.

Step 4. Upload the diagram to SharePoint

We will upload our new web page to a document library. But since the web page includes a folder with dozens of files, it’s best to upload it in the Explorer view.

1. On your SharePoint site (or area), open its default Document Library.
2. Open the Explorer View.
3. Drag the HTML file and folder (from step 3) to the document library.
   
4. Return to the default view and open the just uploaded HTML file to test.
5. Copy the web page’s URL to the clipboard.

5. Embed the diagram to your site or area

For SharePoint 2003:

1. Return to the SharePoint site (or area) where you uploaded the web page, and click ‘Edit Page’ in the Actions menu.
2. Click ‘Modify Shared Page’ in the upper right corner.
3. Then choose ‘Add Web Parts’ > ‘Browse’.

For MOSS 2007:

1. Return to the SharePoint site (or area) where you uploaded the web page, and click ‘Site Actions’ the upper right corner.
2. Choose ‘Edit Page’.
3. Then choose ‘Add a Web Part’.
4. In the Web Part List, find the ‘Page Viewer Web Part’ and drag it to one of the page zones.
5. On the Page Viewer Web Part, click on ‘open the tool pane’.
   
6. Paste the URL from the clipboard to the Link box in the tool pane. Confirm with ‘OK’.
7. Return to ‘View Page’ mode and test the web part.
   

Voila!

Tags: interactieontwerp, SharePoint

This entry was posted on Tuesday, November 7th, 2006 at 11:47 pm and is filed under Intranet / portal. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.