Customising Visio Shapes for the Web App

In my last article, I explained some of the differences between Visio for the Desktop and Visio for the Web, and how the web app is constantly being enhanced until perhaps it will emulate most of the features in the desktop app. You can always check out Microsoft 365 Roadmap for Visio to see what has been released, and what is coming soon. It is my experience that all improvements are listed here, but that might be because they are not considered a milestone by themselves but are necessary for some features to be possible.

A lot of the smartness of Visio is derived from it’s unique ShapeSheet, which can contain formulas similar to the cells in an Excel worksheet. Open Functions (Visio ShapeSheet Reference) to see what can be programmed in Visio for the Desktop. A lot of these functions also work in the web app, but there is no official list yet. Of course, there are some functions that are never going to be able to work in the web, such as RUNADDONWARGS(…) or CALLTHIS(…).  These function allows for an add-on and a Visual Basic for Applications (VBA) procedure to be called. The former is used extensively for desktop app add-ons, many of which are utilised by Microsoft-provided templates within the desktop app. VBA also does not work within the web, so Microsoft have developed a JavaScript-based interface for Office, initially in Excel (see Office Scripts in Excel on the web (preview) ).   However, VBA is used extensively to create solutions for Excel desktop and it will be many years before support for it can be removed. Visio development usually lags several years behind its more-widespread Microsoft 365, stable mates, so do not expect Office Scripts within Visio just yet. Currently, the application programming interface (api) for Visio web app is read-only, and you can read Visio Add-ins documentation on the Microsoft web. Confusingly, Microsoft decided to re-use the word Add-Ins for these web solutions, even though it is still used for desktop Visio solutions.

If you are searching the web for information about programming Visio in the web, then be aware that there is an earlier Visio Web Access control, which uses Visio Services, that is still supported in SharePoint on Premise, but will officially cease to be supported later this year in SharePoint Online.

There is also a Windows-only Visio Viewer that can be used to view Visio documents, which can also be programmed, as in my own visViewer. This should not be confused with the more recent File viewer which can also be used to display Visio documents, but is web-based, and can be used for Viewing Visio Files in Public Websites.

So, Visio is continuing to evolve, and although custom templates and shapes are not yet officially released, Visio Plan 2 users can get their Visio Plan 1 ahead of the curve now.

SharePoint Modern UX has a recently added cool feature that enables documents to be added o the list of document library templates.

There may be reasons why this quick and simple method is not suitable so read 5 ways to store and reuse document templates in SharePoint for more of an understanding of all of the ways to add a template to a SharePoint library.

However you choose to add a Visio template to SharePoint, it is necessary to understand how to create Visio web app (Visio Plan 1) compliant documents with Visio desktop app (Visio Plan 2, Visio Professional, Visio Standard).

Enhanced Graphics

Although there are some graphic editing features in the web app, there are more available in the desktop app. For example, I dragged and dropped three basic shapes on to the page in the web app, but there is no way, currently, to round the corners. So I continued the edit in the desktop app, and then saved it, and resumed in the web app.

The shapes can be grouped together in either app, making it easier to move the shapes as one and to add more features to them.

Comments

Comments can be added, and responded, to shapes and pages in the web or desktop app. So, a web app user could leave notes for a desktop app user to complete.

Hyperlinks

Hyperlinks cannot be added to shapes in the web app, but they can be added in the desktop app.

Unfortunately though, it is too easy to open the target web page in either the web app or web file viewer by simply selecting a shape that has a visible hyperlink. In fact, there are three different scenarios:

• Click opens the target web page in a new browser tab, and attentions it
• CTRL+Click opens the target web page in a new browser tab, but does not attention it
• SHIFT+Click opens the target web page in a new browser

Shape Data

Every shape, page or document in Visio can have data embedded in it. There is no end user interface to data in a document, but there is a Shape Data panel for shapes and pages that can be edited in the desktop app, or viewed in the web file viewer. There is no UI at all for this shape data in the web app, but it does support it. It has to, as it is utilised by many of its features, and by the Visio Data Visualizer add-in for Excel.

Knowing this, wouldn’t it be useful to be able to disable these hyperlinks some of the time? This makes it far easier to edit the diagram in the web app. Wouldn’t it be useful if you could do this whilst using the Visio web app? Well, it is possible for the Visio desktop user to add this ability to the shapes that hyperlinks are added to, as I will show later.

Of course, this setting will also affect anyone else who happens to be looking at the Visio page through the file viewer, where the Shape Info panel for the page will show the value of the Enable Hyperlinks property. The Shape Info panel will list any hyperlinks that are on a selected shape, but they will be disabled, and greyed out.

Actions

These are the right mouse menu options that can be found on a shape in both the web and desktop app. In fact, they are also available in the page if you are using the desktop app. They are not visible in the web file viewer.

They can be used in the web app to toggle the value of a True/False [Boolean] property in a shape or a page, as in the following screenshots, where I have enhanced the shape to display a Link Emoji character if hyperlinks are enabled in the page. I have also displayed a ButtonFace image to the custom right mouse menu action “Enable Hyperlinks”.

The users experience in the web app is very similar, except that the cursor does not yet indicate that there is a hyperlink present, but fortunately we now have a visual indicator.

Moreover, the File Viewer does display the hyperlink details on mouse over, and the hyperlink is also available from the Shape Info panel. Lastly, the hyperlink is also present in the pdf that can be downloaded.

Putting it all together

The enhancements must be done with the desktop app, but the diagram remains editable in the web app. My strategy for this was to insert a Shape Data row, named EnableHyperlinks into the Visio page, and then the Invisible property of every hyperlink in a every shape on the page can use this page setting. This has the effect of enabling or disabling all of the hyperlinks in one go.

The Page

Shape Data rows can be designed using the Define Shape Data dialog opened from the right mouse menu option in the Shape Data panel header.

However, there is no easy interface for creating Actions, so I normally dive straight into the ShapeSheet:

Shape Data row

Actions row

The page can have a right mouse menu option to toggle the value of the EnableHyperlinks Shape Data row in the page, but this will only be accessible in the desktop app.

Each Shape

There are just three modifications that need to be made to each shape which has hyperlinks.

Hyperlinks

Every hyperlink can be edited using the ShapeSheet so that its Invisible value toggles with the EnableHyperlinks Shape Data row in the page.

Actions

Each shape can have a right mouse menu action to toggle the value of the page EnableHyperlinks Shape Data row, and it will be accessible in both the desktop and web app.

Insert Text Field

This can be done using the Insert / Text / Field dialog, and with the Custom Formula=IF(ThePage!Prop.EnableHyperlinks,”🔗”,””)

This will display the 🔗 Emoji if the value of the EnableHyperlinks Shape Data row of the page is True.

What next?

So you now have a way to create better graphics, add right mouse menus, data and hyperlinks on shapes for general use by Visio Plan 1 users. Visio desktop app users can create a corporate template with custom shapes to improve consistency, presentation and branded appearance for all users of Visio documents.

Register for my webcast Providing Custom Templates for Visio web app on 25th June 2020.

Related Microsoft Articles

Use design features in your drawing that are compatible with Visio for the web – Visio (microsoft.com)

Why can’t I open a diagram for editing in Visio for the web? – Visio (microsoft.com)

Custom Shapes in Visio in M365 and Web

Microsoft recently announced the ability to access the shapes in the document stencil whilst using Visio for Web … if you have a Visio Plan 2 license. So, I thought I would make it clear what that means for custom shape developers. There are now three licenses that provide the ability to edit Visio diagrams…

Play Backgammon with Visio

Still in lockdown on holiday, so I thought I would create a version of backgammon that can be played with Visio for the web. This was inspired by my original Visio tutor, the late David Edson, who created a Visio backgammon document which included macros. Macros are not available in Visio for the web, so…

Play Chess with Visio in Teams

[Update : a new version of this file allows Visio for M365 users to edit/play with see Making Custom Shapes for Visio for M365] Following on from my last article about playing checkers with Visio in Teams, I decided that I should also revisit my earlier Visio chessboard to make it work in Visio online.…

Play Checkers with Visio in Teams

[Update : a new version of this file allows Visio for M365 users to edit/play with see Making Custom Shapes for Visio for M365] We are all spending more time in Teams or SharePoint nowadays, but not everyone knows that Visio documents can now be shared and collaborated with, and even set as a Teams…

Visio now and beyond at Microsoft Ignite 2020

I have presented at the last four Microsoft Ignite conferences and was part way through the world-wide tour when this pandemic began. I was looking forward to visiting New Orleans for this years shindig, but, alas, we are now in a new world where in-person events are a fond memory. Fortunately, Microsoft have the tools…

Learn about Visio Data Visualizer in Excel, Visio in Teams and Power Automate

I recently wrote a series of articles about some of the new capabilities of the Visio desktop and web app. 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