Developer/publisher: Mindlab Systems, Inc. / Paras Dodhia
The Visio development team introduced a new JavaScript API: https://docs.microsoft.com/en-us/javascript/office/overview/visio-javascript-reference-overview?view=office-js
Visio JavaScript APIs fill some gaps in Visio Web Access, are more aligned with Office Extensibility and provide solution-building capabilities on par with existing APIs, and more.
Introducing the solution to embed Visio diagrams onto a SharePoint page
Typical use cases within an organization is to utilize the Script Editor Web part method described in the above post to embed Visio files onto a SharePoint page. This would be ideal if only a few Visio files were to be displayed on pages within a site collection or a sub site.
To save precious configuration/development time and expedite productivity I would recommend to download this solution from GitHub to empower end users to add a web part to a SharePoint page to embed Visio files.
As noted in the below demo it takes a few clicks to get started.
Demo:
GitHub solution download location: https://github.com/mindlabco/visio-embedded
You can expand the solution to do the following as per your organization’s requirement:
Interact with Visio diagram elements like pages and shapes.
- Create visual markup on the Visio diagram canvas.
- Write custom handlers for mouse events within the drawing.
- Expose diagram data, such as shape text, shape data, and hyperlinks, to your solution.
in the example video the diagram is still very small becuase its fiittng the drawing inside the visio online frame inside the web part frame…the user will still need to manually zoom to read the diagram
We are looking at redeveloping our Process and Document Management system and we want to create modern pages with various embedded content as web parts, visio diagrams showing our process flow charts but we need the full height and width of the diagram to be the full height and width of the web part i.e. no grey space or excess borders etc……we want to extend this further by using the Javasctript APi to connect shape data in the diagram to other web parts eg a document library web part……example – shape data field called ActivityID and there is a column in the document library called Activity ID provides the values match I want to create web part connections so that if the user clicks on a specific shape in the visio web part it will filter the doc library web part to show only the documents which correspond to that step of the process……but in terms of the asthetics our end users are just viewing a web page that has a process map embdeed in it but it just needs to look like a picture with clicakble bits that either does something to another webpart or is hyperlink to open an other page etc….if we have have a 16:9 visio page template I want an exact 16:9 ratio webpart so that the diagram frame is the full display of the webpart……we really need to see the development of this type of functionality within modern pages.
Hi Darren,
I hope you are well. Thank you so much for the feedback on this post.
Your use case and technical requirements are very unique in nature. I welcome you to download the solution and update it to your needs. It would be interesting to learn if it is indeed to possible to remove the iframe Visio controls, or even format the iFrame further. I will help you as much as I can. Please watch out fur future posts regarding this.
Thanks so much for your support and readership.
Paras