Viewing Visio Files in Public Websites

Some of my colleagues have asked me how I have managed to include Visio files into this public website, so I thought I would share my secret. Microsoft has kindly provided a File Viewer Web Part for use in SharePoint that appears to be useful in other websites too.

If you view a Visio file that is stored on OneDrive or in SharePoint Online, you can get the </> Embed code for the Visio document from the Show More Commands (…) button in the top right corner. This is normally intended for use within SharePoint pages.

A panel will appear where you can enter the Width and Height of the embedded diagram.

The Embed Code will be something like:

This code assumes that you have permission to see the Visio document within SharePoint, so it is not suitable for general public viewing. Fortunately, the Share option allows you to create a read only link:

This link text can then be copied and used within the embed code yo replace the permissioned access to the file, as follows:

This edited code can then be inserted as custom html into your public non-SharePoint web page, and will display as follows, with active hyperlinks:

I don’t know if the other Microsoft Office web views provide the embed code, but the Visio one can be used and the source document replaced with, for example, and PowerPoint file (this was created with Slide Snippets feature in Visio Plan 2):

Or a Word file (this was created with Export to Word feature in Visio Plan 2):

Or Excel (this was created with Shape Reports feature in all desktop Visio apps):

Intended or not, it is very useful!

Webinar on Visio, SharePoint and Teams using SPFx

I will be presenting a webinar on embedding Visio diagram in SharePoint Online and Teams next month, please register here ! (Or if you missed it live, then watch the recording !) The slides are available at https://www.slideshare.net/bvisual/creating-a-visio-web-part-with-sharepoint-spfx

Triggering Shape Mouse Enter and Leave JavaScript events in Visio Online

learn why shape mouse enter and leave events may not fire in Visio for the web, and how to fix it.

Support for the Visio JavaScript API in SharePoint Modern Framework, and more

Visio Extensibility roadmap from Microsoft Ignite 2018

Visio JavaScript API preview announced

Microsoft have just announced the availability of the new Visio JavaScript Api ( see Visio JavaScript APIs Preview). I presented this last week at the Artic SharePoint Challenge in Oslo where a number of developers took the opportunity to create data-linked Visio diagrams in Visio, and interact with them in SharePoint. Here is an abbreviated…

Using JavaScript to Find and Highlight Visio Shapes by Shape Data values in SharePoint Content Editor

In August, I wrote about Using JavaScript to Display Visio Shape Data and Hyperlinks in SharePoint Content Editor ( see http://blog.bvisual.net/2014/08/16/using-javascript-to-display-visio-shape-data-and-hyperlinks-in-sharepoint-content-editor/ ), so now I have added the ability to select shapes by a property value. The main advantage of using JavaScript in the client is that there is no need to go back to…

Using JavaScript to Display Visio Shape Data and Hyperlinks in SharePoint Content Editor

I like embedding Visio diagrams into SharePoint web pages, but I am not too enamoured with the Shape Info panel and the popup hyperlinks menu because they clutter the diagram surface. So, I thought I would take some time to make an html document that can be included in a Content Editor web part. This…