Microsoft 365 Community Microsoft Graph, 17 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Outlook add-in with SPFx to save attachments to SharePoint using Microsoft Graph

Description

In this 13-minute Developer - focused demo, Aakash Bhardwaj shows functionality visible within the user’s Microsoft Outlook environment, delivered by an SPFx web part for displaying e-mail attachments for opened e-mail along with the user’s OneDrive folders into which the user may save selected mail attachments (+/- 4MB). Usage in a tenant requires Mail.Read and Files.ReadWrite permissions on Microsoft Graph. This capability complements Markus Möller’s Sample that copies e-mail to a Teams or OneDrive folder. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 5, 2020.

Demo Presenter: Aakash Bhardwaj (HCL Technologies) | @aakash_316

Supporting materials:
• Repo - React Save Attachments | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-save-attachments
• Repo - outlook-2-sp-spfx | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-outlook-copy2teams
• Building Outlook add-in with SharePoint Framework tutorial - this feature is currently in preview - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello: everyone, my name, is akash bhardwaj. I work as a microsoft, 365 developer with expertise in developing custom solutions using the sharepoint framework bar platform and microsoft azure. So after this session, if you would like to connect with me, you can reach out to me using any of these channels and today I'll be showcasing the sample spfx webpart, that I contributed a while back to the pmp repository.

A

So it's an outlook add-in built using spfx that allows you to save any attachments to a onedrive, folder or subfolder.

A

So some of the features for this web part is first of all. I would like to actually share that. I actually got the inspiration to create this from another sample in the repository that was submitted by marcus mueller. I guess so what that web part used to do so that used to actually copy your email. From from your, I mean it used to copy your email to any teams or onedrive folder, so I just extended it a bit to allow the users to copy email attachments instead of the emails.

A

So what you can do is so you can select any there. That is present in your onedrive and then you can select any attachments like either all attachments or you can select a few attachments that are present in an email and then you can just save your attachments right from within the outlook web app. So this has been built using the preview feature of spfx that allows you to create the outlook add-ins and in the hood, all the all these operations to get the onedrive folders and get the email attachment content and then copy.

A

I mean save that save that attachment to the onedrive folder. So all these operations have been done using microsoft graph. So if you want to use this sample in your in your tenants, this would require permission for the mail dot read and the files dot read write on microsoft graph, because the mail.read permission actually allows you to read the read the attachment content and then the files dot read. Write permissions.

A

Allow you to read to fetch all the folders present in the onedrive and then and then save that email attachment to file to that particular onedrive folder.

A

So this is how the web part looks like and now let me show mid. Let me show this how it works.

A

So this is one of the emails that I have so this email has a couple of attachments. So if I just click over here more actions, so I see this save attachments. Option is available to me, so this is actually the web part that I have built in. So when I open this so first of all, it allows me to select the folder.

A

So these are all the folders that are present in my onedrive, so I can select any of these or I can also move back and forth between a parent, folder and a child folder. So let's say I select this one for m365, developer, bootcamp and then google and now I can select any of these email attachments so either I can see I can select all of them or a couple of them and then the save button would get enabled for me. So for now let me select these two attachments and then click on save.

A

So once it says uploading so and after it has completed successfully, so you will get this small message that the attachments have been saved so now, if I move over to my one drive, so this was the folder that I selected and inside this. So here you can see this says modified a few seconds ago. So this was one of the images that I had copied for the pnp parker.

A

So that's how the web part works. So that's about it for most of the web part functionality. It's it's a simple web part that just allows you to select a folder and save your attachments to that folder. Now let me jump over to the code, so this is my web part file, so in the render method. First of all, I am checking whether this web part is getting executed in the outlook web app.

A

So I do that using this dot context, dot, sdks dot office, so if it is, if it is being executed within the context of outlook, so then I get the item. So that's. That is the email that I have selected and then I get that item id in the rest rest, api format, and after that I just create this object off that I created it so, like I said so, this was actually inspired by that other sample, so most of the typings or these service methods that you find in this web page.

A

So those would be actually quite similar to the one that we already have so here I just construct this object that this contains the item id. That's the unique id of the email, as well as a list of all the attachments that we have selected and if not if it is not being executed within the office context. So then I am just populating this with some sample data, because while I was developing, I I needed to actually check the ui.

A

I needed to see how my web part is there, and how does it look like so for that I used to use the sharepoint workbench itself and at that time this was helpful that, instead of actually getting an email attachment, I had some sample data and I was using that to check the ui of my web part.

A

So once I have constructed this object so then I have this: save attachments, react component and I'm just passing the this mail object, along with the description and the graph helper object. So this graph helper object that you see. So I am initiating this initializing this within the on init method. So I have a separate class called the graph helper. So I'll also go over to this in a couple of seconds.

A

So this is the class that actually deals with all these operations related to the either getting the onedrive folders or the email attachment, or doing that. So basically, everything where we are using the graph api, so those are handled here.

A

So if I go to my react component, so here I have used react hooks, so I have created a couple of these variables that I am using to store and update these state values so inside the render method. So this is pretty much it about the ui, so nothing special here, I'm just using a couple of fluent ui controls and the most important methods I would say in this component- are these two. So first one is the update attachments.

A

So this method, I'm this method, is being called whenever that checkbox is updated to select any of the attachments. So at that time I have this variable in which I am actually pushing all these items there. Those have been selected or just deleting them once that, once any checkbox is unchecked, so this method would be called whenever that checkbox is updated and then, when the save button is clicked, so at that time this copy to onedrive method would be called, so this would first of all update this loading state so that we see that messages.

A

We see that message that says uploading right now and after that here we are actually get calling this get attachment content method, so this belongs to this graph helper. So I'll go over to this in a moment, so this actually gets the content of that email attachment. I mean the content of each of the email attachments that we have selected and once it has that content, it then checks whether it's a large file or it's a normal file. So this I'm doing because for saving large attachments there is a separate process in the graph api.

A

If you, if you are actually saving a file, that's greater than 4 mb. So I have a separate method for that called, save large attachment, and if it's a small file, then we just call this save attachment and then lastly, we just update this status, whether if it has completed successfully so then we just give this success message. Otherwise we just show this that some error has occurred.

A

So that's it for this method. So so now let me go over to the graph helper plus.

A

So this is the class that contains all these methods. Like you can see for getting the onedrive folders, so this would give you all the root folders that are present in your onedrive, and then we have the subfolder as well. So if you have selected any folder and it has, it contains multiple subfolders, so it allows you to get a list of all the subfolder that the current folder has childs.

A

And apart from this, this was the method for get attachment contents. So here we just specify the message id as well as the attachment id. So all these are graph api methods, and so this was the save attachment so, like I said so, if the file size is smaller than 4mb. So so then this operation is pretty much straightforward. We just call this method and it executes this rest api call to save that attachment content into your selected folder, it's a large file. So then we have to do some extra effort in this case.

A

So what we do for this is first of all, we need to create an upload session, because if the file size is large, then it if you don't create this upload session, then it might show you a timeout error that the file size is large. So for that I first call this create upload session method here and then I actually break break down the content into smaller chunks and then upload those as individual slices.

A

So you can see I mean I'm not. I won't go into the details of all this, but this is how actually we enable saving the large files into this into any onedrive folder. So this is pretty much it. I guess, and once again like I said so, you would need to provide some permissions for this. So here you can see the permissions that I specified was the mail.read and files.treetrend.

A

So this these can be found in the package solution.json, and here we have those types that I talked about this imail and I folder- and I guess that's it- for myself over to your.

B

Visa excellent stuff- oh gosh, really really cool um one thing, just a really really clean implementation and a nice graph helper uh for sure for people to use as a reference, so really really cool stuff, like your akka shed just to re-reiterate on that one. The office add-in option for spfx is unfortunately, still in preview, and this is not because we wouldn't want to provide this in ga. uh It's just a matter of prioritization in the office adding side of the world.

B

So, unfortunately, we we're still waiting for office to add in people and office client people to actually uh implement the full support on this one. So if you want to provide them, feedback provide them feedback. If you would like to have this kind of a support for spfx as well, because um the our idea from a day, one has been that the same piece of code can actually work in the microsoft teams, tab or as a spfx web part, or some single base application or as a office setting as well.

B

But it is what it is for now. uh Well, we are still waiting for the final decisions on the office and outlook site on this one, but I think that's it. Thank you. Akash really, really cool stuff, really cleaning patient and a lot of good feedback on the chat window as.

A