Triggering onShapeMouseEnter() and onShapeMouseLeave() JavaScript events in Visio Online

I am working on a project where Visio Online process diagrams are embedded within a SharePoint web page, and was surprised that the JavaScript onShapeMouseEnter() event was not being triggered as the mouse cursor moved over some of my shapes. After much searching by myself, and my colleague Seb Craft, we found that only the sub-shapes in the group were firing the event … So what was the problem?

Originally, group shapes in Visio did not have any geometry sections allowed, but they are now, and have been for a few years. So, in my Process shape, there is a single Geometry section in the group, which has no fill the the group level so that other icons can be seen, and only has an outline border when certain data is present. I had chosen to use the NoShow value of the Geometry section to toggle the visibility of an outline shape around all of the sub-shapes of the group shape. Visio Online actually converts the Visio page to SVG and no Path element was being created, which seems obvious now.

So, I changed my strategy to setting NoShow=False, but toggling the LinePattern value between 0 and a non-zero value, actually a number between 1 and 23. Thus the effect is much the same and allows the visibility of the line to be toggled with data value chnages, but even though no outline border is visible when LinePattern=0, it does create an SVG Path element. Therefore, the onShapeMouseEnter event is triggered!

The Visio Online JavaScript overview page provides an example of some code that you can add to a Script Editor web part in SharePoint, and I have a modified version which allows me to paste or write JavaScript snippets into a text box, then execute that against the embedded Visio document.

This is the code snippet that I used to test the onShapeMouseEnter and onShapeMouseLeave events: (ctx) { 
  var document1= ctx.document;
  var page = document1.getActivePage();
  eventResult1 = document1.onPageLoadComplete.add(function (args){
      richApiLog(":Page Load Complete Event:"+
 eventResult2 = document1.onShapeMouseEnter.add(function (args){   
   richApiLog(":OnShapeMouseEnter Event"+
 eventResult3 = document1.onShapeMouseLeave.add(function (args){   
   richApiLog(":OnShapeMouseLeave Event"+
 return ctx.sync().then(function () {
}).catch(function(error) {
  richApiLog("Error: " + error);
  if (error instanceof OfficeExtension.Error) {
   richApiLog("Debug info: " + JSON.stringify(error.debugInfo));

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: