diff --git a/samples/react-save-attachments/README.md b/samples/react-save-attachments/README.md new file mode 100755 index 000000000..64c8c6e6d --- /dev/null +++ b/samples/react-save-attachments/README.md @@ -0,0 +1,61 @@ +# React Save Attachments + +## Summary + +This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder. The users can select any OneDrive folder/subfolder and choose the attachments that need to be saved. It uses Microsoft Graph API to fetch the OneDrive folders and upload the attachment files. + +![Save Attachments](./assets/ReactSaveAttachments.gif) + +## Used SharePoint Framework Version + +![SPFx 1.10](https://img.shields.io/badge/version-1.10.0-green.svg) + +## Features + +This web part illustrates the below features for creating Outlook Add-Ins using SPFx. + +* Select Office context and attributes of currently selected mail +* Requesting **Mail.Read** and **Files.ReadWrite** permission scopes for Microsoft Graph through the `webApiPermissionRequests` property in `package-solution.json` +* Use Microsoft Graph to retrieve folders and sub-folders for OneDrive +* Use Microsoft Graph to retrieve complete mail `mimestream` by given `ID` +* Use Microsoft Graph to save normal or big files (in size bigger 4MB) with different concepts + +## Solution + +Solution|Author(s) +--------|--------- +react-save-attachments | [Aakash Bhardwaj](https://twitter.com/aakash_316) + + +## Version history + +Version|Date|Comments +-------|----|-------- +1.0|October 4, 2020|Initial release + +## Minimal Path to Awesome + +* Clone this repository +* In the command line run: + * Restore dependencies: `npm install` + From here you can also follow the deployment steps from the official [Microsoft Tutorial](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial#packaging-and-deploying-your-solution-to-sharepoint) + * Build solution `gulp build --ship` + * Bundle solution: `gulp bundle --ship` + * Package solution: `gulp package-solution --ship` + * Locate solution at `.\sharepoint\solution\react-save-attachments.sppkg` + * Upload it to your tenant app catalog + * Go to your Outlook Web Access then double-click an e-mail to open it in a window + * Choose **...** and **Get Add-ins** + * Choose **My Add-ins** from left menu + * Under **Custom add-ins**, choose **+ Add a custom add-in**, then **Add from file...** + * Upload the manifest xml file from `\officeAddin` folder + * Click **Install** on the warning message to get your add-in available on the tenant +* Go to the **API Management** section in the new SharePoint Admin Center (*https://{tenantname}-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement*) +* **Approve** the permission request for **Mail.ReadWrite** and **Files.ReadWrite** to **Microsoft Graph** + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + +--- + \ No newline at end of file diff --git a/samples/react-save-attachments/assets/ReactSaveAttachments.gif b/samples/react-save-attachments/assets/ReactSaveAttachments.gif new file mode 100644 index 000000000..94fa879a6 Binary files /dev/null and b/samples/react-save-attachments/assets/ReactSaveAttachments.gif differ diff --git a/samples/react-save-attachments/config/config.json b/samples/react-save-attachments/config/config.json new file mode 100755 index 000000000..7ebe6bb48 --- /dev/null +++ b/samples/react-save-attachments/config/config.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", + "version": "2.0", + "bundles": { + "save-attachments-web-part": { + "components": [ + { + "entrypoint": "./lib/webparts/saveAttachments/SaveAttachmentsWebPart.js", + "manifest": "./src/webparts/saveAttachments/SaveAttachmentsWebPart.manifest.json" + } + ] + } + }, + "externals": {}, + "localizedResources": { + "SaveAttachmentsWebPartStrings": "lib/webparts/saveAttachments/loc/{locale}.js" + } +} diff --git a/samples/react-save-attachments/config/copy-assets.json b/samples/react-save-attachments/config/copy-assets.json new file mode 100755 index 000000000..0e7cd6e21 --- /dev/null +++ b/samples/react-save-attachments/config/copy-assets.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", + "deployCdnPath": "temp/deploy" +} diff --git a/samples/react-save-attachments/config/deploy-azure-storage.json b/samples/react-save-attachments/config/deploy-azure-storage.json new file mode 100755 index 000000000..fefc0d181 --- /dev/null +++ b/samples/react-save-attachments/config/deploy-azure-storage.json @@ -0,0 +1,7 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", + "workingDir": "./temp/deploy/", + "account": "", + "container": "react-save-attachments", + "accessKey": "" +} \ No newline at end of file diff --git a/samples/react-save-attachments/config/package-solution.json b/samples/react-save-attachments/config/package-solution.json new file mode 100755 index 000000000..a45382d34 --- /dev/null +++ b/samples/react-save-attachments/config/package-solution.json @@ -0,0 +1,24 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", + "solution": { + "name": "react-save-attachments-client-side-solution", + "id": "b0a9dfa8-9221-472c-88d7-a1542bf21d8d", + "version": "1.0.0.0", + "includeClientSideAssets": true, + "skipFeatureDeployment": true, + "isDomainIsolated": false, + "webApiPermissionRequests": [ + { + "resource": "Microsoft Graph", + "scope": "Mail.Read" + }, + { + "resource": "Microsoft Graph", + "scope": "Files.ReadWrite" + } + ] + }, + "paths": { + "zippedPackage": "solution/react-save-attachments.sppkg" + } +} diff --git a/samples/react-save-attachments/config/serve.json b/samples/react-save-attachments/config/serve.json new file mode 100755 index 000000000..090cfe9e6 --- /dev/null +++ b/samples/react-save-attachments/config/serve.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", + "port": 4321, + "https": true, + "initialPage": "https://localhost:5432/workbench", + "api": { + "port": 5432, + "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" + } +} diff --git a/samples/react-save-attachments/config/write-manifests.json b/samples/react-save-attachments/config/write-manifests.json new file mode 100755 index 000000000..89f4ed068 --- /dev/null +++ b/samples/react-save-attachments/config/write-manifests.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", + "cdnBasePath": "" +} \ No newline at end of file diff --git a/samples/react-save-attachments/gulpfile.js b/samples/react-save-attachments/gulpfile.js new file mode 100755 index 000000000..77366f4ae --- /dev/null +++ b/samples/react-save-attachments/gulpfile.js @@ -0,0 +1,7 @@ +'use strict'; + +const build = require('@microsoft/sp-build-web'); + +build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); + +build.initialize(require('gulp')); diff --git a/samples/react-save-attachments/officeAddin/04634d50-d72c-45ec-81d0-7b1f803800da_outlookManifest.xml b/samples/react-save-attachments/officeAddin/04634d50-d72c-45ec-81d0-7b1f803800da_outlookManifest.xml new file mode 100755 index 000000000..76c700943 --- /dev/null +++ b/samples/react-save-attachments/officeAddin/04634d50-d72c-45ec-81d0-7b1f803800da_outlookManifest.xml @@ -0,0 +1,91 @@ + + + 04634d50-d72c-45ec-81d0-7b1f803800da + 1.0.0.0 + SPFx Provider + en-US + + + + + + + https://login.microsoftonline.com + https://login.windows.net + + + + + + + + + + + +
+ + + 250 + +
+ + ReadWriteMailbox + + + + false + + + + + + + + +