Diagram Frame sharepoint Visio web part

The web part is a specialized widget to display a Microsoft Visio diagram in a modern SharePoint page. It is somewhat similar to the classic "Visio Web Access" part in "classic" SharePoint.

file

Features

In addition to the stock "Show Document", it adds some features specific for Visio diagrams.

Picking Visio file with File Browser

You can pick Visio diagram using a file browser, with previews for the diagram content. You can pick a diagram to display using the "Browse" button in the web part settings (shows only Visio diagrams). After selecting the file, the file should be shown in the frame.

Select default zoom level

You can set the default zoom level for the diagram. The zoom level is specified in percents. For example, if you select "200" (%) then the diagram will be shown x2 times zoomed.

file

Full width and application page mode support

You can add the web part as an application page. In this mode you can show only the diagram, without any side menus or other elements. Add it using Home => New => Page => App.

file

Support for custom width/height setting

You can specify the width and height of the diagram. Can be in percents (also percent of the screen) or actual measurement units (like the classic "Visio diagram view"). Use with care to maintain proper page layout.

You can pick the following units:

  • % of the screen
  • centimeters
  • inches
  • millimeters
  • points

file

Supports hiding some interface elements

You can optionally hide diagram toolbar, diagram boundary, border.

  • Hide Toolbars: Show or hide the standard toolbars.
  • Hide Borders: Show or hide the borders around the diagram.
  • Hide Diagram Boundary: Show or hide the bound (gray area) around the diagram.

file

Support disabling some interactivity on demand

You can optionally disable hyperlinks, zoom, pan, and the navigator.

  • Disable Hyperlinks: The hyperlinks become not clickable.
  • Disable Zoom: Enable Zoom (Ctrl+Wheel for example)
  • Disable Pan: Disable digram panning
  • Disable Disable PanZoomWindow: Do not show Pan/Zoom window.

file

Select default start page

You can specify which page to show first. You can specify either page name (like "My Second Page"), This only works if the diagram has more than one page. In case page you selected does not exist, it will default to the first page.

Please note that currently you may encounter an issue with this function, for details see:
https://github.com/nbelyh/VisioOnlineSpfxWebPart/issues/2
https://github.com/OfficeDev/office-js/issues/1539

Installation

You can install it directly from the App Store, or you can download a package from GitHub and install it manually:
https://appsource.microsoft.com/en/product/office/WA200002491

How to add an app from SharePoint Store:
https://docs.microsoft.com/en-us/sharepoint/administration/add-apps-for-sharepoint-to-a-sharepoint-site

Download this release:
https://github.com/nbelyh/VisioOnlineSpfxWebPart/releases/tag/1.0

Using the web part

You can add this webpart as a standard building block:

file

Source Code

This web part is an open source web part (you don’t need to pay for it, even if you use it commercially) built with modern SPFx framework. The source code is available on GitHub (link below). If you are interested in adding new features, or found a bug, please open a ticket in the tracker.

https://github.com/nbelyh/VisioOnlineSpfxWebPart