Visio Javascript API for VIsio Online

Microsoft

Hello,

 

Visio Online  is the new way to view and share Visio diagrams on the web. We are pleased to announce general availability of Visio JavaScript APIs . These APIs are the first step towards enabling developers to extend capabilities of Visio Online in a SharePoint page. Here are few resources to get you started:

 

1. API Release Blog on Dev.Office.com

2. JS API Reference Documents

 

If you have been using Visio Web Services API, we request you to migrate your solutions to new Visio Online JavaScript APIs. Here is the migration blog that will guide you through the process.  

 

Note that these APIs are not applicable for Office Add-ins Platform.

 

If you have any questions, feel free to drop a comment below or mail to TellVisio [at] Microsoft [dot] com

 

Regards

Visio Product Team

 

11 Replies
In our company we have office 365 and sharepoint since August. We want to publish certain documentation in sharepoint for the knowledge of all the employees. Some of the documents are in Visio and we are using the javascript api to publish it. But we have some problem caused because we do not know and we do not find how to control the style of the iframe content. We want to remove the border, the scroll and the margins, but we do not know how or we have seen any example.

Thanks David for your query. Adding @Rahul.Mittal from my team who can best answer this question.

Hi David

 

It is good to hear that you want to use Visio Online APIs for publishing documents on SharePoint.  You can find more details in the API reference and some examples in this blog.

 

Regarding the issues faced, you can change the styling of the iframe by getting the iframe element through it's id and applying the properties. Something like

document.getElementById("embed-iframe").style.marginTop = "10px";
 

As scroll bars help the user in panning the diagram, you can hide the scroll bars, by disabling the pan capability by calling the below API.

document.view.disablePan = true;

 

Regards

Rahul Mittal | Microsoft Visio

 

 

Thanks for your help. But there is still some issues, i would like to remove the white margins so the image fills up the whole space, and to completely remove the iFrame´s border .

Hi

 

You could try the below options to get rid of the extra space and borders.

 

1. If your diagram canvas has white space, please use 'Fit to Drawing' option available in Visio Desktop. See attached.

2. Use the document.view.hideDiagramBoundry = true; to hide the diagram boundary.

3. Change the width/height of the iFrame to fit your drawing page, by using the below code during initialization:

  var session = new OfficeExtension.EmbeddedSession(

          url,

          {

              id: "embed-iframe",

              container: document.getElementById("iframeHost"),

              width: "400px",

              height: "100%"

          });

4. There is an API under development for completely hiding the iFrame borders. application.showBorders = false;

The API should be available by March and you could check this page for updates related to this API.

 

Regards

Rahul Mittal

Hi

 

I'm using Visio Online inside Sharepoint page (classic): script editor web part, iframe .....

 

In IE11 there this error in console:

 

      SCRIPT70: Permission denied
      visio-web-embedded.js (20,38847)

 

Everythins seems to be working but whats that error?

 

Jouni

 

 

 

Hi Jouni

 

Sorry that you faced this. Would you be able to provide the code snippet where you are seeing this console error?

 

You can also use tellVisio [at] microsoft [dot] com for providing more details regarding this or any other feedback that you have related to the Visio Online APIs.

 

Regards

Rahul Mittal | Program Manager | Microsoft Visio

 

Hello

 

Are there any plans for the API to work on web parts on modern pages and more specifically be able to do web part connections...send shape data to, highlight shapes from, choice filters etc

 

Example - Looking to create SharePoint pages where a user can select a shape from the visio web part (process flow chart) and that will filter the document library web part to show the documents corresponding to the step within the process. This works with the shape data value corresponding to a column value in the document library.

 

The API will work on classic pages...any sign of when this will be available in MODERN?

 

Regards

Darren

Hello everyone, 

Please refer to my blog post on embedding Visio files on a SharePoint page - hope it helps and makes life easier.

https://blog.dodhia.co/github-update-embed-visio-files-onto-a-sharepoint-page-with-this-sharepoint-o...

Thanks!

Paras

I have created a sample SharePoint Framework web part using the Visio JavaScript API some time ago, in case someone is interested.

 

You can check the source code here:

https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-visio

 

And I have a blog post with some details here:

https://joelfmrodrigues.wordpress.com/2018/08/27/sharepoint-framework-with-visio-javascript-apis/

 

Any feedback is welcome.

 

 

Hello @Rahul.Mittal ,

 

The link you mentioned in the above post regarding API doesn't exists anymore. Could you please share the latest links of API's.

I am very new to Visio online.

I am using Embed web part on Modern Site to show Visio file .I need to hide the header and footer of it.

Would you like to put some highlights on it, how can I achieve it?