Creating an Office Plan ECMAScript Mashup Drawing in Visio 2010 to Display in SharePoint Server 2010
Summary: Learn how to use the Visio ServicesJavaScript API to create a floor plan drawing in Microsoft Visio Premium 2010 that users can interact with in a Web Parts page in Microsoft SharePoint Server 2010.
Applies to: Office 2007 | Office 2010 | SharePoint Server 2010 | Visio 2010 | Visio Premium 2010
In this article
Overview
Creating the Sample Files
Creating an Excel Spreadsheet to Hold the Data to Be Displayed
Creating the Visio Web Drawing File
Creating a Web Parts Page in SharePoint Server 2010
Adding Web Parts to the Web Parts Page
ECMAScript Code in the Sample
Creating the ECMAScript File to Contain the Code
Adding a Content Editor Web Part
Testing the Mashup
Conclusion
Published: September 2010
Provided by: Saul Candib, Microsoft Corporation
Contents
Overview
This article describes how to use the Visio ServicesJavaScript API to customize a Visio 2010 web drawing displayed in the Visio Web Access Web Part in Microsoft SharePoint Server 2010. In this article, the JavaScript API is used to display information, such as name, department, and telephone number extension, about office occupants in a floor plan drawing when the user moves the mouse pointer over an office shape. The information displayed is derived from an external data source—in this case, a Microsoft Excel spreadsheet—and the displayed data can be updated when the information in the data source changes.
Creating an Interactive Visio Drawing on a Web Parts Page in SharePoint Server 2010
Use the general steps in the following procedure to create an interactive office floor plan drawing. You must have the appropriate administrative permissions as a page designer in SharePoint Server 2010 to complete the tasks listed.
To display an interactive Visio drawing in SharePoint 2010
Create the Excel spreadsheet that contains the data that you want to display in the drawing, and save it to the same document library that holds the .vdw file.
In Visio, create the floor plan drawing that you want to display, and then save it to the same SharePoint document library as a .vdw file.
Link the shapes in the drawing to the data in the spreadsheet.
Create a SharePoint Server 2010 Web Parts page to display your drawing and contain your code.
Add a Visio Web Access Web Part to the page, and display the web drawing in the Web Part.
Create the JavaScript (.js) file that contains the code that you want to use to interact with the web drawing, and save it to the same document library.
Add a Content Editor Web Part to the page, and link it to the JavaScript file that you created.
Refresh the page in your browser.
The following sections provide more detail about each of these steps.
Creating the Sample Files
To construct the interactive floor plan drawing presented in this article, you will have to create three sample files:
A Microsoft Excel spreadsheet that contains the data displayed in the drawing.
A Visio web drawing (.vdw) file.
An JavaScript (.js) file that contains the code that makes the mashup work.
Note
Mashups enable you to combine functionality or data from multiple sources into a single, integrated service, application, or medium.
You will save all three of these files to the SharePoint document library on the same SharePoint site where you want to display the web drawing.
Creating an Excel Spreadsheet to Hold the Data to Be Displayed
First, create an Excel spreadsheet to hold the data that the office shapes in your web drawing will link to. For the sake of simplicity, the spreadsheet shown here contains only three records but, of course, you can add as many more records to your spreadsheet as you want, depending on the number of offices in your floor plan. When complete, your Excel spreadsheet should look like Figure 1.
Figure 1. Excel spreadsheet that contains the drawing data
.jpg "Excel spreadsheet that contains the drawing data")
Use the following procedure to create the spreadsheet.
To create an Excel spreadsheet
Open a new Excel spreadsheet file (.xlsx), and add the following data to the first four rows. Include a header row, as shown.
Table 1. Spreadsheet data
SpaceID
Name
Department
PhoneNumber
A1001
Sidney Higa
User Assistance
X5265
A1002
Jane Dow
Test
X8292
A1003
Dan Wilson
Development
X5914
Save the file as OfficePlanData.xlsx to the document library on the SharePoint Server computer that will also contain the Web Parts page where you want to display the finished web drawing.
Creating the Visio Web Drawing File
Next, create the Visio floor plan drawing that you will be displayed as a web drawing, add some office shapes to the drawing, import data from your spreadsheet, and then link those shapes to the data. You will use a combination of the Visio user interface (UI) and Visual Basic for Applications (VBA) code in the Visual Basic Editor to create the drawing. When it is complete, your drawing will look like Figure 2.
Figure 2. Visio floor plan drawing
.gif "Visio floor plan drawing")
Use the following procedure to create the drawing.
To create a Visio web drawing (.vdw) floor plan
Open Visio 2010, and then click the File tab.
On the New tab, under Template Categories, click Maps and Floor Plans.
Click Floor Plan, select US Units, and then click Create.
Save the drawing as a .vdw file. Click File, and then click Save. Browse to the location (the document library on the SharePoint Server computer) where you want to save the file. For the file name, type Office Plan. In the Save as Type list, click Web Drawing (*.vdw), and then click Save.
Press ALT+F11 to open the Visual Basic Editor.
In Project Explorer, double-click the ThisDocument (Office Plan) project.
To add three office shapes to your drawing, paste the following code into the code pane, and then click anywhere in the code procedure and press F5 to run the code.
Dim vsoShape1 As Visio.Shape Dim vsoShape2 As Visio.Shape Dim vsoShape3 As Visio.Shape Sub AddOfficeSpaces() ' Enable diagram services. Dim DiagramServices As Integer DiagramServices = ActiveDocument.DiagramServicesEnabled ActiveDocument.DiagramServicesEnabled = visServiceVersion140 Set vsoShape1 = Application.ActiveWindow.Page.Drop(Application.Documents.Item("WALL_U.VSS").Masters.ItemU("Room"), 712#, 600#) Set vsoShape2 = Application.ActiveWindow.Page.Drop(Application.Documents.Item("WALL_U.VSS").Masters.ItemU("Room"), 840#, 600#) Set vsoShape3 = Application.ActiveWindow.Page.Drop(Application.Documents.Item("WALL_U.VSS").Masters.ItemU("Room"), 968#, 600#) ' Restore diagram services. ActiveDocument.DiagramServicesEnabled = DiagramServices End SubTo connect your drawing to the data in the Excel spreadsheet that you created, paste the following code into the code pane, and then run the code.
Note
Before you run the code, change your_filepath to the path of the document library on the SharePoint Server computer where you saved your Excel spreadsheet. This should be the full path, including the computer name, drive, and folder.
Sub ImportData() ' Enable diagram services. Dim DiagramServices As Integer DiagramServices = ActiveDocument.DiagramServicesEnabled ActiveDocument.DiagramServicesEnabled = visServiceVersion140 Dim strFilepath As String Dim strConnection As String Dim strCommand As String ' Replace <your_filepath> with the full path to the folder on the SP server computer. strFilepath = "<your_filepath>\Office Plan Data.xlsx" strConnection = "Provider=Microsoft.ACE.OLEDB.12.0;" & "User ID=Admin;" _ & "Data Source=" + strFilepath + ";" _ & "Mode=Read;" _ & "Extended Properties=""HDR=YES;IMEX=1;MaxScanRows=0;Excel 12.0;"";" _ & "Jet OLEDB:Engine Type=34;" strCommand = "SELECT * FROM [Sheet1$]" Application.ActiveDocument.DataRecordsets.Add strConnection, strCommand, 0, "Office Data" Application.ActiveWindow.Windows.ItemFromID(visWinIDExternalData).Visible = True ' Restore diagram services. ActiveDocument.DiagramServicesEnabled = DiagramServices End SubTo link the shapes in your drawing to the data that you just imported, paste the following code into the code pane and then run it.
Sub LinkShapesToData() ' Enable diagram services. Dim DiagramServices As Integer Dim vsoDataRecordset As Visio.DataRecordset DiagramServices = ActiveDocument.DiagramServicesEnabled ActiveDocument.DiagramServicesEnabled = visServiceVersion140 Dim intCount As Integer intCount = Visio.ActiveDocument.DataRecordsets.Count Set vsoDataRecordset = Visio.ActiveDocument.DataRecordsets(intCount) ActiveWindow.DeselectAll ActiveWindow.Select vsoShape1, visSelect Application.ActiveWindow.Selection.LinkToData vsoDataRecordset.ID, 1, False ActiveWindow.DeselectAll ActiveWindow.Select vsoShape2, visSelect Application.ActiveWindow.Selection.LinkToData vsoDataRecordset.ID, 2, False ActiveWindow.DeselectAll ActiveWindow.Select vsoShape3, visSelect Application.ActiveWindow.Selection.LinkToData vsoDataRecordset.ID, 3, False ' Restore diagram services. ActiveDocument.DiagramServicesEnabled = DiagramServices End SubSave and close the drawing file.
Creating a Web Parts Page in SharePoint Server 2010
After you have saved your Visio drawing to a document library as a .vdw file and linked it to an Excel spreadsheet saved to the same document library, the next step is to create a Web Parts page in SharePoint Server 2010. As already mentioned, you must also have sufficient administrative permissions to create and edit this page.
Follow these steps to create a Web Parts page.
To create a Web Parts page in SharePoint Server 2010
In the SharePoint site where you want to post your drawing, on the Site Actions menu, click More Options.
In the Create dialog box, filter by Page, click Web Part Page, and then click Create.
On the New Web Part Page, in the Name box, type the name that you want to use for the page.
Under Choose a Layout Template, click Header, Right Column, Body.
In the Document Library list, select the same document library where you saved the other files, and then click Create.
Adding Web Parts to the Web Parts Page
You will add two Web Parts to the Web Parts page: a Visio Web Part, which will display the Visio web drawing; and a Content Editor Web Part, which will contain the code that lets users interact with the Visio web drawing. Content Editor Web Parts are also useful for displaying user controls, such as option buttons and text boxes, that let users interact with the Web Parts page. However, because there is no additional user interface necessary for this sample, in this case you will hide the Content Editor Web Part.
Add a Visio Web Part
Before you can interact programmatically with a web drawing on a SharePoint Server 2010 Web Parts page, you must add a Visio Web Access Web Part to the Web Parts page that you created, and open a Visio drawing published as a .vdw file in the Web Part. Use the following procedure to add the Web Part.
To add a Visio Web Access Web Part to the Web Parts page
In the Server ribbon on the SharePoint Server 2010 Web Parts page, click Edit Page.
In the Body zone, click Add a Web Part.
In the Categories list, click Business Data.
In the Web Parts list, click Visio Web Access, and then click Add.
Click the Visio Web Access Web Part Menu arrow, and then click Edit Web Part.
Open the Visio Web Access tool pane.
In the Web Drawing URL box, type or paste the URL of the web drawing (.vdw file) you created, or click the browse button to navigate to the URL, and then click Apply.
Select Force raster rendering.
It is also possible to render Visio drawings in the Visio Web Access Web Part by using Microsoft Silverlight. However, for simplicity, the code in this article assumes raster rendering.
Expand the Appearance category. Under Height, type 800, and then click OK
ECMAScript Code in the Sample
Visio Services exposes an JavaScript API to enable you to interact programmatically with Visio web drawings displayed on a Web Parts page. In this section, you will find a brief explanation of how the code in the .js file presented in this article works. The section is divided into subsections, each of which deals with a particular part of the code. More information is provided in the comments within the code.
For more information about the Visio ServicesJavaScript API, see the articles linked to in the Related Topics section at the end of this article.
Determining the Visio Web Access Web Part ID
The script presented in this article will function correctly only if you determine the HTML identifier (ID) for the Visio Web Access Web Part and assign it to the webPartElementID variable in the code. Web Parts pages assign HTML identifiers to Web Parts arbitrarily, but they are always of the form "WebPartWPQ*#", where # is a number from 1 through 4. To determine the ID of the Visio Web Access Web Part in your application, in the Web Parts page, click Page, and then click View Source. In the source code viewer, on the Edit menu, click Find. In the Find box, type class="VisioWebAccess". When you have located the HTML tag that contains that text, you will find the ID in an attribute of one of the <div> tags immediately before the tag that contains the text you searched for. The attribute typically appears as follows: id="WebPartWPQ#*". When you have found the ID, modify the code to reflect the ID number.
Sys.Application.load Event
The Sys.Application.load event is exposed by Microsoft AJAX, as part of ASP.NET 4. This event is raised after all scripts have been loaded and the objects in the application have been created and initialized. The sample code uses the add_load accessor to bind the onApplicationLoad event handler delegate function to the load event. The event handler, in turn, gets a VwaControl object and registers additional event handlers, as explained in the next section.
onApplicationLoad Event Handler
The onApplicationLoad function handles the AJAX Sys.Application.load event. When the Sys.Application.load event is raised, the onApplicationLoad function instantiates a VwaControl object, passing it the Visio Web Access web part identifier previously determined, and gets a reference to the new object. It also uses the VwaControl.AddHandler method to add a handler for the diagramcomplete event.
onDiagramComplete Event Handler
The onDiagramComplete function handles the diagramcomplete event, which is raised when a request for a web drawing page is complete. When the diagramcomplete event is raised, the onDiagramComplete function uses the VwaControl.GetActivePage method to get a reference to the current page. It also uses the Vwa.Page.SetZoom method to set the page zoom to page width (-1) and uses the VwaControl.AddHandler method to add handlers for the shapemouseenter and shapemouseleave events.
onShapeMouseEnter Event Handler
The onShapeMouseEnter function handles the shapemouseenter event, which is raised when the mouse pointer enters the bounding box of a shape on the active web drawing page. When the event is raised, this function displays shape data, originally derived from the linked Excel spreadsheet, for whatever shape the user moves the mouse pointer over. The function again uses the VwaControl.GetActivePage method to get a reference to the current page. It also uses the Vwa.Page.GetShapes method to get the collection of shapes on the current page. Then it uses the Vwa.ShapeCollection.GetItemById method to get the shape that sourced the event, passing it the Visio shape ID of the shape that raised the shapemouseenter event, in the form of the args parameter.
Once it has the source shape, the code uses the Vwa.Shape.getShapeData method to get an array of the shape data items associated with the shape. It iterates through those data items, extracting the values of the "ShapeID," "Name," "Department," and "PhoneNumber" items, and converting those values to strings. Finally, the code uses the Vwa.Shape.addOverlay method to display a shape overlay on the source shape that contains the data the Vwa.Shape.getShapeData method retrieved, passing that data to Vwa.Shape.addOverlay as part of the string that forms the content parameter. The content string also specifies aspects of the overlay text display, including font size, font weight, and border size and color. Other parameters that are passed to the method specify the location of the overlay relative to the shape and the height and width of the overlay.
onShapeMouseLeave Event Handler
The onShapeMouseLeave function handles the shapemouseleave event, which is raised when the mouse leaves the bounding box of a shape on the active web drawing page. When the event is raised, this function uses the Vwa.Shape.RemoveOverlay method to remove the overlay.
Creating the ECMAScript File to Contain the Code
The code that provides the interactivity between users and the Visio web drawing is written in ECMAScript (JScript) and is saved as a .js file in the same document library as the web drawing and the Excel spreadsheet. It runs on the same page that hosts the web drawing in a separate Content Editor Web Part that is hidden from users. You can create an JavaScript file in Microsoft Visual Studio 2010 or any other text or code editor. Follow these steps to create the code file.
To create an ECMAScript (.js) file to contain the code
In Visual Studio 2010 or any other text or code editor, create a new page (in Visual Studio, create a JScript page) and overwrite any existing code on the page with the following code.
// ECMAScript source code. <script language="javascript"> // OfficePlanData.js // Copyright (c) Microsoft Corporation. All rights reserved. // Description: This script shows how to use shape text overlays // to display shape data. // // IMPORTANT: To enable this script, ensure that the variable webPartElementId // refers to the HTML ID of the Visio Web Access Web Part that // you want to code against. You can find this ID by searching the source // of a Web Parts page containing a Visio Web Access Web Part for // a tag that contains class="VisioWebAccess"; you should assign // the value of the id attribute of that tag's grandparent to webPartElementId. // Add a hook into the AJAX Sys.Application.load event, raised after all scripts // have been loaded and the objects in the application have been created // and initialized. Sys.Application.add_load(onApplicationLoad) // Declare global variables for the application. // The HTML tag ID of the Visio Web Access part. var webPartElementID = "WebPartWPQ3"; // The Visio Web Access Web part. var vwaControl; // The current page. var vwaPage; // The collection of all the shapes on the current page. var vwaShapes; // Function Name: onApplicationLoad() // Parameters: None // Description: This function handles the AJAX Sys.Application.load event. // When this event is raised, the function captures references // to the Visio Web Access Web Part object and registers // the following Visio Web Access specific event handler: // // diagramcomplete: raised when the request for a Web // drawing page finishes. function onApplicationLoad() { try{ vwaControl= new Vwa.VwaControl(webPartElementID); vwaControl.addHandler("diagramcomplete", onDiagramComplete); } catch(err){ } } // Function Name: onDiagramComplete() // Parameters: None // Description: This function handles the diagramcomplete event, which is // raised when a request for a Web drawing page has been completed. // When the event is raised, this function captures references // to the script's global variables, such as the current page // and the collection of shapes on the page. It also sets // the zoom to page width and registers the shapemouseenter // and shapemouseleave event handlers. function onDiagramComplete() { try{ vwaPage = vwaControl.getActivePage(); vwaShapes = vwaPage.getShapes(); vwaPage.setZoom(-1); vwaControl.addHandler("shapemouseleave", onShapeMouseLeave); vwaControl.addHandler("shapemouseenter", onShapeMouseEnter); } catch(err){ } } // Function Name: onShapeMouseEnter() // Parameters: source: A reference to the object that raised // the shapemouseenter event. // args: The Visio shape ID of the shape the mouse entered. // Description: This function handles the shapemouseenter event, which // is raised when the mouse enters the bounding box of a shape // from the active Web drawing page. When the event is raised, // this function displays shape data. onShapeMouseEnter = function (source, args) { var vwaPage = vwaControl.getActivePage(); var vwaShapes = vwaPage.getShapes(); var shape = null; if (vwaShapes!= null) { shape = vwaShapes.getItemById(args); } var data = null; if (shape != null) { data = shape.getShapeData(); } for (var j = 0; j < data.length; j++) { if (data[j].label == "Name") { var name = data[j].value.toString(); } if (data[j].label == "Department") { var dept = data[j].value.toString(); } if (data[j].label == "PhoneNumber") { var number = data[j].value.toString(); } if (data[j].label == "SpaceID") { var office = data[j].value.toString(); } } shape.addOverlay( "Overlay", '<div style="border:solid 5px #FF0000; font-weight: bold; font-size: large;">Office: ' + office + '<br>' + 'Occupant: ' + name + '<br>' + 'Department: ' + dept + '<br>' + 'Phone number: ' + number + '</div>', 1, 2, shape.getBounds().width, shape.getBounds().height); } // Function Name: onShapeMouseLeave // Parameters: source: A reference to the object that raised // the shapemouseleave event. // args: The Visio shape ID of the shape the mouse left. // Description: This function handles the shapemouseleave event, which // is raised when the mouse leaves the bounding box of a shape // from the active Web drawing page. When the event is raised, // this function removes the overlay. onShapeMouseLeave = function (source, args) { try{ vwaShapes.getItemById(args).removeOverlay("Overlay"); } catch(err){ } } </script>Save the file to the same document library on the SharePoint Server 2010 computer where you saved the Visio .vdw and Excel .xlsx files.
Adding a Content Editor Web Part
A Content Editor Web Part can serve two purposes: it cannot only hold your JavaScript code, but also provide a display and control interface that enables you to interact in real time with the .vdw file in the Visio Web Access Web Part. However, as previously noted, for the purposes of this example, no such interface is necessary, so you will hide the control to increase the screen area available for displaying the .vdw file.
To add a Content Editor Web Part to the Web Parts page
If the page is not already in edit mode, on the Server ribbon on the SharePoint Server 2010 Web Parts page, click Edit Page.
In the Right Column zone, click Add a Web Part.
In the Categories list, click Media and Content.
In the Web Parts list, click Content Editor, and then click Add.
Click the arrow next to Content Editor, and then click Edit Web Part.
Under Content Link, type the URL of the .js file that you created, and then click Apply.
Expand the Layout category, select Hidden, and then click OK.
On the ribbon, click Stop Editing.
Testing the Mashup
To test the mashup you have created, refresh the page that contains the web drawing. In the drawing, move your mouse pointer over one of the office shapes. The name and telephone number of the office occupant should appear in a text overlay at the top of the shape. Move the mouse out of the shape, and the overlay should disappear.
You can also change some of the data in the Excel worksheet and then click Refresh in your drawing. The changes that you made in the data should appear in the drawing.
Conclusion
This article describes how to use the Visio ServicesJavaScript API to create a floor plan drawing in Visio Premium 2010 that users can interact with in a Web Parts page in SharePoint Server 2010. It contains JavaScript code that enables the display of shape data when users move their mouse pointer over a shape in a web drawing.
See Also
Other Resources
Objects in the Visio Services JavaScript API
Visio Web Access Web Part in Visio Services Samples
Customizing Visio Web Drawings in the Visio Web Access Web Part