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:
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.
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.
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.
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.
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).
Figure 3: Web part page with Visio Web Access web part added to Body web part zone
Figure 4: Visio Web Access web part properties
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
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.
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.
Listing 3: Iterate all 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.
Listing 4: Highlight shape
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.