ShapeSheet

Published on July 5, 2019 by David Parker

Understanding Visio Navigation Order

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:

[Read more…]

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?

[Read more…]

Published on May 20, 2019 by David Parker

Formatting SharePoint Columns with RGB Color

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:

[Read more…]

Published on May 18, 2019 by David Parker

Ensuring High Contrast Text in Visio Shapes

I am working on a project where I need to ensure high contrast of the text in the Visio shapes for accessibility. At first, I attempted to write my own formula but a colleague pointed my to a website that confirms if the contrast is acceptable ( contrast-ratio.com ), and showed me that a few of my examples failed. So the search was on for a better formula than my own. This lead me to a Stack Exchange answer with just what I was looking for (Formula for Color Contrast between Text and Background). All I needed to do was to convert this into a ShapeSheet formula or two, and then I could apply it to the text inside the shapes.

Any text created with Data Graphic Text Callouts cannot have the high contrast formula applied to because they can be moved independent of the background. However any text added with Insert / Field inside the shape changes between black and white with respect to the FillForegnd value in its background.
Following the article above, it is necessary to calculate the lightness, L, of the FillForegnd, and then to check if black or white text is going to provide satisfactory contrast.

[Read more…]

Published on March 7, 2019 by David Parker

Changing Visio Shape Size and Angle with Linked Data

I was recently laying out a computer room floor plan to scale in Visio, from survey data of the cabinets\racks within it, and it occurred to me that I could work a bit smarter than I first thought. Originally, I was going to just add lots of rectangles, size them, rotate them, and label each them with their name. Then I thought, why not use the Width, Depth and Name columns from the survey data to do most of the work for me? It was so simple to do, and only took a few minutes, so I thought I would share my methodology because it demonstrates how easy it is to work smarter with Visio….

These are the simple steps shown above, written out for your education….

[Read more…]

Published on February 7, 2019 by David Parker

Prototyping Visio ShapeSheet Formulas in Excel

I am working on an application where the horizontal axis of the Visio page represents dates from left to right. In fact, the each of the fixed horizontal grids are 1 day, and I need to have shapes that understand the begin date at the left edge of the shape, and the end date at the right edge of the shape. There is, therefore, a number of elapsed days representing by the width of the shape. However, the underlying grid can either represent all days, or it can be changed to only represent weekdays by omitting the weekends. I struggled to find the best formula to calculate the elapsed days or weekdays between two dates in Visio ShapeSheet formulas, so I turned to Excel to provide an inspiration. The Visio ShapeSheet is modelled on the Excel worksheet, and formulas can be entered into the cells in much the same way. However, the available functions differ since Excel is mainly used for arithmetic and statistics, but Visio is used for graphics and data. In this article, I demonstrate how I used C# and Excel to construct and test formulas for use in a Visio shape.