Introduction

Microsoft Office Visio 2003 provides a feature that allows you to save diagrams to web pages.  This article builds upon this ability by introducing a way to dynamically manipulate a diagram when a web page is requested. The following step by step instructions show how this can be done by dynamically changing symbol colors within a Visio diagram.

Create and Save a Visio XML Diagram

1.      Open Visio and create a basic flow diagram. 

Right click on each shape, select format and then fill.  In the Fill Dialog, select a fill color and press OK.  The fill color must be defined in order for our example to work.  The reason for this will be explained later.

2.      Select File, SaveAs, SaveAs Type: XML Drawing (*.vdx), enter the name of your file and press Save.

Create a .NET Runtime Callable Wrapper (RCW) for Visio's COM DLL

1.      Open a Visual Studio .NET 2003 Command Prompt.

2.      Enter and run the following syntax:

Listing 1

tlbimp "VISLIB.dll"/out:"VisioDotNet.dll" /namespace:VisioDotNet/asmversion:VisioVersion

·         VISLIB.dll - The path to Visio's existing COM file.

·         VisioDotNet.dll - The path and file name for the resulting RCW file.

·         VisioDotNet - The RCW namespace.

·         VisioVersion - Visio's version number that can be obtained in Visio's About Dialog.

For example, my command line syntax looks like the following:

Listing 2

tlbimp "C:\Program Files\MicrosoftOffice\Visio11\VISLIB.dll" /out:"C:\visio\VisioDotNet.dll" 
/namespace:VisioDotNet /asmversion:11.3216.5606

Create a Dynamic Visio Web Application

1.      Open Visual Studio .NET 2003 and create a C# web application called DynamicVisio.

2.      Add a .NET reference to the VisioDotNet.dll that was created above.

3.      Create a WebForm called Dynamic.aspx. Add a WebForm Button called Upload (id=btnUpload). Add a DropDownList (id=ddlColor) with its Autopostback property set to true.  Enter the following text value pairs in the ddlColor item collection:  White, 1; Red, 2; Green, 3; Yellow, 5. Add the following HTML control: File Field (id=uploadFile) set to run at the server (runat="server"). Type the following just before the </form> tag: <iframe id="VisioOutput" src="VisioDiagram.htm" width="100%" height="600"></iframe>.

4.      Switch to the form's code view and add the following namespaces:

Listing 3

using System.IO;
using System.Xml;
using System.Text;

5.      Add the following properties to the Dynamic class which will store the Visio XML document and Visio File Name in Session where they will be accessible for future requests:

Listing 4

private XmlDocument VisioXMLDoc
{
  get
  {
    if((XmlDocument)Session["VisioXMLDoc"] == null)
       Session["VisioXMLDoc"] = newXmlDocument();
    return(XmlDocument)Session["VisioXMLDoc"];
  }
  set
  {
    Session["VisioXMLDoc"] = value;
  }
}
 
private string VisioFileNm
{
  get
  {
    returnSession["VisioFileNm"].ToString();
  }
  set
  {
    Session["VisioFileNm"] = value;
  }
}

6.      Double-click the upload button and enter the following code in the Click event handler:

Listing 5

private void btnUpload_Click(object sender,System.EventArgs e)
{
  VisioFileNm = Path.GetTempPath() +uploadFile.Value.Substring
    (uploadFile.Value.LastIndexOf(@
   "\")+1);uploadFile.PostedFile.SaveAs(VisioFileNm);
  XmlTextReader xtr = newXmlTextReader(VisioFileNm); xtr.WhitespaceHandling =
    WhitespaceHandling.All;VisioXMLDoc.Load(xtr); xtr.Close();
  ddlColor.Enabled = true;RenderVisioDiagram(null, null);
}

The above code uploads and saves a Visio diagram file in your server's temporary file directory where write permissions are not required.  Next, the Visio file's XML is read and stored in Application Cache for later use.  The ddlColor control is then enabled and the diagram displayed.

7.      Add the following code to display the Visio Diagram:

Listing 6

private void RenderVisioDiagram(object sender,System.EventArgs e)
{
  Application.Lock();
  XmlNodeList xShapes =VisioXMLDoc.GetElementsByTagName("Shape");
  foreach (XmlNode xnod in xShapes)
    ChangeShapeAttributes(xnod);
  Application.UnLock();
 
  XmlTextWriter xtw = newXmlTextWriter(VisioFileNm,
    System.Text.UTF8Encoding.UTF8);
  VisioXMLDoc.WriteTo(xtw);
  xtw.Close();
 
  VisioDotNet.Application app = newVisioDotNet.ApplicationClass();
  app.Documents.Open(VisioFileNm);
 app.Addons.get_ItemU("SaveAsWeb").Run(
    "/quiet=True /openbrowser=False /target="+ Request.PhysicalApplicationPath
    + "VisioDiagram");
  app.Quit();
}

The above code locks application cache so that only one web request can modify the Visio XML document. Each shape is then extracted from the XML document and its attributes are changed.

Once shape attributes are changed, the document is saved to a file where it can be opened by Visio and then resaved to an HTML Web page. An IFrame on the WebForm will load and display this page.

·         Note: For complete documentation on calling Visio's Run method using the "SaveAsWeb" add-on see Running Visio Save As From the CommandLine.

8.      Add the following code to change each shape's fill color:

Listing 7

public void ChangeShapeAttributes(XmlNode xnod)
{
  XmlNamedNodeMap attrs = xnod.Attributes;
  string id =attrs.GetNamedItem("ID").Value.ToString();
 
  XmlNodeList xchilds = xnod.ChildNodes;
  foreach (XmlNode node in xnod.ChildNodes)
  {
    if (node.Name == "Fill")
    {
      foreach (XmlNode fillnode innode.ChildNodes)
      {
        if (fillnode.Name =="FillForegnd")
        {
          fillnode.InnerText =ddlColor.SelectedValue.ToString();
          break;
        }
      }
    }
  }
}

The above code shows an example of how to get each shape's id and iterate through a shape's child nodes to change attributes.

·         Note: If the shape's fill was not defined by the user when the diagram was designed, then the fill node will not be found in the XML and will need to be created.  This same behavior is true of other Visio attributes. For complete documentation on Visio's XML see XML for Visio Schema.

9.      Open the web.config file and add the following line after <system.web>, allowing the web application to run Visio:

Listing 8

<identity impersonate="true" />

10.   Run the Web application. Press the Browse button and find a Visio .vdx file.  Press the Upload button to upload the file to the web server. Once the diagram is loaded, you can select colors from the dropdown and see shapes in the diagram change colors.  Open other browser windows to see identical diagrams display. If you had any difficulties with the above steps, please download and try the sample code.

Figure 1

References

·         Running Visio Save As From the CommandLine

·         XML for Visio Schema

·         History of Visio

·         Host an Interactive Visio Drawing Surface in .NET Custom Clients

Downloads

[Download Sample]

Summary

Visio allows you to create visual representations of complex business problems and model processes.  Saving Visio diagrams as web pages provides access to multitudes of users. However, if these diagrams are static they can only be used as a reference.  Add the capability of dynamically changing a diagrams symbol's status and a Visio diagram becomes a point of reference that can also provide status and isolate problems.

Extrapolate from this article and you will begin to envision dynamic workflow status, the ability to design diagrams on a WebForm with drag and drop functionality and other innovative solutions limited only by one's imagination.