Visio Services application development

Most people will know Visio as a client application for drawing diagrams like the Network Diagram, Floor Plan or Flowcharts. SharePoint 2010 introduced Visio as a server component with which diagrams drawn in Visio 2010 can easily be displayed within SharePoint and integrated into webpages. This article discusses the new Visio Services service application and possibilities for development with the Visio Services Mash-Up API.

Visio 2010 and Visio Services

The advanced diagramming tools of Microsoft Visio 2010 helps you to simplify complex (business) processes with dynamic, data-driven visuals and new ways to share on the Web. Visio 2010 visualizes processes by creating (process)diagrams, sharing these with colleagues and turn it into business intelligence. With the 2010 edition of Visio the product can be divided into a client and a server product. The client application is installed on the local computer of the information worker and provides powerful tooling for viewing and creating diagrams. Visio Services is a service application, which integrates with SharePoint Server 2010 and provides possibilities for viewing diagrams in a web browser.

Visio 2010 consists of three editions: Standard, Professional en Premium (http://office.microsoft.com/en-us/visio/visio-edition-comparison-FX101838162.aspx). The Standard edition has some basic features and focuses on View Only functionality. The Professional edition has most of the available features. It is likely this edition is most commonly used, because it supports a wide range of templates like floor plans for creating evacuation plans, pivot diagrams supporting hierarchical organizational structures and network diagrams for visualizing network topologies. The Premium edition has a specific set of features for Business Process Modeling Notation (BPMN), SharePoint workflow integration and Six Sigma templates.

Visio Services is part of SharePoint Server 2010 Enterprise edition. Visio Services is a service application that lets users share and view Visio Web drawings (*.vdw files). The service also enables data-connected Microsoft Visio 2010 Web drawings to be refreshed and updated from various data sources. Because diagrams are shown in the web browser there is no need for installing Visio 2010 on your local computer. Only “power users” will need Visio 2010 on their local computer for creating and changing diagrams. After the diagram is finished, the power users can easily share the drawing with the organization. Basic exploration and navigation of these rendered web drawings are supported within the Visio Web Access (VWA) web part. Page designers can configure the user interface and functionality of the web part. The diagram renders in full fidelity in the browser if the person viewing the diagram has Silverlight installed on their machine or as a PNG if not; Visio Services renders seamlessly anything you can draw in Visio. Take a look below to get a feel for the experience:

Supply Chain in browser

Figure 1: Visio drawing rendered in web browser by Visio Web Access web part

Integrating Visio diagrams into SharePoint Applications

Visio Services enables you to embed Visio Web Diagrams into SharePoint applications. There are no limitations whether the diagram is static or dynamic. Depending on your skill level there are three ways of doing so (see Table 1). No matter your skill level, with very little effort you can add visualization to your dashboards and with a bit more page authoring or some coding you can add rich interactivity between Visio Services and other components on the page.

Integration method

Scenario enabled

Skill set required

The Visio Web Access web part

You can embed Visio diagrams into SharePoint pages.

You should know how to create a web part page in SharePoint.

Web Part Connections

You can enable limited interactivity between the Visio Web Access web part and another web part on the page, without code. A typical example of this type of interactivity is to trigger one web part to show extra relevant information about a particular shape, when it’s clicked in the Visio web part.

You should know how to create a web part page in SharePoint as well as how to set-up web part Connections.

The Visio Services Mash-up API

You can enable rich interactivity on your web part page by manipulating the different Visio web diagram objects programmatically. A typical example of this type of interactivity is to show custom visual overlays when the person viewing the diagram hovers over a particular shape.

You should know how to code JavaScript and/or ASPX pages.

Table 1: Integration Visio and SharePoint

The Visio Services Mash-Up API

The Visio Services Mash-Up API is the most advance integration method of all and requires development skills. It enables developers to access and manipulate the Visio web drawing, its pages and shapes. Some key scenarios are:

  • Interacting with web page elements that don’t expose web part connections.
  • Creating visual markup on the Visio drawing canvas.
  • Writing custom handlers for mouse events within the drawing.
  • Exposing diagram data, such as shape names and shape data, to your solution.
  • Combining data from inside and outside a diagram to build dynamic composite mash-ups.

The Mash-Up API consists of four major classes, which reside in the Microsoft SharePoint Server 2010 ECMAScript (JavaScript, JScript) Vwa namespace (http://msdn.microsoft.com/en-us/library/ff394600.aspx). The Vwa.VwaControl class represents the Visio Web Access (VWA) web part on the page. This is the starting point for development. The VWA web part contains a link to the Visio Web Drawing and shows the drawing on the web page. Like many JavaScript APIs, the Visio Services JavaScript API is event-based. The VwaControl exposes a number of events, which a developer can use to write event handlers. Important to note is the event handlers can only be accessed from within the onDiagramComplete event. So typically when the onApplicationLoad event fires, a reference to the VwaControl can be instantiated. This is where you want to set-up the handlers for the onDiagramComplete event and other various (mouse) events. Only then, when the onDiagramComplete event fires references to the complete object model are available.

Most of the business logic starts from the onDiagramComplete event where the (active) page is accessed. The page is represented by the Vwa.Page class which contains a collection of Shapes (Vwa.ShapeCollection class). You can either retrieve the current selected shape or iterate the shapes collection to get a particular shape (Vwa.Shape class).

Microsoft floor plan

Microsoft Netherlands invites customer and partners to visit their building located in Schiphol on a daily basis. The building is split up into a public community area (first floor) and a private area for employees only. The community area holds room for 15 conference rooms, with different capacity and facilities like a beamer and a Roundtable.

Microsoft wanted to improve the process for booking a room, by visualizing the community area and support the room selection process by highlighting rooms, which comply with given selection criteria. Selecting a room is based on availability, capacity and beamer and/or Roundtable availability.

The basics for starting development is creating the Visio web diagram. The community area diagram is created by importing a CAD drawing. This resulted in a Visio diagram showing the community area. By importing the CAD drawing the diagram was overloaded with a huge number of shapes. Every wall resulted in a one or more shapes. When joining shapes together shapes representing one room are created. This is a very important step because in Visio it is all about shapes!

In Visio it is all about shapes!

A single shape contains shape data. The Shape Data Window, showing all shape data, is accessed via the Data tab in the Visio ribbon. Figure 2 is showing the selected shape “Het Kantoor” and its shape data on the right in the Shape Data Window.

The next step in creating our floor plan application is adding data to the shapes. Microsoft provided an Excel sheet with information about capacity and facilities. This information is easily imported into the drawing and bound to the shapes. Visio supports importing data from different sources like Excel, Access, SharePoint, SQL and other sources by clicking the Link Data to Shapes button in the Data tab. The imported data has become a part of the diagram and is stored within the diagram. It is even supported to update the data in the Excel sheet and refresh the corresponding data within the Visio drawing. After the import the External Data window is shown. By dragging a row onto a shape the shape is linked with external data. In Figure 2 the row “Het Atelier” is dragged to the corresponding shape for linking the data to the shape. We will link all rows to the corresponding shapes.

ShapeDataDataLinking

Figure 2: Floor plan zoomed in on "Het Kantoor" conference room

At this stage the Visio diagram is ready. It is saved to a SharePoint site as a Visio Web Diagram (.vwd) file. This is a new Visio file format to support a data-refreshable drawing for use with Visio Services. With the SharePoint site up and running and our Visio diagram saved to a document library, a web part page is needed to display the diagram. A basic web part page with “Header, Right Column, Body” layout is created. Two web parts are added. The Visio Web Access web part is added in the “Body” web part zone and a Content Editor web part is added to the “Right” zone (Figure 3).

WebPartPageWithVWA

Figure 3: Web part page with Visio Web Access web part added to Body web part zone

The VWA web part needs to be configured by selecting the Visio diagram, which is stored in the document library. All other properties of the web part are unchecked in this case, because they will be set via JavaScript later in this article.

VisioWebPartProperties

Figure 4: Visio Web Access web part properties

The Content Editor web part will be pointed to a JavaScript file containing the HTML markup for the panel on the right and all JavaScript business logic. The panel is used by the end user for interaction with the diagram (Figure 5). It shows room information when hovering the different conference rooms (shapemouseenter and shapemouseleave events). Users can use the Filter Options section to highlight in red the matching conference rooms. The Meeting Rooms section will list all available conference rooms by iterating the diagram and building a bulleted list. When clicking an item in the list the conference room is highlighted in light blue.

FloorPlan

Figure 5: Screenshot of Floor Plan Application

Change the Visio Services service application configuration setting Cache Age to 0 minutes. This will reload the Visio drawing on a page refresh. Don’t use this setting in Production environment!

Getting started with the mash-up API

Finally we can start working on our JavaScript skills. First step is to hook up the Application event handlers and get a reference to the VwaControl object (Listing 1). The VwaControl object can be retrieved via the web part instance. Open the SharePoint web part page in source mode (in IE, right click and “View Source”) and search for “class=’VisioWebAccess’”,then back track to the immediate parent <div> tag and look for an attribute of the form id="WebPartWPQ?". Use this ID for retrieving the VwaControl.

// hook up Application event handlers var app = Sys.Application; app.add_load(onApplicationLoad); app.add_unload(onApplicationUnload); // hold an instance of the Visio VWA control var vwaControl; //---------------------------------------------------------- // Create a VwaControl Object and add handlers. //---------------------------------------------------------- function onApplicationLoad() { // this is the name of the visio web part instance on the web part page vwaControl = new Vwa.VwaControl("WebPartWPQ3"); vwaControl.addHandler("diagramcomplete", onDiagramComplete); vwaControl.addHandler("shapeselectionchanged", shapeSelectionChangedHandler); vwaControl.addHandler("shapemouseenter", onShapeMouseEnter); vwaControl.addHandler("shapemouseleave", onShapeMouseLeave); }

Listing 1: Hook up the Application event handlers and reference VwaControl object

After setting up the basics, it’s coding the event handlers. The most important event is the onDiagramComplete event (Listing 2). This is where the active page is retrieved and initial zoom level is set. To make sure the end user does not click the buttons before Visio Services is ready with loading the diagram, the buttons are enabled here in this event.

//---------------------------------------------------------- // Visio page events //---------------------------------------------------------- function onDiagramComplete() { var vwaPage = vwaControl.getActivePage(); vwaPage.setZoom(-1); // force the initial zoom level // Enable filter buttons document.getElementById('btClear').disabled = false; document.getElementById('btFilter').disabled = false; // Get all meeting rooms based on drawing. GetRooms(); // Select shape when querystring has parameter 'room' var roomName = getQuerystring('room', ''); if (!roomName.isNullOrEmpty()) setSelectedShapeByLabelAndName(labelRoomName, roomName); } shapeSelectionChangedHandler = function (source, args) { GetShapeInformation(args); } onShapeMouseEnter = function (source, args) { GetShapeInformation(args); } onShapeMouseLeave = function (source, args) { // Could add logic for mouse leave event }

Listing 2: onDiagramComplete event

The setSelectedShapeByLabelAndName and GetShapeInformation methods are not described in this article. Both are based on the same principles as described in the following paragraph.

Iterate shapes and retrieving shape data

As mentioned earlier, all shapes on the diagram are iterated to get all conference rooms and list those in the Meeting Rooms section. This is initiated by calling the GetRooms() method.

The room name is displayed in the bulleted list on the web page, this is stored in the shape data collection as shown in Figure 2. The shape data is a label/value pair collection which is accessed by the nextShape.getShapeData(); statement. To get the Shape object, the ShapeCollection needs to be iterated. This is an important approach to retrieve shape data in the Visio Mash-Up API. This is shown in Listing 3.

//---------------------------------------------------------- // Get all rooms from the diagram and provision in DIV-element //---------------------------------------------------------- var labelRoomName = "naam"; function GetRooms() { // Get visio objects var vwaPage = vwaControl.getActivePage(); var vwaShapes = vwaPage.getShapes(); var vwaShapeCount = vwaShapes.getCount(); // Search shape based on label and value var strHtml = "<ul class=\"visioRooms\">"; for (var nextShapeIndex = 0; nextShapeIndex < vwaShapeCount; nextShapeIndex++) { var nextShape = vwaShapes.getItemAtIndex(nextShapeIndex); if (nextShape != null) { var data = nextShape.getShapeData(); var strRoomName = ""; for (var j = 0; j < data.length; j++) { if (data[j].label == labelRoomName) { strRoomName = data[j].value; continue; } } if (!strRoomName.isNullOrEmpty()) strHtml += "<li><a href=\"javascript:setSelectedShapeById('" + nextShape.getId() + "');\">" + strRoomName + "</a></li>"; } } strHtml += "</ul>"; } //---------------------------------------------------------- // Sets the selected shape by shape ID //---------------------------------------------------------- function setSelectedShapeById(shapeId) { // Get page and set shape var vwaPage = vwaControl.getActivePage(); vwaPage.setSelectedShape(shapeId); }

Listing 3: Iterate all shapes

Highlight shapes

When a user clicks the “Highlight”-button all shapes which comply with given selection criteria will be highlighted in red. This is achieved with the out-of-the-box method Shape.addHighLight object. An example is shown in Listing 4 which is a fragment of the custom Highlight method.

var selectShape = true; if (selectShape) { nextShape.addHighlight(4, 'red');

Listing 4: Highlight shape

Conclusion

In this article we have looked at developing Visio applications running on top of Visio Services. The article provides background information about Visio 2010 and the new SharePoint 2010 Visio Services service application. Visio Services supports displaying a Visio Web Drawing (.vwd file extension) in the Visio Web Access web part. A developer can easily interact with the Visio drawing by using the Visio Services Mash-Up API. This is demonstrated with the Microsoft floor plan example. Hopefully this has given you an understanding of the Visio development basics and an example approach to creating your own Visio mash-up application.

Advertisements

Get features grouped by solution package

I needed an overview of all features related to their solution package. This can be achieved by using PowerShell. Because this could be useful for others as well, here is the script.

Add-PSSnapin Microsoft.SharePoint.PowerShell -ea 0 foreach ($grp in Get-SPFeature | Group-Object SolutionId) { $sol = Get-SPSolution -Identity $grp.Name Write-Host $sol.Name '(ID:' $grp.Name '), Count:' $grp.Count -ForegroundColor Blue foreach ($fd in $grp.Group | sort DisplayName ) { Write-Host $fd.DisplayName '(' $fd.Scope ')' } Write-Host }

The output looks like this

Output PowerShell ISE