Microsoft 365 Community Microsoft Graph, 28 Sep 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Building a Microsoft Teams Tab enabling file conversions with Microsoft

Description

📺 In this 11 minute developer focused demo, Markus walks us through through a personal Teams tab to uplkoad a file with a pickler or via drag'n'drop and get it back converted to PDF, HTML or JPG file format depending on source type and selection. Comprehensive demo, covering of architectural details and code walkthrough. Markus covers the Graph API endpoint, SSO, and storing options.

This demo is taken from the Microsoft 365 & Power Platform Development Community call August 17th, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Markus Möller (Avanade) | https://twitter.com/Moeller2_0

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

Microsoft 365, developer, expert and MVP for that topic working forever, not in Germany.

A

um If you have questions ping me on Twitter or comment, one of my blog posts today, I want to demo you a personal teams tab, although this is also working as a configurable one and then upload some files with the Picker always drag and drop and then convert them either to PDF, HTML or jpeg, which is depending, of course, on the source, because, of course, you cannot convert every file to every Target.

A

Therefore, we have to step over to Microsoft teams and kick off our application.

A

There we are, what we see first, is a small toggle. um I will come to that later. Then we have a drop filed on and we have a an option: how we can convert our files and, depending on what we want to do, is we have some supported file types yeah for HTML? That are not that much so we will skip this for today uh for jpeg there's a lot of yeah and you might wonder even for some of them how to do that or how it's going to do. It's not working for everyone.

A

I haven't tested all of them, of course, but uh I have tested somewhere. I was really curious and I did not really find an output, so uh I think still somewhere to go to get this finally done and by the way except PDF. Everything is still in better. What we need of course come on.

A

A

As file, and here we have a PDF as a Target and what what is better to convert uh to a PDF- that's a Word document, for instance yeah. We drag this on the Drop Zone file is uploading and converting, and there we have a link to the Target one. Yeah I also prepared this here in my root side in the document file press the file- and there we have our document. 2 PDF yeah- um put uh check this, but let's trust this is the really one.

A

um What we can additionally do because uh drag and drop is a really cool version. Oh, it's really good function, but it's not really accessible.

A

We can also switch to a file upload, simplifier, upload, import control and there we can also upload, maybe document number one uploaded.

A

And here we are document number one there. It is let's finally try this also with a picture.

A

Therefore, I prepare the test image here.

A

This is the by the way you can see. This is a PNG file. It was uh more than five megabytes in size, no problem for me because I'm, of course, doing a resumeable upload in that case, because you might know that this graph, you cannot upload files more than uh for Megabyte in one step takes a while and there we are with our Target Recon, also open it here, finally, have our bomb VCR and that's it about this works yeah, but in detail. How does this work or how is the functionality ongoing?

A

Let's first have a look. What we have to do to get this running, because the problem is, we are starting on client side and the file conversion is taking place on the download of a file. So first we have to upload something. So what we are doing is we are uploading the source file like the document, for instance, to a temporary folder in our OneDrive in our personal OneDrive, and then immediately. We are going to download that once again, but here with the file conversion of PDF.

A

This is going back to our client, but not really to our client not to our browser anymore, but only to our web app, because because everything from up to here takes place in the back end, of course, and then the Azure web backend uploads. Finally, the downloaded PDF file to our Target location, which can be in SharePoint teams, whatever yeah you've seen what I was doing, uh was doing uploading it in my uh root site collection and why I was doing that. I will show you on one of the next slides Place.

A

What's the process yeah once again, um the converting formats- and here you might detect uh the first one, which is a glb file, never heard of that oh before I had I had to Google that in date yeah. This is a three-dimensional file option mostly used by paint 3D yeah. So I was not aware of that. I did not realize this in code, but should be easily extendable, because most of the stuff is already there. If you have a need for that, take the sample update it to your needs.

A

What I was already mentioning is the graph endpoint, the graph endpoint for a fire conversion exactly for a format during the download is still in beta, except the PDF format. So I was using in my sample because I was not able to use the graphs 5 SDK, which makes it quite easy to mix better and version.

A

One endpoints I was using a HTTP client version, so I was directly dealing with the rest endpoints because in the graph SDK version 5, the format option is still not working yeah and in the past it was always a good uh good. uh Let me call it work around to mix better and uh version one endpoints by simply using the HTTP client right.

A

This is about the graph endpoint, the next one, about the higher pick options. Yeah, you have seen the drag and drop zone, which is realized here on HTML, with a lot of functions in there, but as an alternative. So if the fluent switch above um is to start putting the show upload to a true, then we have a simple input of type file.

A

This is what you have seen by browding uh for a file which is more accessible, of course, than the dragon drop zone and I know what I'm talking about, because I'm also a bit disabled and not that fast with the mouse anymore.

A

Yeah. The upload topic again you'll see here a lot of functions, so you might think uh by the way this uh sample is realizes teams toolkit properties with Studio, but with an older version, it was 17. 4 I think um that it was not that mature.

A

That I was not using JS interop, together with blader, so I was still using good, plain old JavaScript, um with the recent uh mentioned, uh with the nearest mentioned, update by John a few minutes ago to the 177, it's much much better and I'm coming up with another sample very soon. It's already available in my GitHub, um where I will totally get rid of JavaScript and such a sample and only use C, sharp and Blazer, even for SSO techniques and usage of graph and calling my backend and so on.

A

Here, SSO still takes place in JavaScript here I'm getting my client-side bootstrap token on the client side and when I hand this over. Then in my backend services, I get the token acquisition uh and with that I directly also get my graph client or one line or two lines below and then I can start my stuff server side, which is uh yeah, simple web API controller, uh consuming dependency injection last, not least already announced where to store the files.

A

Of course, you can configure that in an environment variable or something similar, but you can also grab it from the context. What I'm doing here, because you have seen this- was a personal teams app so no context of a team I'm using the team site domain variable from the context, which is always my SharePoint root domain yeah. So in my case it was MVP sharepoint.com, slash nothing if I'm running a configurable tab against uh this option. I could also use directly my teamside URL, so put it in the teams site collection running below yeah.

A

This is another option where I can get directly. Thanks to my contacts, I have a SharePoint URL where I can upload things and, of course, I should rely or should be uh verify or rely on my documents, library or special one, depending on my needs.

A

That's all for my explanation. As you know, always some resources I got a blog post on that uh sample. Where I wrote down the uh yeah, the major things as well. The sample is available in that in the teams or Dev samples see projectory from PMP and last, not least, the documentation on the mentioned Microsoft graph endpoint still in beta, but you can also switch to the version one. Then you see that the format option is only PDFs there. Two yeah, that's from my side. Thank you for today.