I will be presenting a webinar on embedding Visio diagram in SharePoint Online and Teams next month, please register here ! (Or if you missed it live, then watch the recording !)
The slides are available at https://www.slideshare.net/bvisual/creating-a-visio-web-part-with-sharepoint-spfx
I have been asked by a colleague to publish my hack for enabling Visio files to be viewed by everyone with the Visio for the Web component in reading mode on this website, or indeed any other public web site. So, here goes ….
The first thing is to view the Visio file in an online browser. The file must be stored in OneDrive (or SharePoint Online if permission for guests available). The View online option is available from the right mouse menu of a selected Visio file, if viewing in Windows Explorer, or simply open the file, if listed in the browser. Note the “…” (More Commands) button in the top right corner.
Visio defaults to tabbing from shape to shape in the order that the shapes are added to the page. However, this can end up with an illogical order if you are trying to navigate a diagram with the keyboard, which is often an accessibility requirement. Fortunately, Visio provides a Diagram Navigation pane so that the tab order can be changed, but how does it do it? The following short video shows how the navigation order, displayed as numbers in each shape, is assigned a value as soon as the order is edited.
Accessibility is important in my current project, so understanding how this happens was important to understand, and to surface this order to JavaScript, as we want to list the shapes in a logical order too.
I managed this by adding a User.visNavOrder to the master shape of all the significant masters, and a hidden Shape Data row, labelled “Navigation Order“. This has the following formula for its value:
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?
I wrote about ensuring high contrast between text and the background of Visio shapes in my last article. The RGB values actually came from an imported SharePoint list that has a lookup to a list that contains the RGB values of named colours. Having solved how to display the correct text colour for high contrast in Visio, I wanted to the same in a SharePoint column, but first I had to learn how to use the RGB values to format the background colour.
My good friend Chris Roth, aka VisGuy, has already produced Visio ShapeSheet formulas to convert RGB values to Hex values. so I adaptively re-used his idea to create a formula that I could use in a SharePoint calculated column, called Hex.
First, I compressed his multiple User-defined Cells rows into a single formula:
It was the last day of the MSIgnite conference today, and the video of the final presentation about Visio was worth staying for, even though some of it was content I knew about, and have mentioned in previous posts this week ( see Dive into the world of data-driven operation intelligence with Microsoft Visio, Excel and Power BI). However, there was some content I was particularly pleased to see, and that was about support for the Visio Online JavaScript API support in Modern SharePoint Framework. I have pulled out some of the key slides below, but check out the full session for more information.
The hardworking Microsoft Visio product development team have worked hard to almost match all of the functionality of the old server-side Visio services control, but they haven’t quite got everything. So I cheered when I hear that support for html overlays are in the roadmap to be supported! All I ask for now (almost) is layer control, and I will be very happy.
They also stated that they will be enabling all this functionality for non-SharePoint web sites in the future!
Go to http://aka.ms/voapireference got more details.
