Some of you have started developing mashups with the new Visio Web Access web part that is available in SharePoint 2010 Enterprise and as you have noticed there is not a lot of sample code available that demonstrate best practices or even a common function library containing even the most basic helper functions.
With this article I want to start that conversation and begin to build a common JavaScript function library specifically for the VWA web part. To kick things off I have attached a single JavaScript file to this article that I have setup as my base library.
To make use of this library I simply upload it as a document to my SharePoint site where I will be developing mashups using the VWA control. Here you can see that I have placed the JS file in the SiteAssets folder on my SharePoint site using SharePoint Designer 2010.
Once the library file is uploaded to my SharePoint site I can simple reference the JS file in any page using the standard script tag as shown:
<script src="http://blogs.msdn.com/SiteAssets/jscript/vwalib.js" type="text/javascript" />
With a reference to the JS file I can now simply call functions directly from this references library as if the source was contained directly in my page.
You can also copy the content of the vwalib.js file and paste it directly into the script on your web part page.
If you are not familiar with building mashups using the VWA web part check out this article published by the Visio product team.
The Visio Services JavaScript Mashup API
v1 Content
At this point my function library does not contain very much functionality at all, but I wanted to release it because the two methods that it does contain will be helpful to anyone building mashups with the VWA control.
findVWAControlId() – this function simply returns the ID of the first VWA control on the page, ex. “WebPartWPQ3”. This is a very important function because as you add web parts to a web part page, SharePoint assigns a unique Id to that instance of the web part. This Id is required to get the instance of the VWA control object on the page. Now you can certainly hard code this Id in your script to get the instance of the control ( vwaControl = new Vwa.VwaControl(‘WebPartWPQ3’); ) but this makes your code not very portable and if you make changes to the layout of the web part page you might need to fix this Id.
getVWAControl() – this function calls findVWAControlId() and uses the Id that is returned to get the instance of the VWA control object on the page. Once you have the instance of the VWA control object you can then start making calls to the VWA objects and connect to the VWA control events.
Click here to download the vwalib.js v1 function library!
If you have ideas or functions that you would like to see included in this library please feel free to email me at chhopkin@microsoft.com.
For more details on the mashup API for the VWA control, take a look at these articles:
Objects in the Visio Services ECMAScript API
This article provides a nice overview of the object model for the VWA control.
API Reference
This set of articles provides detailed information on the VWA objects, methods, and properties.