Code Sample: Annotations

  • Article

Applies to: SharePoint Server 2010

Note

The information in this topic applies to SharePoint 2013 as well as to SharePoint 2010. The samples provided in the SharePoint 2010 SDK also work in SharePoint 2013, but are not included in the SharePoint 2013 SDK.

The Annotations sample is one of three sample JavaScript files in the SharePoint 2010 SDK download file (SharePoint 2010 Reference: Software Development Kit) that show best practices for programming the Visio Web Access Web Part. The Annotations sample shows how to annotate a Web drawing page in two ways: by using shape overlays and by using shape highlights. In a Content Editor Web Part, it adds four list controls that enable users to choose drawing parameters for the annotations. It also adds a button that enables users to submit their choices and draw the annotation.

The JavaScript samples included in the SharePoint 2010 SDK are as follows:

  • Annotations sample

  • Custom Error Messages sample

  • Mouse Interaction sample

You can use these JavaScript files on your own Web Parts pages. The SharePoint 2010 SDK provides a brief document for each sample that explains how to use it, and the code in each sample file includes extensive explanatory comments.

Downloading the SharePoint 2010 SDK and Samples

  1. Download the SharePoint 2010 Reference: Software Development Kit, which includes the Annotations sample.

  2. When you install the SharePoint 2010 SDK, the compressed (.zip) file that contains the samples is installed by default in the path C:\Program Files (x86)\Microsoft SDKs\SharePoint 2010\Samples\Visio Services. You can extract the samples to a folder location that you select.

Installing the Annotations Sample

After you download the SharePoint 2010 SDK and extract the sample, complete the following procedures. These procedures are explained in more detail in the topic Customizing Visio Web Drawings in the Visio Web Access Web Part in this SDK.

  1. Create or open an existing Visio drawing that contains several shapes and save it as a .vdw file to a document library.

  2. Create a Web Parts Page in Microsoft SharePoint Server 2010 and add a Visio Web Access Web Part to the page.

  3. Add a Content Editor Web Part to the same page.

  4. Link the Content Editor Web Part to the Annotations.js file.

You should also follow the instructions in the comments in the sample file, including copying the .png file that is part of the sample download to the same document library where you have copied the .vdw file.

See Also

Concepts

Customizing Visio Web Drawings in the Visio Web Access Web Part

Code Sample: Custom Error Messages

Code Sample: Mouse Interaction