“I just wanted to add my thanks for all your help in getting this project up and running. I think we now have a product that far exceeds what we had previously, and we move [our organisation] into a much better position for integration across all of its domains and locations.”
Phil Sheldrick, Head of Quality Control, DE&S, Ministry of Defence
What do you do when you your organisation is undergoing a digital transformation by migrating all your IT systems into Microsoft Office 365 and SharePoint Online, and you have a legacy process mapping application that is contains vital business information but is incompatible going forward?
This was the question faced by a large UK government department and their Microsoft implementation partner, CPS. The legacy business management system had the ability to create drill-down process flow maps with integrated hyperlinks to either internal or external documents. A considerable amount of effort had been made by a small number of editors to create these flow diagrams, and these were available in a read-only web portal for exploration by authorised user worldwide. The client was sceptical that a similar look and feel or ease of use could be found within Microsoft technologies, and, most importantly, that their existing system could be migrated with as little human intervention as possible.
Fortunately, CPS could phone-a-friend, and asked David Parker, Microsoft Visio MVP and owner of bVisual, whether it could be done. CPS have partnered with bVisual several times over the years, ever since Microsoft asked them to collaborate on creating the WBS Modeler tool, by combining the CPS’s expert knowledge of Microsoft Project with bVisual’s expert knowledge of Microsoft Visio.
David visited the client, and discovered that, as usual, Visio was on some workstations already, but they had little understanding of its full capabilities, or how Visio Online allows them to integrate diagrams within SharePoint web-pages. He also found that the existing process diagram system had the ability to export into XML, which could provide a potential route to offering a conversion process. It was decided that CPS could provide the project management, SharePoint and web development skills, and together a plan was formed, approved and embarked upon.
The Constraints
There were a number of constraints imposed upon the solution, some of which were known at the outset, but others became apparent during the development phase. The client is a government agency with a secure network, so most of the development had to be implemented on their own workstations with a restricted account. This meant that no advanced web development tools were permitted, and no custom add-ins were allowed for either SharePoint or Visio. The latter caused a complete re-think of how the proposed Visio templates would be implemented. The former meant that a hybrid SharePoint Classic and Modern had to be implemented. In addition, the version of Visio, and other Office applications, available on the corporate desktops lagged behind that in the less-secure world.
The Office 365 / SharePoint solution
SharePoint has many uses in this solution which combined to make this framework an excellent choice. First of all, it is the document repository for not only the Visio process diagrams but also for most of the supplemental information linked to the activity shapes in these diagrams. Secondly, it holds the lists of linked categories and roles that each of the activities could be assigned to. Thirdly, it provides full access control of editing and viewing permissions. Fourthly, it provides a search function for not only the Visio documents, but also the text on each shape in the diagrams. Fifth, and lastly, it provides an intranet web-site that can host interactive pages.
A process diagram document library was created with customised extra columns for required properties, and an approval workflow. The custom Visio template was the only content type provided for this library, but other custom Office 365 document templates were provided for the supplementary information document library. SharePoint lists were created for the roles that each activity could be assigned to, and another for an optional category along with an associated colour specification.
The Visio solution
The solution utilises Visio Online Plan 2 for the editors and Visio Online embedded in a SharePoint Online web-page for the viewers. The custom Visio template, although simple in its initial appearance, features some advanced Visio capabilities that requires a little explanation. As previously stated, no code was permitted in the editing environment, and the process maps are to be created from within SharePoint Online. The numerous Visio desktop users who are going to be creating new or editing existing documents will only have the out-of-the-box Visio Online Plan 2 (previously called Visio Pro for Office 365), and would not have any extra templates, stencils or add-ins installed. Therefore, the solution had to be delivered as a Visio document without any extra stencils or code. Consequently, the small number of custom Master shapes are provided in the exposed Document Stencil. There are a number of pre-existing External Data recordsets providing optional links to the SharePoint libraries and lists. There is a single page with one Title Block shape on it, that initially displays an Unlinked watermark.
In fact, there are a number of hidden Master shapes too, as all of the default Container, Callout and Connector shapes have a slight customisation for better behaviour. These are all elements of the Structured Diagram concept that was introduced in all editions of Visio in 2010. If these features are utilised, then one shape can “know” that it is within another, for example, and thus be able to reference any of its properties, such as Shape Data. The External Data window displays the rows from a data source, in this case SharePoint, and this was a feature that was added into Visio 2007 Professional and above editions. This enables data values from the source to be automatically added to selected shapes, and for these value to be refreshed if the source values are changed.
The template includes some Validation Rules, another feature that was introduced in Visio 2010, that provides feedback on a number of issues, such as incomplete connections, missing data values and non-approved shapes. Additional feedback is provided by the connectors turning red if they are not properly connected at both ends.
For the most part, the map designer merely has to drag and drop shapes from the stencil onto the page, and to drag and drop rows from the External Data window onto the shapes to link data. Icons automatically appear in the corners of the Activity shapes if they have hint text present, drill-down, or hyperlinks to supplemental information.
Drill-down to other process map documents are also created by simply dragging and dropping the target row from the Processes External Data window on to an Activity shape. Not only does this provide a double-click action to open the other map, it also provides three hyperlinks for the designer. The first opens the target document in Visio, the second opens it in Visio Online, and the third opens it within the custom SharePoint web page.
These Visio documents are currently considered too complex to be edited by Visio Online Plan 1, as this does not support shape data, hyperlinks or custom shapes. However, Visio Online Plan 2, with the correctly assigned access permission, can edit them in Visio Online Plan 2. The client was left with a digitally-signed Visio macro-enabled stencil with a routine to re-create the External Data links to a document, should a user accidently delete or edit them.
The Migration
The Xml export of the existing application provided the size and co-ordinates of each of the shapes, along with the text, drill-down links to other activities, and hyperlinks to supplemental information. bVisual wrote a migration script in C#, which was run in an ad-hoc scripting tool, LinqPad, to convert the Xml into a couple of hundred one-page Visio documents created from the custom template. This script achieved 100% conversion of shapes and data, with just a little visual tidying up of the graphics. This was far quicker than the feared man-weeks that would have been necessary if all the two hundred process maps had to be re-created manually.
The Intranet Web Portal
The branded intranet SharePoint site (hence no images here) features an embedded Visio Online web-part, with custom JavaScript code providing interaction with the process maps. An information panel to the right of the map lists all the important shapes on the Visio page, and reads their data, and any hyperlinks they might have. So, whenever an Activity shape is selected, a panel to the right of the diagram focuses it and expands the discovered id, name, or description, along with any drill-down or supplemental links. The user can choose to follow a drill-down link, which will then display the target map in-situ or click a supplemental information link to open it in a new browser tab or associated application. The web page can be addressed with a parameter that specifies the document identifier, thus a link can be provided direct to the required map. Similarly, search results can navigate directly to the relevant page and diagram. A user can also select an item from the information panel, and thus selecting it with in the map too.
This project did not require the full range of the capabilities of the Visio Online JavaScript API, as there was no need to highlight a number of shapes, or to overlay with any images or text. There was also no requirment, as yet, to integrate these maps with PowerBI using the Visio custom visual. These will surely be considered in the future, as they could provide increased discoverability and comprehension.
Resources
- Mastering Data Visualization with Microsoft Visio Professional 2016 book
- Microsoft Visio 2010 Business Process Diagramming and Validation book
- Visualizing Information with Microsoft Office Visio 2007 book
- Containers, Lists and Callouts in Visio 2010
- SharePoint Framework with Visio JavaScipt APIs
Solution created in collaboration with CPS