• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

bVisual

  • Home
  • Services
    • How Visio smartness can help your business
    • Visio visual in Power BI
    • Visio Consulting Services
    • Visio Bureau Services
    • Visio Training and Support Services
  • Products
    • Visio Shape Report Converter
    • SS Plus
    • LayerManager
    • visViewer
    • Metro Icons
    • Rules Tools for Visio
    • The Visio 2010 Sessions App
    • Multi-Language Text for Visio
    • Document Imager for Visio
    • multiSelect for Visio
    • pdSelect for Visio
  • Case Studies
    • Case studies overview
    • Using Visio in Education for GIS
    • Visualizing Construction Project Schedules
    • Visio Online Business Process Mapping
    • Nexans Visio Template
    • CNEE Projects, WorldCom
    • Chase Manhattan Bank
  • News
    • Recent news
    • News archive
  • Resources
    • Articles➡
      • ShapeSheet Functions A-Z
      • Comparing Visio for the Web and Desktop
      • Customising Visio Shapes for the Web App
      • Key differences between the Visio desktop and web apps
      • Using the Visio Data Visualizer in Excel
      • Using Visio in Teams
      • Creating Visio Tabs and Apps for Teams with SharePoint Framework (SPFx)
      • Designing Power Automate Flows with Microsoft Visio
      • Innovative uses of Visio Lists
    • Webcasts ➡
      • Visio in Organizations
      • My session and other Visio sessions at MSIgnite 2019
      • Power up your Visio diagrams
      • Vision up your Visio diagrams
      • The Visio 2010 MVP Sessions
    • Visio Web Learning Resources
    • Books➡
      • Visualize Complex Processes with Microsoft Visio
      • Mastering Data Visualization with Microsoft Visio
      • Microsoft Visio Business Process Diagramming and Validation
      • Visualizing Information with Microsoft Visio
  • Blog
    • Browse blog articles
    • Visio Power BI articles
    • Visio for Web articles
    • A history of messaging and encryption
  • About us
    • About bVisual
    • Testimonials
    • Bio of David Parker
    • Contact Us
    • Website Privacy Policy
    • Website terms and conditions
    • Ariba Network
You are here: Home / Visio / Triggering Shape Mouse Enter and Leave JavaScript events in Visio Online

Published on June 21, 2019 by David Parker

Triggering Shape Mouse Enter and Leave 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!

Testing for mouse events


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:

Visio.run(function (ctx) {
  var document1= ctx.document;
  var page = document1.getActivePage();
  eventResult1 = document1.onPageLoadComplete.add(function (args){
      richApiLog(Date.now()+":Page Load Complete Event:"+
	JSON.stringify(args));  
   });
 eventResult2 = document1.onShapeMouseEnter.add(function (args){   
   richApiLog(Date.now()+":OnShapeMouseEnter Event"+
	JSON.stringify(args));
   });
 eventResult3 = document1.onShapeMouseLeave.add(function (args){   
   richApiLog(Date.now()+":OnShapeMouseLeave Event"+
	JSON.stringify(args));
   });
 return ctx.sync().then(function () {
     richApiLog("Success");
  });
}).catch(function(error) {
  richApiLog("Error: " + error);
  if (error instanceof OfficeExtension.Error) {
   richApiLog("Debug info: " + JSON.stringify(error.debugInfo));
  }
});

Related

Filed Under: JavaScript, Office 365, Process Flows, ShapeSheet Formulas, SharePoint, SOP Web Pages, Visio, Visio for Web, Visio Online Tagged With: JavaScript, ShapeSheet

About David Parker

David Parker has 25 years' experience of providing data visualization solutions to companies around the globe. He is a Microsoft MVP and Visio expert.

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

  • LinkedIn
  • Twitter

Recent Posts

  • Co-authoring and Commenting with Visio Documents
  • Fixing dimensions of 2D shapes
  • Merging Linked Data from Similar Tables
  • Smart Radio Buttons and Check Boxes in Visio
  • Using Button Face Ids in Visio

Categories

Tags

Accessibility Add-Ins Connectors Containers Data Export Data Graphics Data Import Data Visualizer Educational Excel GraphDatabase Hyperlinks Icon Sets JavaScript LayerManager Layers Legend Link Data to Shapes Lists MSIgnite MVP Office365 Org Chart PowerApps PowerBI PowerQuery Processes Setup and Deployment Shape Data Shape Design ShapeSheet ShapeSheet Functions SharePoint 2013 SQL Teams Validation VBA Video Visio Visio 2007 Visio for the Web Visio Online Visio Services Visio Viewer Webinar

Footer

bVisual Profile

The UK-based independent Visio consultancy with a worldwide reach. We have over 25 years experience of providing data visualization solutions to companies around the globe.

Learn more about bVisual

  • Amazon
  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Search this website

Recent posts

  • Co-authoring and Commenting with Visio Documents
  • Fixing dimensions of 2D shapes
  • Merging Linked Data from Similar Tables
  • Smart Radio Buttons and Check Boxes in Visio
  • Using Button Face Ids in Visio

Copyright © 2025 · Executive Pro on Genesis Framework · WordPress · Log in