The new version of Visio JavaScript APIs is now available for public preview

Visio team

General availability of the first set of Visio JavaScript APIs was announced in March 2017. Visio JavaScript APIs are used to extend Visio for the web and build rich mashup scenarios. Today, we are announcing the public preview of some of the most requested APIs.

Custom HTML Overlay API

Now, you can add custom HTML content on your shapes and build rich solutions. You can show HTML content on various shape events—like on shape hover or selection change—and extend same diagram to fit into various scenarios. To learn more, read this document about HTML Overlay.

Sample usage: addOverlay(“html”, “https://www.bing.com/”, 2, 2, 50, 50);

Use case

Consider a company selling software products. The order from entry to invoicing flows in loosely coupled systems. The head of the software department wants to see the number of orders at every step and current status of the order. Using Visio for the web, the ordering system can be visualized. Data can be fetched from various order entry sources, processing, and invoicing systems in real time and can be overlaid on the process diagram. The following diagram shows the number of orders at every step with one HTML Overlay, and a drill down of the status with another overlay.

Visio Diagram with Overlay
Visio Diagram with Overlay

Disable Pan Zoom Window

Whenever Visio for the web is loaded, a Pan Zoom Window appears to aid zooming in the diagram. You can customize this with the document view property to disable the Pan Zoom Window and allow users to consume the diagram without any disruptions.

Sample usage: documentView.disablePanZoomWindow = true;

Default zoom parameter

You can set a default zoom level for diagrams opened in Visio by appending append wdzoom=<zoom value> in the file URL. It will automatically adjust to the zoom level you set (150% zoom, for example).

Sample usage: https://…-58A5-42CF-BFC7-E29E701D38D2%7D&wdzoom=300

Note that the zoom value provided must fall between 0 and 400. If you provide a value outside of this (500% zoom, for example), the diagram will automatically adjust to the highest value of 400.

We’d love to hear new ideas for future JavaScript APIs! Leave a comment below or submit ideas for future releases on our UserVoice site. Email us at tellvisio@microsoft.com with any questions and follow us on Facebook and Twitter to stay current on the latest Visio releases.

Feedback usabilla icon