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.
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).
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 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 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
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.
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.
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
|Prompt||“Enable or disable the hyperlinks in the shapes”|
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.
There are just three modifications that need to be made to each shape which has hyperlinks.
Every hyperlink can be edited using the ShapeSheet so that its Invisible value toggles with the EnableHyperlinks Shape Data row in the page.
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.
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
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…
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. I have implemented the ability to automatically reset the positions before a new game, and I have made a single chess piece shape that…
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 tab. I was trying to think of a suitable demonstration of the co-working and collaboration possibilities, and came up with a reworking of an…
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…
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
I have now finished three articles about the differences between the Visio desktop and web apps, and how you can already create custom templates for Visio Plan 1. Comparing Visio for the Web and Desktop Customising Visio shapes for the web app Key differences between the Visio desktop and web apps Register for my webinar…