• 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
    • 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➡
      • 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 / Visio 2013 / Using JavaScript to Display Visio Shape Data and Hyperlinks in SharePoint Content Editor

Published on August 16, 2014 by David Parker

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. 

image

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.

image

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.

image

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 articles from Microsoft for some more information:

Save diagrams to SharePoint as web drawings

Use the Visio Web Access Web Part to add diagrams to SharePoint pages

Old JavaScript files

vwalib-1.0.5.js

HTML5Helpers-1.0.0.js

jquery-1.4.2.js

logging-1.0.0.js

start.debug.js

select_by_shape_data.html

Related

Filed Under: JavaScript, SharePoint, SharePoint 2013, Visio 2013, Visio Services Tagged With: Visio Services

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

Comments

  1. bcobra says

    March 6, 2018 at 11:19 am

    Can you share the code to accomplish this?

    Reply
    • davidjpp says

      June 21, 2019 at 11:32 am

      Well, Microsoft have moved on from Visio Service to Visio Online JavaScript API https://docs.microsoft.com/en-us/office/dev/add-ins/reference/overview/visio-javascript-reference-overview

      Reply
      • Naomi says

        October 26, 2020 at 9:25 pm

        I understand that MS has moved to the JavaScript API, but I would still like to see the code for this approach, please! We are using SP on premise so I believe this code will still work fine. Thank you!

        Reply
        • David Parker says

          November 10, 2020 at 12:14 pm

          I have added some links to old files that I used to use, at the bottom of the blog.

          Reply

Trackbacks

  1. Using JavaScript to Find and Highlight Visio Shapes by Shape Data values in SharePoint Content Editor | bVisual says:
    October 9, 2014 at 6:54 pm

    […] 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-sh… ), so now I have added the ability to select shapes by a property value. The main advantage of […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

  • LinkedIn
  • Twitter

Recent Posts

  • Update to LayerManager add-in for non-English users
  • Pushing Data Visualizer in Visio beyond its limits
  • Pushing Data Visualizer in Visio to the limits!
  • Teams Tuesday Podcast Recording about Visio
  • Linking Data to Visio Shapes in Code

Categories

Tags

Accessibility Add-Ins Connectors Containers Data Export Data Graphics Data Import Data Visualizer Educational Excel GraphDatabase Hyperlinks Icon Sets JavaScript Layers Legend Link Data to Shapes Lists MSIgnite MVP Office365 Org Chart PowerApps PowerBI PowerQuery Processes Shape Data Shape Design ShapeSheet ShapeSheet Functions SharePoint 2013 SQL Teams Themes Validation VBA Video Visio Visio 2007 Visio 2013 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

  • LinkedIn
  • Twitter

Search this website

Recent posts

  • Update to LayerManager add-in for non-English users
  • Pushing Data Visualizer in Visio beyond its limits
  • Pushing Data Visualizer in Visio to the limits!
  • Teams Tuesday Podcast Recording about Visio
  • Linking Data to Visio Shapes in Code

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