Installing the Diagram Frame web part to SharePoint Online (2022 version)

This article explains how to install the Diagram Frame web part in modern SharePoint online. The installation experience has evolved a bit over time, so this refers to the current date, August 2022, and SharePoint online. Now it is hopefully much more straightforward than before.

The "diagram frame web part" this article refers to:
https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/

Admin and non-admin user experience

Please note that the installation experience differs for admin and non-admin users. Admin users can install the web part directly; while non-admin users need to send request to admin to approve the application for use in the organization. Please note that the request is sent not to me but to your SharePoint administrator for approval. As soon as the request is approved you should get the notification and should be able to start using the web part.

Installation steps

AppSource

To install the Diagram Frame web part, navigate to the App Source web site, and locate the web part there:

https://appsource.microsoft.com/en-us/product/office/WA200002491?tab=Overview

file

Then you need to click "Get it now" button.
You may be asked to fill information about yourself for the app source, if you are using it for the first time.

Continue reading“Installing the Diagram Frame web part to SharePoint Online (2022 version)”

SvgPublish 1.3.3 released – SharePoint export related fixes

This maintenance release of SvgPublish Visio extension adds some fixes related to SharePoint export to improve the stability. Recommended if you are using export to SharePoint to make better use of features added in the previous release.

Download
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.3.3.msi

Visit the extension’s page:
https://unmanagedvisio.com/products/svg-publish

Continue reading“SvgPublish 1.3.3 released – SharePoint export related fixes”

SvgPublish 1.3.2 released – new selection options, sidebar options, simplified SharePoint settings

Download the latest version:
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.3.2.msi

The extension’s page
https://unmanagedvisio.com/products/svg-publish

Highlights

  • Advanced selection options
  • Filter search results by properties
  • Simplified SharePoint settings
  • Bugfixes and minor enhancements

Continue reading“SvgPublish 1.3.2 released – new selection options, sidebar options, simplified SharePoint settings”

SvgPublish use case: Principalities in Medieval Russia

This post is a customer use case: using SvgPublish Visio extension to modernize website (Principalities of Medieval Russia). The Runivers team uses the SvgPublish to update the site, and recently shared a nice example. This use can also demonstrates some new features in the SvgPublish added recently, like custom selection settings and sidebar options. The interactive diagram basically looks like this (click to navigate to it)


https://nbelyh.github.io/svgpublishdemo/demo/principalities.html

This diagram is now added to the list of examples here. You can find also the source Visio file there:
https://unmanagedvisio.com/products/svg-publish/html-export-demo/

Continue reading“SvgPublish use case: Principalities in Medieval Russia”

SvgPublish Extension 1.3.1 released

Download the latest version:
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.3.1.msi

The extension’s page
https://unmanagedvisio.com/products/svg-publish

What is new in this release

  • [bugfix] cursor "pointer" for no reason on the shapes #47
  • [enhancement] Feature to automatically pick up URLs in properties #45
  • [enhancement] css classes are not set for background shapes #40
  • [enhancement] simple bounding-box selection and hover as option instead of "heavy" svg filters #17
  • [enhancement] simple checkboxes option instead of toggles #49

Continue reading“SvgPublish Extension 1.3.1 released”

Embed Visio diagram in modern SharePoint pages

My wrapper SPFx web part for embedding Visio diagram in modern SharePoint page has been just published in the Microsoft store (it’s free and open source).

The app has been validated by Microsoft SPFx validation team and now available in the app catalog:
https://appsource.microsoft.com/en/product/office/WA200002491

The WebPart details:
https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/

Diagram Frame WebPart

The WebPart embeds Visio diagram in a modern SharePoint page with richer display options (default zoom, page, etc) thant the default "File Viewer". It is somewhat similar to the "Visio Web Access" web part in the "classic" SharePoint. In addition to the stock "File Viewer" web part which you could use to display Visio diagram, this one features the following:

  • File Browser
    File browser, specific to Visio diagrams
  • 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 the page you selected does not exist, it will default to the first page.
  • Select default zoom level
    You can set the default zoom level for the diagram.
  • Full width and application page mode support
    You can add the web part as an application page.
  • 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”).
  • Support disabling menu items
    You can optionally hide diagram toolbar, diagram boundary, border
  • Support disabling some interactivity
    You can optionally disable hyperlinks, zoom, pan, and the navigator

For more information, please check the web part site:

https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/

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

Support

Full source code:
https://github.com/nbelyh/VisioOnlineSpfxWebPart

If you have any ideas or found a bug, feel free to file an issue on GitHub
https://github.com/nbelyh/VisioOnlineSpfxWebPart/issues

Sharing Visio diagrams in social media

When you share any link on LinkedIn, Teams, Facebook, or other social platform, it extracts a "preview" picture, like image, title and description.

Any site can provide this information by incorporation "open graph" tags into the HTML head. Many social networks, such as Facebook and twitter, even have a rules for the image size and text length. Read more about the open graph links on the open graph site

Check out what it looks like with Facebook:

The SvgPublish now also supports these media tags. Means, you can publish a diagram and then just paste a link to it in Teams or LinkedIn, and the link will show a preview, with a link to the published version.

Continue reading“Sharing Visio diagrams in social media”

SvgPublish 1.3 released

SvgPublish Extension 1.3 released

The extension’s page
https://unmanagedvisio.com/products/svg-publish/

Download the latest version:
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.3.0.msi

Improvements in this release

  • New template editor with live preview
  • Support both global and per-shape templates
  • Cards (OG) support metadata for social sharing
  • GitHub authentication fixed upload changed to put all files in single commit
  • Follow cursor option for the tooltip/popover
  • Visio Zoom and target hyperlink settings shoudl be respected now
  • Layers can be sorted alphabetically in the sidebar

Please note that this is major release, make sure you backed up your diagrams files before upgrading!

Continue reading“SvgPublish 1.3 released”

Editing SVG code online

When you build a site or a web application, periodically there can be a need to slightly modify a code of an SVG fragment used in that site, like add an arrow to a button or something. Not visually, but directly in the SVG code. For visual editing, there are quite a number of tools, like Inkscape. The thing is it produces not that "developer-friendly" svg code.

So sitting at home at corona-virus times I have not found a good online tool for that at first, and thought that monaco-editor could be an almost ready-to-go solution, with autocomplete and tooltips. After a couple of days built a simple web-site that provides basic auto-complete, and integrates that editor. It also uses free firebase plan to store user data and host the website, so that you can save your changes. The code is inspired by this article on implementing custom monaco editor intellisense. All code is in an open GitHub repository.

file

Continue reading“Editing SVG code online”