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 ), 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 the server to refresh the page.

In the following screenshot, I have used the standard web part connections between the BeSmart Ltd document library view and the Visio Web Access control in order to set the Drawing URL.


Once, the diagram load has completed, the JavaScript in the Content Editor, labelled Data Selector, iterates through the shapes collection of the page, and build up an array of shapes with data, and the values for each shape data label.

The Property drop-down list contains all of the Shape Data labels in the page … sorted, but not filtered.


Then, the Value drop-down list contains all of the distinct values for the selected Property.


The Select row then provides the ability to step through each shape in the selection.


The Actions buttons provide the ability to highlight the set of shapes with a choice of colours.


There is a little hit in time whilst the code collects the data labels and values, but this is only when a new page is selected.

For more information about the Vwa namespace of the JavaScript API reference for apps for SharePoint see .


Post Script : I actually had the intention of making a new SharePoint App to do this, but that was before I learnt how difficult it is to communicate between the Visio Web Access control and the new App parts.

Post Post Script : The code provides part of my Visio Services developer training course ( see ).


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: