You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Create Outlook add-ins using SharePoint Framework
3
-
description: Create Outlook Web App add-ins using SharePoint Framework
2
+
title: Create Outlook Add-ins using SharePoint Framework
3
+
description: Create Outlook Web App Add-ins using the SharePoint Framework
4
4
ms.date: 06/22/2020
5
5
ms.prod: sharepoint
6
6
localization_priority: Normal
7
7
---
8
8
9
-
# Create Outlook add-ins using SharePoint Framework
9
+
# Create Outlook Add-ins using SharePoint Framework
10
10
11
-
Introduced SharePoint Framework v1.10, you can implement an Outlook Web App add-ins with the SharePoint Framework and use SharePoint as a host for your solution.
11
+
Introduced in SharePoint Framework v1.10, you can implement an Outlook Web App add-in with the SharePoint Framework and use SharePoint as a host for your solution.
12
12
13
-
Using the SharePoint Framework as the platform for your Outlook Web App add-ins include the following benefits:
13
+
Using the SharePoint Framework as the platform for your Outlook Web App Add-ins includes the following benefits:
14
14
15
-
- The development model is similar to SharePoint Framework web parts.
16
-
-Same code can work across SharePoint, Teams, and Office.
17
-
- Your add-in is automatically hosted for the tenant without any additional services.
18
-
- Simplified authentication to access different services in Microsoft 365.
19
-
- You can benefit from the same permission and access management model as within SharePoint with easy access to Microsoft Graph APIs and other services.
15
+
- The development model is similar to SharePoint Framework web parts
16
+
-The same code can work across SharePoint, Microsoft Teams, and Microsoft Office
17
+
- Your add-in is automatically hosted for the tenant without requiring you to provision any additional services
18
+
- Simplified authentication to access different services in Microsoft 365
19
+
- You can benefit from the same permission and access management model as within SharePoint, with easy access to Microsoft Graph APIs and other services
> During developer preview, this feature is only supported in Outlook Web Access. Once it this feature reaches generally availability, it will be supported across all Office desktop and web clients.
24
+
> During developer preview, this feature is only supported in Outlook Web Access. Once this feature reaches general availability, it will be supported across all Office desktop and web clients.
25
25
26
26
## Development process
27
27
28
-
You can start developing Outlook add-ins simply by using the SharePoint Framework v1.10 or later packages. To use this feature in developer preview, you'll need to include the `--plusbeta` argument when executing the Yeoman generator:
28
+
You can start developing Outlook add-ins simply by using the SharePoint Framework v1.10 or later versions. To use this feature in developer preview, you'll need to include the `--plusbeta` argument when executing the Yeoman generator:
29
29
30
30
```console
31
31
yo @microsoft/sharepoint --plusbeta
32
32
```
33
33
34
-
This will automatically generate Office Add-in manifest file for the solution with default settings to **officeAddin** folder created to the project. This file is automatically generated with default settings, which enable your web part to be used in the Outlook Web App as a Task pane extension.
34
+
This will create an Office Add-in manifest file for the solution in a new folder called **officeAddin**. This file is automatically generated with default settings, which enable your web part to be used in the Outlook Web App as a Task Pane extension.
35
35
36
-
You'll need to deploy the solution to tenant using the **tenant scoped deployment option** to ensure that the component can be found in the context of the add-in URL as defined in the manifest xml file. This setting can be adjusted in the **package-solution.json** file by updating the `skipFeatureDeployment` as `true`.
36
+
You'll need to deploy the solution to a tenant using the **tenant scoped deployment option** to ensure that the component can be found in the context of the add-in URL as defined in the manifest XML file. This setting can be adjusted in the **package-solution.json** file by updating the `skipFeatureDeployment` as `true`.
37
37
38
38
> [!NOTE]
39
39
> For more information on the manifest file, see: [Office Add-ins: Office Add-ins XML manifest](https://docs.microsoft.com/office/dev/add-ins/develop/add-in-manifests).
40
40
41
-
## Use Office JavaScript SDK (Office.js) in the web part code
41
+
## Use the Office JavaScript SDK (Office.js) in the web part code
42
42
43
-
Before you can use the Office JavaScript SDK in your code, you'll need to include correct types for the solution. You can install latest types by adding **\@types/office-js** package from the npm to your solution with following command:
43
+
Before you can use the Office JavaScript SDK in your code, you'll need to include the correct types for the solution. You can install the latest types by adding the **\@types/office-js** package to your solution with the following command:
44
44
45
45
```console
46
46
npm install @types/office-js --save-dev
47
47
```
48
48
49
-
You can detect if the web part is on the Office context by using page context as shown on the following property, which refers to the Office JavaScript SDK. This property value is dependent on the context where the code is being executed.
49
+
You can detect if the web part is executing within the Office context by using page context as shown on the following property, which refers to the Office JavaScript SDK. This property value is dependent on the context where the code is being executed.
50
50
51
51
```javascript
52
52
this.context.sdks.office
53
53
```
54
54
55
-
For example, you can access the inbox using following property:
55
+
For example, you can access the mail inbox using following property:
Office Add-ins build with SharePoint Framework support one time configuration option when the add-in is initially viewed. This is an optional capability, which can be controlled from the add-in manifest file. Configuration option is controlled in the URL of the solution at the manifest file. By default the configuration option is enabled and the URL is as follows:
66
+
Office Add-ins built with the SharePoint Framework support a one-time configuration option when the add-in is initially viewed. This is an optional capability, which can be controlled from the add-in manifest file. The configuration option is controlled in the URL of the solution in the manifest file. By default the configuration option is enabled and the URL is as follows:
Notice that the **componentId** query parameter is solution-specific setting, which shouldn't be copied from the documentation as such.
80
+
Notice that the **componentId** query parameter is a solution-specific GUID, which should be replaced with the value for your own component.
81
81
82
82
> [!IMPORTANT]
83
-
> Configuration option is only available during initial view of the add-in. It is not supported to re-configure add-in after the initial configuration. This is currently by design as there's no similar configuration capability for the normal Office add-ins. If there's a demand for this capability, please do let us know using the UserVoice.
83
+
> The configuration option is only available during initial view of the add-in. It is not supported to re-configure the add-in after the initial configuration. This is currently by design, as there's no similar configuration capability for the normal Office Add-ins. If there's a demand for this capability, please do let us know using UserVoice.
84
84
85
-
## Deployment of your add-in
85
+
## Deployment of your Add-in
86
86
87
-
Deployment is a two-step process for the Outlook Web App add-ins:
87
+
Deployment is a two-step process for the Outlook Web App Add-ins:
88
88
89
89
1. Deploy solution to SharePoint App Catalog
90
90
1. Use side loading to activate the add-in in Outlook Web App
91
91
92
-
You can deploy your solution to Outlook Web App by using so called side-loading technique by following below steps:
92
+
You can deploy your solution to the Outlook Web App by using the so-called 'side-loading' technique by following these steps:
93
93
94
94
1. Move to the Outlook web client using your browser.
95
95
1. Activate one of the existing mails in your inbox.
@@ -105,14 +105,13 @@ You can deploy your solution to Outlook Web App by using so called side-loading
105
105
106
106
107
107
108
-
1. Upload the manifest xml file from your project solution under the **officeAddin** folder.
108
+
1. Upload the manifest XML file from your project solution under the **officeAddin** folder.
109
109
1. Select **Install** on the warning message to get your add-in available on the tenant
1. Close the add-in window by selecting **X** in the top-right corner
114
-
1. Activate again the context menu from ***[...]*** and select **SPFx template** to activate the add-in in your inbox
115
-
1. Name can be adjusted in the manifest file as needed
114
+
1. Activate again the context menu from ***[...]*** and select **SPFx template** to activate the add-in in your inbox (name can be adjusted in the manifest file as needed)
116
115
117
116
> [!IMPORTANT]
118
-
> Deployment process will include different steps when additional applications and desktop will be supported.
117
+
> This deployment process is for the preview. The process will change once support is extended to other Office web and desktop applications in the future.
0 commit comments