Microsoft 365 Community Community Demos, 26 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building SPFx Visio file presenter for Teams and SharePoint

Description

In this 13-minute developer-focused demo, Nikolay Belykh delivers a SharePoint web part that replaces the classic Visio diagram AND Diagram Frame web parts (for embedding Visio drawings in your page) with equivalent and better functionality. The modern File Viewer web part does not offer the interactivity options previously available the classic web part. The open-source web part accesses the Visio Online API. Available from AppSource and tips on publishing in AppSource.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 26, 2023.

Demo Presenter
• Nikolay Belykh (unmanagedvisio)

Supporting materials
• Documentation - Visio JavaScript API overview | https://learn.microsoft.com/office/dev/add-ins/reference/overview/visio-javascript-reference-overview
• Controls - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Pipeline - nbelyh.VisioOnlineSpfxWebPart | https://dev.azure.com/unmanagedvisio/UV-GitHub-Public/_build?definitionId=18&_a=summary
• VS Marketplace - SPFx Localization | https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-spfx-localization
• Documentation - Publish SharePoint Framework applications to the marketplace | https://learn.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview
• Repo - Diagram Frame sharepoint Visio web part | https://github.com/nbelyh/VisioOnlineSpfxWebPart
• AppSource - Diagram Frame WebPart | https://appsource.microsoft.com/product/office/wa200002491
• Article - Diagram Frame sharepoint Visio web part | https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/
• Website - https://unmanagedvisio.com | https://unmanagedvisio.com

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

A

Part which is replacing the old classic Visual Web part to this, which is for the modern experience. Sorry I'm kind of I haven't done it for a while, so bear with me, who am I. Basically yeah I'm, a software developer based in Vienna Austria, now yeah I'm, former MVP from Visio and office services here, and you can find my profiles in the GitHub like stack, Overflow, LinkedIn and lastly, I was working for the visplan check out these guys as well and our like strategic planning here. So what is it about yeah?

A

So the motivation, uh let me maybe show first what it is about yeah, so that it could be easier to understand.

A

It is about building a a verb part which is available from the Microsoft appsource right and that anybody can install actually and uh you know, use in their organization and bring in that um and that part to the store. So it is about this diagram praying the part. Let me show what it is about it's about.

A

In the previous version of the video of uh my SharePoint, you had a possibility to create a to embed with your drawings. Visual is basically a diagramming tool for Microsoft Office and you had a you know: a nice uh web part which allowed you to embed, like you know, drawings in your page and give it some options here. You can see the previous experience like of SharePoint like 2016, like something like that right, unfortunately, that was like experience was uh discontinued after migrating to SharePoint online right and for SharePoint online.

A

Yes, there is only a file viewer, but the file viewer doesn't really provide a lot of options uh for the for view in visual diagrams and here, for example, yeah. Let me maybe briefly show like yeah before your head, like you know, options to disable pan like disable like status bar, and you know like disable, some animations, for example, and customize the sizes of that screen, and so on and out of the box.

A

Now right, you can only set just the basic properties of that things like and that will be storing always the same view, so this diagram frame will parked right is actually enhancing the built-in think with the new capabilities. So you can see it here right on the live gamma. So when you add a modern page right that old word parts are not available, so you can only have a chance now to provide either a file viewer, which is like limited in a way.

A

I just said right or this new web part, and this is basically the real part that has been built yeah. So what you can do here, you can configure it. You know, with the file first right using the speaking I, think right and then you can set well about the same more or less set of parameters you had before. On the you know, on the Ultra part, for example, you can hide like diagram boundary and you know, like disable some interactivity or enable some interactivity select Zoom initial page like basic stuff.

A

When probably uh you know, the file viewer will Implement that yeah. That top part can be yeah. Also like expired or not needed anymore, but for now it is, it can be a good replacement. I guess for the you know for embedding visual diagrams into SharePoint Pages yeah.

A

So let me get back to the gamma right, so this is like basically the motivation to replace the existing apart and also like. Like all this. There is a good reason, and you know that practical reasons, a good reason- was to build this replacement and provide it basically for anybody who want to install it right, because it's like you can install it from the store yeah. You can just go to the app Source over here right and just type. For example. This is the public Microsoft site right diagram frame.

A

You don't need to and then just get it right and it will be uploaded to your app catalog yeah on the when, when you get it right, it will be downloaded to your tenant, let us and installed into your app catalog yeah.

A

Let me just show like it's already installed here, yeah so after that you will be able just to use it like directly without having to install it like explicitly to your organization yeah. That is kinda difference from what is usually done with the dma part yeah. For that you need to upload it through the partner Center. But let's come to that later, a little bit, yeah, okay!

A

So basically it's done using visual online API, which is like office, GS, robbed in a code, and then some components like that were just mentioned right are also employed to build this webpark. It's like fluent UI, uh the previous version of the library like number, eight right, not the not the latest one yeah then also like spfix controls, Library, which is like providing a lot of useful things like you know, file, picker and so on. It just was which were just used as this or improved a little bit for this part right.

A

So let me show one more thing here as a next step right.

A

This part icle open source, so you can go to the GitHub right and just check the full source code of it, and it is exactly the same. The part that is published in the App Store, okay and then this is like clarifying the replacement how it works. Yeah.

A

It's worked basically through online API of Vizio yeah, and this API allows you to embed your code you're, basically, a visual frame into your custom page or your custom web part right and also it provides a basic method for manipulating it, like you know like setting the size of it, for example like showing uh or hiding toolbars. Basically, all the properties you have seen on the diagram on the on the sidebar on the web part settings right. Those are all available or set configured with API, right and yeah.

A

If we go to the both for that sink right, so then it is just a standard part basically uh created using the SharePoint generator right and.

A

The root which is just dropped, hmm a top element which is like acting as a container or iframe, which is contained in visual in terms yeah, so for the details, I think it's better to navigate to the actually. It happened, look at there, but I mean just to give an idea that how it works so that you have a top element right and then on loading. It just initialize that, with the Visio, like you know, with visual API by creating embedded iframe and then in runs video in that iframe to load the drawing yeah.

A

The one of the challenges here could be, the you know. Resolving the URL of the file I mean Visio can be. The diagram can be specified, for example, that is like not belonging to the current website, or it can come from the you know the OneDrive or it can be a share link and to resolve that into something that can be understood by the visual API right. That is a little bit tricky and you know it's done using the also like SharePoint API, and for that this PNP GS library is also used.

A

Yeah like for picking as well like for you know, begin as well: Beacon files. Okay, let me get back to the presentation so from the spfix controls Library, it's basically using the placeholder to have a nice. You know apis when it is not configured yet and then it's using the file picker element, which is like used to basically provides a list of files and folders and help users with a navigation to the file, and then there can be some other point of Interest like compared to the well.

A

In addition to the code right that is like in the project, the project is built basically using azure devops and there is a configuration to build this project for the SP fix web part. So all this is actually public, so you can check out how it's configured. Basically, if you are interested in building click, you know the web part in a continuous basis like with a releases, for example, when you produce a new release.

A

You don't deploy everything like manually, but have it like automated by the Azure devops another, like you know, maybe point of Interest here could be the localization of the real part right and I want to. You know, highlight the great spfix localization extensions extension in case you have not seen it like by struth.

A

It's like you will find the links like afterwards like in the demo presentation yeah.

A

So as a last step, maybe I could tell a little bit about publishing procedure to the store to the upsource, how to bring it yeah and how to make it possible to be downloadable from them store. First, you need to register at the partner center right and then you basically submit the application for the partner center for the review right and the main challenge for me was actually like. You know to create some documents right, like you know, uh user documentation and privacy policies such of a paperwork a little bit yeah.

A

Also it took about like one month like you had to have a application reviewed, and you know like testing test tested more or less by the submission team. Yeah and I'm really grateful to those guys who helped me to you know, fix the things and have it like rolled out to the store yeah, just if one more maybe like link and what it looks like in the partner Center. When you push the stuff there.

A

If you are, when you go to the partner center right, you have a possibility to push things to the store and that's basically Marketplace offers right. And if you click that one right.

A

You can you work from here right and it is actually all described more or less there. It is just the path yeah one need to take to have it like rolled out just to provide some links as well yeah for the presentation, and where can you find the things related to this web part? First, the repository of course right. Then you have the upsource and the website yeah. There is a documentation for this. Webpark uh actually is yeah. My contacts are below yeah and back to you, yeah.

A

If you have some questions, please go ahead and ask them in the chat as well yeah. Thank you. Thank you. Nikolai great and really useful uh demo.