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 html document includes JavaScript to read the hyperlinks and Shape Data of each selected shape, and, besides providing the opportunity to style the resultant table, allows you to interpret the content of the Shape Data values, and even the hyperlinks. I have shown an example where the multiple hyperlinks on the selected shape are clickable in the top list, and those interpreted from the values in Shape Data rows are clickable, and listed below the regular Shape Data rows. Of course, I could have combined the two types of hyperlinks into one list, separated from the regular Shape Data. Note that the values in the built-in Shape Info panel are not clickable. 


So, this means that I can do away with the Shape Info panel and the hyperlinks popup within the Visio Web Access control, and provide hyperlinks, buttons, images, media files, or whatever, in the Content Editor html document. Therefore, I untick the Show the Shape Information Pane option, and tick the Disable Hyperlink option in the web part editor.


Then you can remove the clutter over the top of my beautiful, complex diagram – Smile. In this example, I included some optional style instructions for the html tables.


For developers of primarily desktop programmes, like myself, JavaScript can seem like a step backwards in some ways, but the unstoppable adoption of mobile devices consuming web-based apps makes it unrealistic to remain chained to an out-dated paradigm.

There are some benefits beyond mobility too. For example, for many years, we Visio developers have requested a better Shape Data window in Visio, but the response has been to develop our own as part of our add-in. However, this is not a straight forward affair, and I perhaps complicated it a little by generally choosing to embed WPF XAML within the necessary WinForms control. Then there is the need to respond to selection changed events, or multiple selected shapes, and finally the different editing experiences required for different data types – single or multiple line for text; date or time selector for datetimes; up/down controls for numbers; etc. The Visio Web Access control JSOM (JavaScript Object Model) does not confuse us with the ability to edit or even to recognise data types, because you only get the label; value; formatted value and format for each Shape Data row. This is quite restrictive, but it means that the programming options are limited, leaving you with little to do be style the table… and only a single selected shape is possible too.

The logic steps for the JavaScript in the html is:

A shape is selected…

Get an array of its hyperlinks

    Iterate through each item (description and value)

       Write out an html link in a table row

Get an array of its shape data

    Iterate through each item (label, value, format, formatted value)

        Check the value

        If looks like a hyperlink …

            If media file, write out an image or media content html table row

            Else write out an html link in a table row

        Else write out label and formatted value.

Visio 2013 added a new way for commenting, and these are also available for each selected shape, but I did not want to add those to this example.


I also look forward to a day when I can use the Visio Web Access control, or similar, in public web pages…


Check out these blog articles from Chris Hopkins of Microsoft for some more information:


3 Responses to “Using JavaScript to Display Visio Shape Data and Hyperlinks in SharePoint Content Editor”

  1. Using JavaScript to Find and Highlight Visio Shapes by Shape Data values in SharePoint Content Editor | bVisual Says:

    […] Using JavaScript to Display Visio Shape Data and Hyperlinks in SharePoint Content Editor ( see… ), so now I have added the ability to select shapes by a property value. The main advantage of […]

  2. bcobra Says:

    Can you share the code to accomplish this?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.


O365 and SharePoint

Simplify Tasks

Want to learn the simple way?

Paul Turley's SQL Server BI Blog

sharing my experiences with the Microsoft data platform, SQL Server BI, Data Modeling, SSAS Design, Power Pivot, Power BI, SSRS Advanced Design, Power BI, Dashboards & Visualization since 2009

John Goldsmith's visLog

be smart, be clear, be visual ...

Mo's blog

Personal views on Dynamics 365 for Operations and Technical Architecture.

Chris Webb's BI Blog

Microsoft Power BI, Analysis Services, MDX, DAX, M, Power Pivot and Power Query

Azure Solutions for Office 365, and more...

Rob Fahrni



Life with Visio and other Microsoft Toys!

Nilsandrey's Weblog

Just another weblog

Things that Should be Easy

Every so often (too often in the IT industry) I encounter things that should have been very easy to do but turned out to be far too complicated. My favorite topics include SharePoint, .Net development, and software architecture, especially distributed systems.

Visio Guy

Smart graphics for visual people

%d bloggers like this: