Exercise 1: Using the Visio JSOM

In this exercise you will learn how to create and use a simple Visio Services JSOM script. The objective of this exercise is to demonstrate all of the tasks required to use the Visio Services JSOM. In this exercise, you will create a simple script that logs user activity on a Visio diagram to a Content Editor Web part.

Task 1 – Creating the Script

In this task, you will be developing a script to use ECMAScript that will allow you to communicate with the SharePoint Visio services.

1. Navigate to %Office2010DeveloperTrainingKitPath%\Labs\VisioJSOM\Starter and open FabriKamOrgChart.js in Visual Studio

2. Add the following variables and function call to your code between the <script> tags. vwaControl will be used to hold a reference to a Visio Services Web Access part instance. vwaPage will be used to hold a reference to the page object. Sys.Application.add_load() is used to add an event handler that is called once the scripts have been loaded and all objects in the application have been loaded and initialized.

   var logItems = true; var webPartElementID = "WebPartWPQ4"; var vwaControl; var vwaPage; Sys.Application.add_load(onApplicationLoad);

3. Add the following function to your code after Sys.Application.add_load(). This function is the event handler that was specified in the last step. In this function, you are creating a new Visio Web Access Control object that is associated with the Visio Web Access web part. You are also adding an event handler that will be called once the Visio diagram is done loading.

   function onApplicationLoad() { try { vwaControl = new Vwa.VwaControl(webPartElementID); vwaControl.addHandler("diagramcomplete", onDiagramComplete); } catch(err) { } }

4. Add the following function to your code after the onApplicationLoad() function. This function is the event handler that you specified in the last step. In this function, you obtain a reference to the active Visio page object and add an event handler that is called when the active shape selection changes.

   function onDiagramComplete() { try { vwaPage = vwaControl.getActivePage(); vwaPage.setZoom(-2); vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged); } catch(err) { } }

5. Add the following function to your code after the function onDiagramComplete(). This event handler that will be triggered every time the shape selection changes.

   function onShapeSelectionChanged() { var sh = vwaPage.getSelectedShape(); writelog("Logging: onShapeSelectionChanged - " + sh.getName()); }

6. Add the following function to your code after the function onShapeSelectionChanged(). This function will write messages to a Content Editor Web part. You will use it to trace the flow of events as you work with a Visio Web Access web part.

   function writelog(item) { if(logItems) { var output = item + '<br />'; document.getElementById('logdiv').innerHTML = output + document.getElementById('logdiv').innerHTML; } }

7. Save your changes to FabriKamOrgChart.js
8. Open Internet Explorer and navigate to https://intranet.contoso.com
9. Click on Shared Documents
10. Click on Add Document
11. Click Browse and navigate to %Office2010DeveloperTrainingKitPath%\Labs\VisioJSOM\Starter\ FabriKamOrgChart.js
12. Click Open and then OK
13. Repeat steps 10-12 for FabriKamOrgChart.vdw

Task 2 – Setting up the Web Part Page

In this task, you will be setting up a SharePoint web part page that will incorporate your Visio document and ECMAScript.

1. Open up Internet Explorer and navigate to https://intranet.contoso.com
2. Click the Site Actions dropdown and select More Options
   1. Filter by Page, select Web Part Page and click Create
   2. Title the page FabriKamOrgChart and for the Layout Template, select Header, Left Column, Body
   3. Click the DocumentLibrary drop down and select SitePages

   4. Click Create

      Figure 1

      New Web Part Page dialog

3. Click Add a Web Part in the Body section of the page
   1. View the Categories section and select BusinessData. View the Web Parts section, select VisioWebAccess, and then click Add
   2. Click the dropdown menu next to the checkbox in the Visio Web Access web part
   3. Select Edit Web Part
   4. View the Web Drawing Display section of the Visio Web Access property box and under Web Drawing URL, click the box and navigate to FabriKamOrgChart.vdw, which is located in the Shared Documents folder
   5. View the Toolbar and User Interface section and uncheck every option except for Show default background
   6. View the Appearance section, set the Height to 600 and change the ChromeType to None
   7. Click OK to save the changes
   8. If the checkbox in the Visio Web Access web part is checked, uncheck it
4. Click Add a Web Part in the Left Column section of the page
   1. View the Categories section and select MediaandContent. View the WebParts section, select ContentEditor and then click Add
   2. Click the dropdown menu next to the checkbox in the Content Editor web part
   3. Select Edit Web Part
   4. Open up the SharePoint site homepage in a new tab or window
      1. Click Shared Documents
      2. Find FabriKamOrgChart.js, right-click on it and select Copy shortcut
      3. Go back to the web part page you were working on before
   5. Right-click in the box under ContentLink in the ContentEditor section and select Paste
   6. View the Appearance section and set the Width to 200. Be sure to select Yes next to the Width box
   7. Set the ChromeType to None in the Appearance section
   8. Click OK to save the changes

5. Click Stop Editing in the top left corner of the page

   Figure 2

   Web Part

Task 3 – Verifing the Visio Web Access WebPartElementID

In this task, you will learn how to go about verifying the correct web part element ID for a Visio Web Access web part. This is necessary to verify that the web part element ID you use in your script is the web part element ID associated with the Visio Web Access web part you desire to interact with.

1. If you’re not on your web part page already, go to https://intranet.contoso.com, click on Site Pages and click on FabriKamOrgChart
2. Right-click on the page and select View source
3. Search for the keyword class="VisioWebAccess"
4. Look just above that div tag and find the div tag that starts with <div WebPartID

5. Find the id attribute within the div tag and take note of the value of that attribute. That is the web part element ID that needs to be reflected in the ECMAScript. In task 1, that value was WebPartWPQ4. If the element ID does not match, change the value in your FabriKamOrgChart.js script and re-save it to the site.

   Figure 3

   Web Part Page Source Code

Exercise 1 Verification

To verify that the ECMAScript and Visio Web Access web part are functioning together and correctly, perform the following steps

1. Click on Mike at the top

2. View the content editor along the left side and verify the following output

   Logging: onShapeSelectionChanged – Executive

3. Click on additional people to view similar results

   Note:

   If there is nothing being logged, review Task 3 1-5 in the previous exercise section to make sure your JavaScript is referencing the correct WebPart id.
   Figure 4

   Finished Web Part Page