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”

Azure DevOps to build office (Visio) VSTO Add-ins

These notes basically summarize setting up automated build for Office extensions (such as VSTO) in the cloud (i.e. Azure DevOps). Note that Azure DevOps supports private repositories for free. For open source repositories, it does not even impose any limitations (for private repositories, max build time per month is limited, so you cannot occupy 100% of the server for your builds). Basically I’m fine with "free" layer for now.

Continue reading“Azure DevOps to build office (Visio) VSTO Add-ins”

Exporting VIsio diagram to PDF with tooltips

If you use "Save As…" in Visio to export a PDF file, then the result does not include hover tooltips. Presenting a new Visio extension that can add the functionality.

If you export to PDF using new button, then the "comments" you added using the "Insert ScreenTip" should be also available.

The technical details and implementation "manually" is discussed here on the brilliant VisioGuy Forum.

Localizing a .NET office extension (desktop)

This article summarizes my experience on translating office add-in to multiple language. It is not an official guide, but just how you could do it. It assumes you have an office extension (VSTO, desktop) in a single language, and want to provide it in some other languages for users in other countries.

GitHub demo repository:
https://github.com/nbelyh/VstoMultiLanguageDemo

For generic information on localization on application localization in .NET, please refer the official Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/framework/resources/index

The steps I suggest:

  • Create localized versions of your resources
  • Move all strings to resources
  • Move ribbon strings to the resources
  • Translate the resources
  • Use the translation

Create localized versions of your resources.

The easiest is to install Visual Studio extension ResXManager, and then add the languages you want. It will create the localized version of the files for you, and you will be able to translate everything from one place. Also it supports import/export, so you can send your texts to translators. It is a free extension, highly recommended.

The ResXManager View

Move all strings to be translated to resources.

JetBrains Resharper can help with that (it has a nice function "Move to resource", along with other localization assistance).

You can do that "by hand" as well (just for each resource file create new localized verison, like for main Resources.resx create Resources.de.resx for example)

Move ribbon strings to the resources

If your extension has text labels on the ribbon, you may want to translate those. The ribbons designer does not support localization, so you can go with XML ribbon definition (if you use built-in project you could use "Export as XML" option in the designer. To translate labels you now need to move hardcoded strings from this xml to resources, and replace them with callback methods.

In pictures:

Ribbon.xml

<button
	label="Click Me"
	description="Click this button to see a message"
	onAction="Command1"...>

Ribbon.cs

class RibbonHandler
{
    public void Command1(IRibbonControl control) { ... }
}

transforms to:
Ribbon.xml

<button tag="OnCommand"
	getLabel="GetLabel"
	getDescription="GetDescription"
	action="Command1"...>

Ribbon.cs

class RibbonHandler
{
	public void OnCommand(IRibbonControl control)
	{
		if (control.Tag == "Command1") { ... }
	}

	public string GetLabel(IRibbonControl control) =>
		Resources.ResourceManager.GetString($"{control.Tag}_Label");

	public string GetDescription(IRibbonControl control) =>
		Resources.ResourceManager.GetString($"{control.Tag}_Description");
}

Resources:

Command1_Label => "Click Me"
Command1_Description => "Click this button to see a message"

I would not recommend to move the whole Ribbon.xml file to the resources though. For example, you could face a problem when switching add-in UI to match Visio language (see below), because the ribbon XML is required even before the Add-in startup is called by the runtime.

Translating the resources

You can always translate yourself, if you know the target language. if you don’t I would suggest to go with ResXManager to export the resources you know and send to the translator(s).

Using the translation

Assuming you have translated the application, you need to use the translation. Most probably you will want to pick the language that corresponds to the Visio language. You can do that on the add-in’s startup, by checking what kind of language Visio has:
Application.LanguageSettings.LanguageID will return the LCID (number) that defines the language. Then you cna use that to make your application use specific localization by setting Resources.Culture property. If you do have all localization Visio has, in this case you may want to use only supported ones (and default to English). Below is a code sample:

var lcid = Application.LanguageSettings.LanguageID[Office.MsoAppLanguageID.msoLanguageIDUI];
var culture = new CultureInfo(lcid); // selected in the Office

var languages = new[] { "de", "ru" };
if (languages.Any(language => language == culture.TwoLetterISOLanguageName))
{
    Resources.Culture = culture;
    // _ribbonHandler.Invalidate();
}

To test that the translation actually works, you can select Visio UI language (for that you need to install corresponding language packs):