Using the ECMAScript Object Model for Visio Services

The objective of this Hands On Lab is to provide you with a foundation for using the Visio ECMAScript object model to expand the functionality of a Visio Web Access web part.

Overview

Visio Services is a service application for SharePoint Server 2010. The purpose of Visio Services is to allow users to publish and share their Visio web based drawings to a SharePoint site. You can use Visio Services to render a Visio Web drawing which people can view in a Web browser. Since Visio Services does all of the rendering, anyone can view the Visio Web drawing without having Visio or Visio Viewer installed on their computer.

Visio Services includes an ECMAScript (JavaScript or Jscript) Object Model that allows you to integrate JavaScript code with a Visio Web Access web part (a web part used for viewing Visio Web drawings).

Objectives

The objective of this Hands On Lab is to provide you with a foundation for using the Visio ECMAScript object model to expand the functionality of a Visio Web Access web part. In particular, you will

• Experiment with the ECMAScript object model and examine the role it plays in Visio Services
• Add Shape Overlays and Highlights to a Visio Web Access web part using the ECMScript object model
• Use the the ECMAScript object model to retrieve shape data based on the selected shape in a Visio Web Access part and combine it with other SharePoint data to create a convienent user browsing experience

System Requirements

The steps in this Hands On Lab require the following:

• SharePoint 2010
• Visual Studio 2010 (substitute any program that can edit text files)
• This exercise assumes the use of the 2010 Information Worker Demonstration and Evaluation Virtual Machine (RTM),. If you are working with your own SharePoint server then make the necessary adjustments.

Setup

This Hands-On lab assumes that the Hands-On lab files are located in a folder named %Office2010DeveloperTrainingKitPath%\Labs\VisioJSOM.

Exercises

This Hands-On Lab comprises the following exercises:

1. Using the Visio JSOM
2. Working with Overlays and Highlights
3. Working with Shape Data

Estimated time to complete this lab: 60 minutes.

Starting Materials

This Hands-On Lab includes the following starting materials.

• FabriKamOrgChart.js – This is the ECMAScript you will be building on throughout the exercises that will interact with the Visio Web Access object.
• FabriKamOrgChart.vdw – This is the Visio document will be using to associate with Visio Web Access.
• JPG Files – These images are used to demonstrate overlays.