{"id":3567,"date":"2019-10-28T14:49:23","date_gmt":"2019-10-28T21:49:23","guid":{"rendered":"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/?p=3567"},"modified":"2019-10-28T14:49:23","modified_gmt":"2019-10-28T21:49:23","slug":"the-new-version-of-visio-javascript-apis-is-now-available-for-public-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/the-new-version-of-visio-javascript-apis-is-now-available-for-public-preview\/","title":{"rendered":"The new version of Visio JavaScript APIs is now available for public preview"},"content":{"rendered":"

General availability<\/a> of the first set of Visio JavaScript APIs<\/a> 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.<\/p>\n

Custom HTML Overlay API<\/h2>\n

Now, you can add custom HTML content on your shapes and build rich solutions. You can show HTML content on various shape events\u2014like on shape hover or selection change\u2014and extend same diagram to fit into various scenarios. To learn more, read this document about HTML Overlay<\/a>.<\/p>\n

Sample usage<\/em>: addOverlay(“html”, “https:\/\/www.bing.com\/”, 2, 2, 50, 50);<\/p>\n

Use case<\/strong><\/p>\n

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.<\/p>\n

\"Visio
Visio Diagram with Overlay<\/figcaption><\/figure><\/p>\n

Disable Pan Zoom Window<\/h2>\n

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<\/a> to disable the Pan Zoom Window and allow users to consume the diagram without any disruptions.<\/p>\n

Sample usage<\/em>: documentView.disablePanZoomWindow = true;<\/p>\n

Default zoom parameter<\/h2>\n

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).<\/p>\n

Sample usage<\/em>: https:\/\/…-58A5-42CF-BFC7-E29E701D38D2%7D&wdzoom=300<\/strong><\/p>\n

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.<\/p>\n

We\u2019d love to hear new ideas for future JavaScript APIs! Leave a comment below or submit ideas for future releases on our UserVoice<\/a> site. Email us at tellvisio@microsoft.com<\/a> with any questions and follow us on Facebook<\/a> and Twitter<\/a> to stay current on the latest Visio releases.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this blog post, we are happy to announce the public preview of some of the most requested JavaScript APIs. Visio JavaScript APIs are used to extend Visio for the web and build rich mashup scenarios. <\/p>\n","protected":false},"author":69200,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[77],"class_list":["post-3567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","tag-visio"],"acf":[],"blog_post_summary":"

In this blog post, we are happy to announce the public preview of some of the most requested JavaScript APIs. Visio JavaScript APIs are used to extend Visio for the web and build rich mashup scenarios. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/3567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69200"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=3567"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/3567\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=3567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=3567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=3567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}