12/05/2010 UPDATE: The download link for the Visio viewer is no longer valid, and I'm sure that the GUID for any new viewer has changed. I'll fix this blog post when I have the chance to get all the new data together.
Summary
The Microsoft web site now offers a Visio Viewer Web Component for download. See the following URL for more information:
The purpose of this article is to show you how to use some of the FrontPage SDK functionality to add two new Web Components to FrontPage that will allow you to add the Visio Viewer to a web page.
NOTE - This example works in both FrontPage 2002 and FrontPage 2003.
More Information
STEP #1 - Locate your "Web Components" folder:
This will be in one of the following paths by default:
"C:\Program Files\Microsoft Office\OFFICE10\1033\WEBCOMP"
"C:\Program Files\Microsoft Office\OFFICE11\1033\WEBCOMP"
STEP #2 - Save the following INI file in the folder as "VISIO.INI":
[Component]
Name="Microsoft Visio"
Caption="C&hoose a component:"
Sorted=True
Type=Text
OnlyFor1033=True
[Component.Options]
Option1=Visio1
Option2=Visio2
[Visio1]
Name="Visio Viewer (With Wizard)"
Description="Insert a Visio Viewer component on your page."
URL="C:\Program Files\Microsoft Office\OFFICE11\1033\WEBCOMP\VISIO.HTM"
[Visio2]
Name="Visio Viewer (HTML Only)"
Description="Insert a Visio Viewer component on your page."
[Visio2.HTML]
HTML1=<object classid="clsid:279D6C9A-652E-4833-BEFC-312CA8887857"
HTML2=id="viewer1" width="300" height="300"
HTML3=codebase="http://download.microsoft.com/download/VisioStandard2002/vviewer/2002/W98NT42KMeXP/EN-US/vviewer.exe">
HTML4=<param name="BackColor" value="16777120">
HTML5=<param name="PageColor" value="16777215">
HTML6=<param name="GridVisible" value="1">
HTML7=<param name="PageVisible" value="1">
HTML8=<param name="HighQualityRender" value="1">
HTML9=<param name="ScrollbarsVisible" value="1">
HTML10=<param name="ToolbarVisible" value="1">
HTML11=<param name="AlertsEnabled" value="1">
HTML12=<param name="ContextMenuEnabled" value="1">
HTML13=<param name="PropertyDialogEnabled" value="1">
HTML14=<param name="SRC" value="">
HTML15=<param name="CurrentPageIndex" value="1">
HTML16=<param name="Zoom" value="-1">
HTML17=</object>
NOTE - You need to make sure that the URL parameter in the file matches your correct drive and Office version path.
STEP #3 - Save the following HTML file in the folder as "VISIO.HTM":
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Visio Viewer</title>
<style>
.button { width=80px; }
.file { width=350px; }
.text { width=40px; }
body,td
{
font-family:'MS Sans Serif',verdana,arial;
font-size:9pt;
scrollbar-face-color:#cccccc;
scrollbar-base-color:#cccccc;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
background-color:#cccccc;
color:#000000
}
</style>
<script language="JavaScript">
<!--
function insertHTML()
{
// build the HTML output
var html ='';
html += "<object classid=\"clsid:279D6C9A-652E-4833-BEFC-312CA8887857\" id=\"viewer1\" ";
html += " width=\"" + frmOptions.txtWidth.value + "\" ";
html += " height=\"" + frmOptions.txtHeight.value + "\" ";
html += " codebase=\"http://download.microsoft.com/download/VisioStandard2002/";
html += "vviewer/2002/W98NT42KMeXP/EN-US/vviewer.exe\">\n";
html += "<param name=\"BackColor\" value=\"16777120\">\n";
html += "<param name=\"PageColor\" value=\"16777215\">\n";
html += processCheckbox(frmOptions.chkGridVisible,"GridVisible");
html += processCheckbox(frmOptions.chkPageVisible,"PageVisible");
html += processCheckbox(frmOptions.chkHighQualityRender,"HighQualityRender");
html += processCheckbox(frmOptions.chkScrollbarsVisible,"ScrollbarsVisible");
html += processCheckbox(frmOptions.chkToolbarVisible,"ToolbarVisible");
html += processCheckbox(frmOptions.chkAlertsEnabled,"AlertsEnabled");
html += processCheckbox(frmOptions.chkContextMenuEnabled,"ContextMenuEnabled");
html += processCheckbox(frmOptions.chkPropertyDialogEnabled,"PropertyDialogEnabled");
html += "<param name=\"SRC\" value=\"" + frmOptions.txtVisioFile.value + "\">\n";
html += "<param name=\"CurrentPageIndex\" value=\"1\">\n";
html += "<param name=\"Zoom\" value=\"-1\">\n";
html += "</object>\n";
// preserve our options
setCookie("txtVisioFile",frmOptions.txtVisioFile.value);
setCookie("txtWidth",frmOptions.txtWidth.value);
setCookie("txtHeight",frmOptions.txtHeight.value);
setCookie("chkGridVisible",frmOptions.chkGridVisible.checked);
setCookie("chkPageVisible",frmOptions.chkPageVisible.checked);
setCookie("chkHighQualityRender",frmOptions.chkHighQualityRender.checked);
setCookie("chkScrollbarsVisible",frmOptions.chkScrollbarsVisible.checked);
setCookie("chkToolbarVisible",frmOptions.chkToolbarVisible.checked);
setCookie("chkAlertsEnabled",frmOptions.chkAlertsEnabled.checked);
setCookie("chkContextMenuEnabled",frmOptions.chkContextMenuEnabled.checked);
setCookie("chkPropertyDialogEnabled",frmOptions.chkPropertyDialogEnabled.checked);
// close the wizard
window.external.WebComponent.PreviewHTML = html
window.external.WebComponent.HTML = window.external.WebComponent.PreviewHTML;
window.external.WebComponent.Tag = "body";
window.external.Close(true);
}
function initializeForm()
{
frmOptions.txtVisioFile.value=getCookie("txtVisioFile","http://localhost/sample.vsd");
frmOptions.txtHeight.value=getCookie("txtHeight","300");
frmOptions.txtWidth.value=getCookie("txtWidth","300");
frmOptions.chkGridVisible.checked=((getCookie("chkGridVisible","true")=="true")?true:false);
frmOptions.chkPageVisible.checked=((getCookie("chkPageVisible","true")=="true")?true:false);
frmOptions.chkHighQualityRender.checked=((getCookie("chkHighQualityRender","true")=="true")?true:false);
frmOptions.chkScrollbarsVisible.checked=((getCookie("chkScrollbarsVisible","true")=="true")?true:false);
frmOptions.chkToolbarVisible.checked=((getCookie("chkToolbarVisible","true")=="true")?true:false);
frmOptions.chkAlertsEnabled.checked=((getCookie("chkAlertsEnabled","true")=="true")?true:false);
frmOptions.chkContextMenuEnabled.checked=((getCookie("chkContextMenuEnabled","true")=="true")?true:false);
frmOptions.chkPropertyDialogEnabled.checked=((getCookie("chkPropertyDialogEnabled","true")=="true")?true:false);
}
function processCheckbox(varBox,varName)
{
return("<param name=\""+varName+"\" value=\"" + ((varBox.checked == true) ? "1" : "0") + "\">\n");
}
function setCookie(strName, strValue)
{
document.cookie = strName + "=" + escape(strValue);
}
function getCookie(strName,strDefault)
{
var aryCookies = document.cookie.split("; ");
for (var i=0; i < aryCookies.length; i++)
{
var aryValues = aryCookies[i].split("=");
if (strName == aryValues[0])
{
var strValue = new String(aryValues[1]);
return ((strValue != 'undefined') ? unescape(strValue) : strDefault );
}
}
return strDefault;
}
-->
</script>
</head>
<body onload="initializeForm()">
<form name="frmOptions">
<table>
<tr>
<td colspan="5"><b>Display Options</b></td>
</tr>
<tr>
<td width="10"><input accesskey="d" type="checkbox" name="chkPageVisible" checked></td>
<td nowrap>Display the <u>d</u>rawing page</td>
<td width="20"> </td>
<td width="40"><input accesskey="h" type="text" class="text" name="txtHeight" value="300"></td>
<td nowrap><u>H</u>eight (in pixels)</td>
</tr>
<tr>
<td width="10"><input accesskey="g" type="checkbox" name="chkGridVisible" checked></td>
<td nowrap>Display the <u>g</u>rid if the drawing page is visible</td>
<td width="20"> </td>
<td width="40"><input accesskey="w" type="text" class="text" name="txtWidth" value="300"></td>
<td nowrap><u>W</u>idth (in pixels)</td>
</tr>
<tr>
<td width="10"><input accesskey="q" type="checkbox" name="chkHighQualityRender" checked></td>
<td colspan="4">Display using high-<u>q</u>uality rendering</td>
</tr>
<tr>
<td width="10"><input accesskey="t" type="checkbox" name="chkToolbarVisible" checked></td>
<td colspan="4">Display the <u>t</u>oolbar</td>
</tr>
<tr>
<td width="10"><input accesskey="s" type="checkbox" name="chkScrollbarsVisible" checked></td>
<td colspan="4">Display the <u>s</u>croll bars</td>
</tr>
</table>
<hr>
<table>
<tr>
<td colspan="2"><b>Event Processing Options</b></td>
</tr>
<tr>
<td width="10"><input accesskey="a" type="checkbox" name="chkAlertsEnabled" checked></td>
<td>Enable warning or <u>a</u>lert dialog boxes to show when an error occurs</td>
</tr>
<tr>
<td width="10"><input accesskey="c" type="checkbox" name="chkContextMenuEnabled" checked></td>
<td>Enable the <u>c</u>ontext menu to show on right-mouse events</td>
</tr>
<tr>
<td width="10"><input accesskey="p" type="checkbox" name="chkPropertyDialogEnabled" checked></td>
<td>Enable the <u>P</u>roperties and Settings dialog box to show on selection or toolbar events</td>
</tr>
</table>
<hr>
<table>
<tr>
<td nowrap>URL of <u>V</u>isio File</td>
<td><input class="file" accesskey="v" type="text" name="txtVisioFile"></td>
</tr>
</table>
<hr>
<table width="100%">
<tr>
<td align="right" nowrap>
<button class="button" accesskey="o" onclick="insertHTML();"><u>O</u>K</button>
<button class="button" accesskey="c" onclick="window.external.Close();"><u>C</u>ancel</button>
</td>
</tr>
</table>
</form>
</body>
</html>
STEP #4 - Open a new page in FrontPage
STEP #5 - Click "Insert" -> "Web Component"
STEP #6 - Select "Microsoft Visio" in the list of component types
STEP #7 - Choose to insert the HTML-only version or the the wizard-based version
NOTES:
- The HTML-only version inserts just the ActiveX control, allowing you to modify the raw HTML, but is less user-friendly when you double-click it.
- The wizard-based version is more user-friendly for inserting and modiyfing the control, but it is a web-bot and therefore does not allow you to modify the raw HTML.
- The codbase download path for the control is hard-coded; if that changes, you will need to update the INI file and HTML file accordingly.