Microsoft 365 Community Microsoft Graph, 27 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Outlook Web Apps using SharePoint Framework and Microsoft Graph

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on February 27, 2020

In this 13-minute demo, Markus Möller - Avanade, Germany, shares a web part that enables the user to select a folder on a OneDrive, in a Group, a SharePoint library, or in a Microsoft Team in which to store an e-mail. Behind the scenes, the web part delivers the necessary Microsoft Graph calls to move large 4MB+ and smaller mails through MimeStream to their destination.

Presenter:
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials:
• Blog post - An Outlook Add-in with SharePoint Framework Introduction| https://mmsharepoint.wordpress.com/2020/01/11/an-outlook-add-in-with-sharepoint-framework-spfx-introduction/
• SPFx sample - React Outlook Copy to Microsoft Teams | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-outlook-copy2teams
• Tutorial for creating Outlook Web Access extension using SharePoint Framework - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

What I want to show you today is the new capability: how to create an Outlook add-in when Outlook Web Access with sharpen framework and I'm heavily using as well in Microsoft graffia for my demo case, but first for those of you who might not know me, my name is Marcus Mehra I work for a vinod in Germany. You can find me on Twitter as well as on my blog post.

A

I, do not present the first time here, but the second only, and luckily we found the slot today, because I'm also having a had a family leave in two weeks or so, but see you something in my demo on that, as well, so about the story. What I'm going to show would like to introduce? You is: what do you like to against the intro is to start complete mates to onedrive and or Microsoft teams? What we have to do for this story is to first get the outlook context from the current man.

A

Then we have to browse our targets, onedrive groups or teams for us to find a position where to store it, and then we have to grab the full mail as a Mike as a mime stream with Microsoft graph and finally store it and in storing you have two options with Microsoft graph, the first. This one is for smaller files, smaller in four megabyte- and this is a quite simple story and for big friends greater than four megabyte. You have to do it a bit more complex.

A

What I will show you in the demo exactly in terms of code as well. The first thing that third and the fourth thing routing targets is a bit complex to show to demonstrate- and this is why I will skip this, and there are also other great stories out there which you can use. So when we go to urges to do code or wire to show the solution for an Outlook a10. We first need two things. We need a manifest file.

A

This is in the office Eden folder and here, for instance, we can give the display name or a description of our Eden. The second thing and the first part of the demonstration is in a web part. We first need to retrieve the context- and this is shown here so when we retrieve the context and the mayor and the item ID and the subject. And finally, in the controller we have some methods to save our mate Shivam a then this is the API for that with graph.

A

So get the message: get the mail ID, which we retrieved and the value, and once we retrieve that we can check the size and either save it in a normal way or in a big way. The normal way is quite easy, simply stored away and the big mayor. We have to open up an upload stream first and then we will upload the may and slices until we have no portions left.

A

How does this look like in action.

A

We first have a small major demo made from my daughter expected to be born in two weeks around. She just want to introduce herself right now in the context of this mayor. We have our I caught it in this way copy to SharePoint outlook Eden, which we can open up and.

B

A

This is running. We first hit here our context. We have our mail and we see that this may as an item ID and a subject, the subject we will only use later for the file name of the storage.

A

Now we have our onedrive, our teams and our groups entry points. For instance, we can start to browse in onedrive. Here takes a while, but here we have our folder structure and we can move mouse to our photo structure. Quite the same like thought of the Box capability from SharePoint, for instance, and then, for instance, we can move to a subfolder and we can save it here and now we have four small mail. You see this is only a text mayor and here on the response links you can clearly see.

A

This is a really small mail, so we will only jump in our normal mail file, normal safe method, and we can only save it away. This doesn't take long. We will return a success message here. That's all we did so far and that's done now the same, but how does it look like when we have a much bigger man? This male is around 12 megabyte in size, because this is a high-resolution photo, and what we can do here is the same.

A

Have again our mail item in our subject? Now: let's go to teams, for instance, you will see lots of teams and pick one can browse through the documents. Library again we have some folders here and then save it again.

A

This takes some time now you can see, because now what he's doing is he's retrieving the mail from graph, so this 12 megabyte in size at the mine stream and there we are- and here we see the response length- is much much bigger than our seismic and when we jump in we we are going to our big mail sailings.

A

Once we move forward, you can see again here that we are here in our upload maze. We already created an upstream above. This is quite simple: you can see from the code, but when you later check the code or my or post on this, but here what I want to show is the upload mail slices. So we are separating this in portions of 320. Kilobytes multiplied was 5, but you always have to use 320 kilobytes in size, so what he does now after every slice, he checks. If the response contains an ID.

A

This is currently undefined, and this takes several times now, but not that much and there we are done now. This is how the savings of big fights in Microsoft graph work and now, let's quickly jump to the results again yeah and my onedrive and the attachments for the one subfolder one- and you know it was our mayor and once we open this normal mail, it's easily can be opened fully in preview mode.

A

Even but when we go to our teams and check the big one in team number 14 in the files, it was for that one I think and I think it was subfolder one there we have the big mail. This does not really have the preview, because that's too big teams cannot handle that, but we can download it.

A

And we can open that as well and there it is.

A

That's all from my demo side, some things what I would like to do in the future on this new topic is um what I showed you. It's the only way in terms of debugging what I currently found as a solution, so you can upload the app with built not as ship mode but in a normal, deep art mode, and then you can load it from I'm doing here.

A

I can show you here that I'm having a card in the background which is serving that so this works, and then you can debug it inside your browser, but I would like to have a better capability here and also as a hint, a visa. You said this on the documentation. This is not quite documented. At the moment, yeah I would like to find out a better way for that. I would like to experiment more with the outlook manifest because, of course, you can also change the logo.

A

You can try to arrange later groups with that actions, also in a ribbon once this is available, and this is the final thing once this is available. The office applications as well and then I would like to see new ones on this idea to store something or also create totally new ideas to work with PowerPoint Word Excel as well. Finally, just for the recording orders, where my resources I have a blog series on that topic and also an SPF example, and that one's from my side thank.

B

You Marcus, don't don't stop, don't stop, sharing, don't say that people always want to run away. Can we go back on the solution? So let's have this opportunity because we have some extra time because mark.

A

B

Here, and can it's just in point for those who are not aware how what aware did we ask the permissions on the craft just to recap that and what kind of permissions are were using in this case, that was in the.

A

Country cracking packet solution, yeah.

B

A

I have to add this, because maybe someone is thinking when he goes to my blog serious, maybe I can in this as well. I published this blog serious I think only four days after this capability with SPF X and our noggins went life. But honestly, 80% of this code would also work in a web part. So I have to admit. I already wrote it in last summer and was just waiting for the publication of this capability and it's like we adapt this or this just as a hint.

A

Maybe you also have done this already reused components from SharePoint web parts to team's applications. Also, you can do the same if you have the same idea, same working functionality, firmware parts to look at it in stand for something so long time ago. That I came across this. But indeed you need quite a lot here, and this depends on my solution. So you need group, write or read all because I am retrieving all the groups a user could have. If you don't need that you can skip it, but I think it's the same!

A

For teams you need user read you need files. Read and files rewrite, of course, and you need married because you need to retrieve the mail yeah and finally, the site's read write all I think this is not necessary, because I think I dropped out for a while the capability to start to sharpen sites as well. But this could work the same way. Huge.

B

And then also the maybe the one thing to point out so or the: how did we the office add in folder and just to be in point at one that you need to run the 1.10 SPF X in the preview mode so because add a mode to be able to get that by default? You know right now, what's interesting in there actually just that, just to pinpoint how we implemented this, at least in a beta.

B

So if you open up the manifest you can scroll down on the the URL, which is something like office, add in all the way, the aspx page there we go that outlook outer Luke how's that habit of aspx. So just to recap again, so the beauty of this model is that you do not have to host anything. You do not have to actually even go to jad and granted permissions.

B

Well, technically, you have to grant to permissions but you're using sharepoint UI, but no hosting no deployment, no optimization and the CDN everything else and- and this is all and the hosting is automatic because we're using sharepoint as the platform, you don't have to use the SharePoint context, but you good use SharePoint trust us the hosting platform and then do operations in the Outlook Web Access site or entity inside. So you don't necessarily need to even access the SharePoint but we're just using SharePoint.

B

That's underlaying, let's say framework to automatically house our stuff, which is always the most difficult. Well one of the most difficult things, because you know normal enterprise scenario. I know. Marcus knows this really well as an Avenue, a person. You cannot just go to a customer and say yeah I want to have a one application into Azure ad and give me those permissions and that's taking ages to happen. Doing the automatic hosting a SharePoint. That's super super use and sweet, but anything.

A

Else, yeah, um no I think you mentioned, or what I also party.

B

A

You mentioned a lot more and it was really interesting here. Oh.

B

Cool excellent Thank, You Marcus.