Visio: Developer Blog

Visio

Migrate from Visio Web Access to Visio Online

Overview

Visio Online replaces Visio Web Access (also called Visio Services) in SharePoint Online. Visio Online is the new way to view, create and share Visio diagrams in SharePoint Online. As part of the Office Online ecosystem, Visio Online includes a modern UI, introduces performance improvements and has richer capabilities that aren’t available in Visio Web Access. The below sections describe how you can migrate from Visio Web Access to Visio Online using different examples.

Visio Web Access Scanner

Before you start migration, we recommend that you use the Visio Web Access scanner to find all pages that have Visio Web Access embedded in them. The tool is available here with detailed instructions to get started quickly.

Decide on a migration path

This flowchart helps you plan how to migrate and choose which sections are most relevant to your particular situation.
Migration flow from Visio Web Access to Visio Online

 

Migrate VDW files to work with Visio Online

Visio Online supports VSD, VSDX and VSDM file extensions for viewing Visio files in SharePoint Online. For your VDW files to continue to work, open them in Visio Desktop and save them as VSD or VSDX files to view them with Visio Online. If you want to edit VDW files on the web, we recommend you save them as VSDX.

Embed Visio drawing in a modern SharePoint page

Add a File Viewer web part to a modern SharePoint page

Create a modern SharePoint page where you wish to embed the Visio diagram. For more information, see Add a page to a site.

1. Click on the + sign, and then choose File Viewer.

Copy the embed url from Embed dialog

2. Browse to a Visio file that you wish to embed, and then choose Open.

For more information, see Using web parts on SharePoint Online pages.

Use the Embed command in Visio Online editor

1. Open the Visio diagram, select Open Diagram, and then select Edit in Browser.
2. Select File > Share > Embed.
3. In the Embed dialog box, copy the Embed code.
4. On a modern SharePoint page, add the Embed Code Web Part, and then add the embed code to it.

For more information, see Use the Embed web part on a modern page.

Embed a Visio drawing in a classic SharePoint page with key properties

This section covers scenarios where you want to embed the Visio drawing and set some key properties by default.

1. Open the document library where the Visio drawing is stored and click it to open in Visio Online. From there, open the Embed dialog and copy the Embed URL of the drawing.

 

 

 

 

 

 

2. Create a classic SharePoint page where you wish to embed the Visio drawing. (Select Pages > New > Web Part Page. Enter a name, choose Site Pages under Document Library, and then click Create.)
3. Add a script editor web part to it and choose the code snippet from below cases, that suits your need.
4. In the code snippets, update the URL variable to the one you have copied in step #1 above.

Width and Height of embedded Visio drawing

Change the width and height parameters in the following code sample to decide the size of the embedded Visio drawing.

 

Page Name

Change the URL and page name in the following code sample to embed a drawing and select the page to open by default. This is useful if your drawing has multiple pages and you want to open to a particular page by default.

 

Toolbars

Change the URL in the following code sample to embed a drawing and hide various toolbars such as navigation bar, status bar, and so on by default.

 

Basic Interactivity

Change the URL and interactivity parameters in the following code sample to embed a drawing and enable/disable panning, zooming and hyperlinks by default.

 

Periodic data refresh

For data connected drawings, enable periodic refresh to keep the drawing up-to-date. Change the URL and periodic refresh frequency in the below code to suit your needs.

 

Create interactive mashups with Visio Online similar to those built using Web Part connections in Visio Web Access web part

Visio Web Access supported connecting to other web parts through web part connections. The following section describes how to migrate some of your interactive mashups to Visio Online through equivalent JavaScript APIs.

Send Shape Data To

In the Visio Web Access web part, this connection action allowed you to send shape data to another web part. When a shape is selected in the Web diagram, data from that shape is sent as a row. You can use the following code sample to get the same functionality with Visio Online.

 

Get Web Drawing URL and Page Name From

This web part connection action allowed you to load a web drawing or switch the displayed page. You can use the following code sample to get the same functionality with Visio Online.

One application of the above web part connection was to display two Visio web parts on the same SharePoint page and connect them such that when you click on a shape in the first web part, the second web part displays detailed related information. The following code sample demonstrates this capability.

 

Get Shapes to Highlight From

This web part connection action allowed you to highlight a list of shapes in a diagram. You can use the following sample code to get the same functionality with Visio Online.

 

Get Shape to View From

This web part connection action allowed you to center the view on a particular shape and change the zoom percentage of the diagram. You can use the following sample code to get the same functionality with Visio Online.

 

Create rich interactive mashups with Visio Online similar to those built using Visio Services JavaScript mashup API

The Visio Services JavaScript Mashup API enabled developers to access and manipulate the Visio web drawing. The new Visio JavaScript APIs fill some gaps that were in Visio Web Access, are more aligned with Office Extensibility, and provide solution-building capabilities on par with existing APIs, and more. For more information, see Benefits of using the Visio JavaScript APIs over Visio Web Access APIs.

High level class diagram for new Visio JavaScript APIs

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The following table describes the new equivalent APIs as compared to Visio Web Access APIs.

Visio Web Access APIs New Visio JavaScript APIs
Vwa.diagramcomplete Event DocumentLoadCompleteEvent
Vwa.shapemouseenter Event ShapeMouseEnter Event
Vwa.shapemouseleave Event ShapeMouseLeave Event
Vwa.shapeselectionchanged Event SelectionChanged Event
Vwa.VwaControl.getActivePage Document.getActivePage
Vwa.VwaControl.getAllPageIds Document.pages
Vwa.VwaControl.refreshDiagram Document.startDataRefresh
Vwa.VwaControl.setActivePage Document.setActivePage
Vwa.Page.centerViewOnShape Page.View.centerViewportOnShape
Vwa.Page.getId Page.index
Vwa.Page.getSelectedShape Page.View.getSelection
Vwa.Page.getShapes Page.shapes
Vwa.Page.getZoom Page.View.zoom
Vwa.Page.isShapeInView Page.View.isShapeInViewport
Vwa.Page.setSelectedShape Shape.select
Vwa.Page.setZoom Page.View.zoom
Vwa.ShapeCollection.getCount ShapeCollection.getCount
Vwa.ShapeCollection.getItemAtIndex ShapeCollection.items[i]
Vwa.ShapeCollection.getItemById ShapeCollection.getItem
Vwa.ShapeCollection.getItemByName ShapeCollection.getItem
Vwa.Shape.addHighlight Shape.View.highlight
Vwa.Shape.addOverlay Shape.View.addOverlay
Vwa.Shape.getBounds Shape.getBounds
Vwa.Shape.getHyperlinks Shape.hyperlinks
Vwa.Shape.getId Shape.id
Vwa.Shape.getName Shape.name
Vwa.Shape.getShapeData Shape.shapeDataItems
Vwa.Shape.removeHighlight Shape.View.highlight
Vwa.Shape.removeOverlay Shape.View.removeOverlay
Vwa.Page.getPosition Page.View.getPosition
Vwa.Page.setPosition Page.View.setPosition
Vwa.Page.getSize Page.height, Page.width
Vwa.Shape.getcomments Shape.comments

You can find the complete documentation on Visio JavaScript APIs. Get started today with the new APIs to migrate your mashup solutions and make them even richer. Share your feedback and requests at UserVoice.

filter-icon