Thursday, March 21, 2019

Embedding a Visio Diagram in SharePoint Online using Visio JavaScript API


Couple of reasons,
  1. Time taken to load the diagram using Visio Web Access web part is very high.
  2. Microsoft no longer is recommend to use Visio Services with SharePoint Online.

We no longer recommend using Visio Services (also called Visio Web Access)  or the Visio Web Access Web Part with SharePoint Online. These features will be retired from Office 365 and SharePoint Online. We will stop Visio Services and stop supporting the Visio Web Access Web Part in September 2018.
Note   In SharePoint Server, these features will be supported in accordance with the Microsoft Lifecycle Policy.
Use Visio Online from now on. Visio Online is your choice for future solutions in SharePoint Online. Visio Online is a new way to view, edit, and share Visio diagrams on the web. For more information, see View, create, and edit a diagram in Visio Online and Visio Online help.

Steps followed

  1. Edit the page you want to add the diagram.
  2. Insert Script Editor web part into the page
  3. Click on the "EDIT SNIPPET" and paste the following code
    1. Replace the value of the url with the "Embed URL" of the Visio  Online document

Only reason why I used the above approach is to hide the toolbars and borders.

You can use the following approach as well.

  1. Just copy the "Embed Code" of the Visio Online document

  1. Copy  that into an "Embed Code" snippet in a page.