From ebf95ce72889e473fb34039f7ae21d275bbe33b9 Mon Sep 17 00:00:00 2001
From: Sam Ramon <15154970+samantharamon@users.noreply.github.com>
Date: Thu, 27 Feb 2025 16:24:59 -0800
Subject: [PATCH 1/4] Add support for the unified manifest
---
Samples/outlook-spam-reporting/.gitignore | 33 ++++
Samples/outlook-spam-reporting/README.md | 134 ++++++++++++----
Samples/outlook-spam-reporting/env/.env.dev | 15 ++
.../outlook-spam-reporting/infra/azure.bicep | 26 ++++
.../infra/azure.parameters.json | 12 ++
Samples/outlook-spam-reporting/manifest.json | 143 ++++++++++++++++++
.../outlook-spam-reporting.zip | Bin 0 -> 8484 bytes
Samples/outlook-spam-reporting/package.json | 62 ++++++++
Samples/outlook-spam-reporting/teamsapp.yml | 64 ++++++++
.../outlook-spam-reporting/webpack.config.js | 91 +++++++++++
10 files changed, 554 insertions(+), 26 deletions(-)
create mode 100644 Samples/outlook-spam-reporting/.gitignore
create mode 100644 Samples/outlook-spam-reporting/env/.env.dev
create mode 100644 Samples/outlook-spam-reporting/infra/azure.bicep
create mode 100644 Samples/outlook-spam-reporting/infra/azure.parameters.json
create mode 100644 Samples/outlook-spam-reporting/manifest.json
create mode 100644 Samples/outlook-spam-reporting/outlook-spam-reporting.zip
create mode 100644 Samples/outlook-spam-reporting/package.json
create mode 100644 Samples/outlook-spam-reporting/teamsapp.yml
create mode 100644 Samples/outlook-spam-reporting/webpack.config.js
diff --git a/Samples/outlook-spam-reporting/.gitignore b/Samples/outlook-spam-reporting/.gitignore
new file mode 100644
index 000000000..878f59ae2
--- /dev/null
+++ b/Samples/outlook-spam-reporting/.gitignore
@@ -0,0 +1,33 @@
+# TeamsFx files
+env/.env.*.user
+env/.env.local
+appPackage/build
+
+# Dependency directories
+node_modules
+
+# Azure Functions artifacts
+bin
+obj
+appsettings.json
+
+# ignore local.settings.json if it contains your own credentials
+# local.settings.json
+
+# misc
+.DS_Store
+.deployment
+.env
+
+# build
+/dist
+
+# Azurite emulator
+_storage_emulator
+
+# Local data
+.localConfigs
+.notification.localstore.json
+
+# production
+/build
\ No newline at end of file
diff --git a/Samples/outlook-spam-reporting/README.md b/Samples/outlook-spam-reporting/README.md
index 427962e4d..32088e495 100644
--- a/Samples/outlook-spam-reporting/README.md
+++ b/Samples/outlook-spam-reporting/README.md
@@ -39,59 +39,140 @@ To learn about key components of this sample, see [Implement an integrated spam-
## Prerequisites
-A Microsoft 365 subscription.
+- A Microsoft 365 subscription.
-> [!NOTE]
-> If you don't have a Microsoft 365 subscription, you might qualify for a free developer subscription that's renewable for 90 days and comes configured with sample data. For details, see the [Microsoft 365 Developer Program FAQ](https://learn.microsoft.com/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-).
+ > [!NOTE]
+ > If you don't have a Microsoft 365 subscription, you might qualify for a free developer subscription that's renewable for 90 days and comes configured with sample data. For details, see the [Microsoft 365 Developer Program FAQ](https://learn.microsoft.com/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-).
+
+- (Optional) If you want to run the web server on localhost, install a recent version of [npm](https://www.npmjs.com/get-npm) and [Node.js](https://nodejs.org) on your computer. To check if you've already installed these tools, from a command prompt, run the following commands.
+
+ ```console
+ node -v
+ npm -v
+ ```
+
+- (Optional) If you want to run the sample with a [unified manifest for Microsoft 365](https://learn.microsoft.com/office/dev/add-ins/develop/json-manifest-overview) using GitHub as the web host, install the [Teams Toolkit command line interface (CLI)](https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-cli). From a command prompt, run `npm install -g @microsoft/teamsapp-cli`.
+- (Optional) If you want to deploy the sample with the unified manifest for Microsoft 365 to Microsoft Azure, install the following:
+ - An Azure subscription.
+ - [Visual Studio Code](https://code.visualstudio.com/)
+ - [Teams Toolkit extension for Visual Studio Code](https://learn.microsoft.com/microsoftteams/platform/toolkit/install-teams-toolkit)
## Run the sample
-Run this sample in Outlook on Windows (new or classic) or on the web using one of the following add-in file hosting options.
+Run this sample with a [unified manifest for Microsoft 365](#run-with-the-unified-manifest-for-microsoft-365) or [add-in only manifest](#run-with-the-add-in-only-manifest). Use one of the following add-in file hosting options.
-### Run the sample from GitHub
+> [!NOTE]
+> The spam-reporting sample with the unified manifest for Microsoft 365 is currently only supported in classic Outlook on Windows. To run the sample in Outlook on the web or the new Outlook on Windows, use the add-in only manifest.
-1. Download the **manifest.xml** file from this sample to a folder on your computer.
-1. Sideload the add-in manifest in Outlook on Windows (new or classic) or on the web by following the manual instructions in [Sideload Outlook add-ins for testing](https://learn.microsoft.com/office/dev/add-ins/outlook/sideload-outlook-add-ins-for-testing#sideload-manually).
-1. Follow the steps in [Try it out](#try-it-out) to test the sample.
+### Run with the unified manifest for Microsoft 365
-### Run the sample from localhost
+#### Use GitHub as the web host
-If you prefer to host the web server for the sample on your computer, follow these steps.
+The quickest way to run the sample is to use GitHub as the web host. However, you can't debug or change the source code. The add-in web files are served from this GitHub repository.
-1. Install a recent version of [npm](https://www.npmjs.com/get-npm) and [Node.js](https://nodejs.org/) on your computer. To verify if you've already installed these tools, run the commands `node -v` and `npm -v` in your terminal.
-1. You need http-server to run the local web server. If you haven't installed this yet, run the following command.
+1. Download the **outlook-spam-reporting.zip** file from this sample to a folder on your computer.
+1. Sideload the sample to Outlook by following the instructions in [Sideload with the Teams Toolkit CLI (command-line interface)](https://learn.microsoft.com/office/dev/add-ins/testing/sideload-add-in-with-unified-manifest#sideload-with-the-teams-toolkit-cli-command-line-interface).
+1. Follow the steps in [Try it out](#try-it-out) to test the sample.
+
+#### Use localhost
- ```console
- npm install --global http-server
- ```
+If you prefer to host the web server on localhost, follow these steps.
-1. You need Office-Addin-dev-certs to generate self-signed certificates to run the local web server. If you haven't installed this yet, you can do this with the following command.
+1. Clone or download this repository.
+1. From a command prompt, go to the project folder **/samples/outlook-spam-reporting**.
+1. Run the following commands.
```console
- npm install --global office-addin-dev-certs
+ npm install
+ npm start
```
-1. Clone or download this sample to a folder on your computer, then go to that folder in a console or terminal window.
-1. Run the following command to generate a self-signed certificate to use for the web server.
+ This starts the web server on localhost and sideloads the **manifest.json** file to Outlook.
- ```console
- npx office-addin-dev-certs install
+1. Follow the steps in [Try it out](#try-it-out) to test the sample.
+
+ > [!NOTE]
+ > You can't debug a spam-reporting add-in that uses the unified manifest at this time.
+
+1. To stop the web server and uninstall the add-in from Outlook, run the following command.
+
+ ```console
+ npm stop
```
- This command will display the folder location where it generated the certificate files.
+#### Use Microsoft Azure
+
+You can deploy this sample with the unified manifest to Microsoft Azure using the Teams Toolkit extension in Visual Studio Code.
+
+1. In Visual Studio Code, go to the activity bar, then open the Teams Toolkit extension.
+1. In the Accounts section of the Teams Toolkit pane, choose **Sign in to Azure** to sign in to your Azure account.
+1. After you sign in, select a subscription under your account.
+1. In the Development section of the Teams Toolkit pane, choose **Provision in the cloud**. Alternatively, open the command palette and choose **Teams: Provision in the cloud**.
+1. Choose **Deploy to the cloud**. Alternatively, open the command palette and choose **Teams: Deploy to the cloud**.
+
+Once the sample is successfully deployed, follow these steps.
+
+1. Copy the endpoint of your new Azure deployment. Use one of the following methods.
+ - In Visual Studio Code, select **View** > **Output** to open the Output window. Then, copy the endpoint for your new Azure deployment.
+ - In the Azure portal, go to the new storage account. Then, choose **Data management** > **Static website** and copy the **Primary endpoint** value.
+1. Open the **./webpack.config.js** file.
+1. Change the `urlProd` constant to use the endpoint of your Azure deployment.
+1. Save your change then run the following command.
+
+ ```console
+ npm run build
+ ```
-1. Go to the folder location where the certificate files were generated, then copy the **localhost.crt** and **localhost.key** files to the cloned or downloaded sample folder.
+ This generates a new **manifest.json** file in the **dist** folder of your project that will load the add-in resources from your storage account.
1. Run the following command.
```console
- http-server -S -C localhost.crt -K localhost.key --cors . -p 3000
+ npm run start:prod
```
- The http-server will run and host the current folder's files on localhost:3000.
+ Classic Outlook on Windows starts and the **manifest.json** file is sideloaded from the **dist** folder.
+1. Follow the steps in [Try it out](#try-it-out) to test the sample.
+1. To stop the web server and uninstall the add-in from Outlook, run the following command.
+
+ ```console
+ npm run stop:prod
+ ```
+
+### Run with the add-in only manifest
+
+#### Use GitHub as the web host
+
+The quickest way to run the sample is to use GitHub as the web host. However, you can't debug or change the source code. The add-in web files are served from this GitHub repository.
+
+1. Download the **manifest.xml** file from this sample to a folder on your computer.
+1. Sideload the add-in only manifest in Outlook on the web or on Windows (new or classic) by following the manual instructions in [Sideload Outlook add-ins for testing](https://learn.microsoft.com/office/dev/add-ins/outlook/sideload-outlook-add-ins-for-testing#sideload-manually).
+1. Follow the steps in [Try it out](#try-it-out) to test the sample.
+
+#### Use localhost
+
+If you prefer to host the web server on localhost, follow these steps.
+
+1. Clone or download this repository.
+1. From a command prompt, run the following commands.
+
+ ```console
+ npm install
+ npm run start:xml
+ ```
+
+ This starts the web server on localhost and sideloads the **manifest-localhost.xml** file to Outlook.
-1. Now that your localhost web server is running, you can sideload the **manifest-localhost.xml** file provided in the sample folder. To sideload the manifest, follow the manual instructions in [Sideload Outlook add-ins for testing](https://learn.microsoft.com/office/dev/add-ins/outlook/sideload-outlook-add-ins-for-testing#sideload-manually).
1. Follow the steps in [Try it out](#try-it-out) to test the sample.
+ > [!TIP]
+ > To debug a spam-reporting add-in, see [Debug your event-based or spam-reporting Outlook add-in](https://learn.microsoft.com/office/dev/add-ins/outlook/debug-autolaunch).
+
+1. To stop the web server and uninstall the add-in from Outlook, run the following command.
+
+ ```console
+ npm run stop:xml
+ ```
+
## Try it out
Once the add-in is loaded in Outlook, use the following steps to try out its functionality. The images in the following steps show how the spam-reporting add-in and its dialogs appear in classic Outlook on Windows. Note that the appearance may vary depending on your Outlook client.
@@ -145,5 +226,6 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
| 1.0 | March 26, 2024 | Initial release |
| 1.1 | July 1, 2024 | Create separate JavaScript files for supported clients |
| 1.2 | September 11, 2024 | Correct the `Office.actions.associate` call and consolidate the JavaScript files |
+| 1.3 | February 28, 2025 | Add support for the unified manifest for Microsoft 365 |
diff --git a/Samples/outlook-spam-reporting/env/.env.dev b/Samples/outlook-spam-reporting/env/.env.dev
new file mode 100644
index 000000000..8043fefee
--- /dev/null
+++ b/Samples/outlook-spam-reporting/env/.env.dev
@@ -0,0 +1,15 @@
+# This file includes environment variables that will be committed to git by default.
+
+# Built-in environment variables
+TEAMSFX_ENV=dev
+APP_NAME_SUFFIX=dev
+
+# Updating AZURE_SUBSCRIPTION_ID or AZURE_RESOURCE_GROUP_NAME after provision may also require an update to RESOURCE_SUFFIX, because some services require a globally unique name across subscriptions/resource groups.
+AZURE_SUBSCRIPTION_ID=
+AZURE_RESOURCE_GROUP_NAME=
+RESOURCE_SUFFIX=
+
+# Generated during provision, you can also add your own variables.
+AZURE_STATIC_WEB_APPS_RESOURCE_ID=
+ADDIN_DOMAIN=
+ADDIN_ENDPOINT=
\ No newline at end of file
diff --git a/Samples/outlook-spam-reporting/infra/azure.bicep b/Samples/outlook-spam-reporting/infra/azure.bicep
new file mode 100644
index 000000000..026880386
--- /dev/null
+++ b/Samples/outlook-spam-reporting/infra/azure.bicep
@@ -0,0 +1,26 @@
+@maxLength(20)
+@minLength(4)
+param resourceBaseName string
+param staticWebAppSku string
+
+param staticWebAppName string = resourceBaseName
+
+// Azure Static Web Apps that hosts your static web site
+resource swa 'Microsoft.Web/staticSites@2022-09-01' = {
+ name: staticWebAppName
+ // SWA do not need location setting
+ location: 'centralus'
+ sku: {
+ name: staticWebAppSku
+ tier: staticWebAppSku
+ }
+ properties: {}
+}
+
+
+var siteDomain = swa.properties.defaultHostname
+
+// The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
+output AZURE_STATIC_WEB_APPS_RESOURCE_ID string = swa.id
+output ADDIN_DOMAIN string = siteDomain
+output ADDIN_ENDPOINT string = 'https://${siteDomain}'
diff --git a/Samples/outlook-spam-reporting/infra/azure.parameters.json b/Samples/outlook-spam-reporting/infra/azure.parameters.json
new file mode 100644
index 000000000..adc251f3d
--- /dev/null
+++ b/Samples/outlook-spam-reporting/infra/azure.parameters.json
@@ -0,0 +1,12 @@
+{
+ "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
+ "contentVersion": "1.0.0.0",
+ "parameters": {
+ "resourceBaseName": {
+ "value": "tab${{RESOURCE_SUFFIX}}"
+ },
+ "staticWebAppSku": {
+ "value": "Free"
+ }
+ }
+}
\ No newline at end of file
diff --git a/Samples/outlook-spam-reporting/manifest.json b/Samples/outlook-spam-reporting/manifest.json
new file mode 100644
index 000000000..36d273f3c
--- /dev/null
+++ b/Samples/outlook-spam-reporting/manifest.json
@@ -0,0 +1,143 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/teams/vDevPreview/MicrosoftTeams.schema.json",
+ "manifestVersion": "devPreview",
+ "version": "1.0.0",
+ "id": "6a400915-dad1-4d85-98c0-6b2d204056c6",
+ "localizationInfo": {
+ "defaultLanguageTag": "en-us"
+ },
+ "developer": {
+ "name": "Contoso",
+ "websiteUrl": "https://www.contoso.com/help",
+ "privacyUrl": "https://www.contoso.com/help",
+ "termsOfUseUrl": "https://www.contoso.com/help"
+ },
+ "name": {
+ "short": "Spam-reporting add-in sample",
+ "full": "Spam-reporting add-in sample"
+ },
+ "description": {
+ "short": "Report spam or phishing emails using a spam-reporting add-in.",
+ "full": "Report spam or phishing emails using a spam-reporting add-in."
+ },
+ "icons": {
+ "outline": "assets/icon-64.png",
+ "color": "assets/icon-128.png"
+ },
+ "accentColor": "#230201",
+ "validDomains": [
+ "https://www.contoso.com",
+ "https://officedev.github.io"
+ ],
+ "showLoadingIndicator": false,
+ "isFullScreen": false,
+ "defaultBlockUntilAdminAction": false,
+ "authorization": {
+ "permissions": {
+ "resourceSpecific": [
+ {
+ "name": "MailboxItem.ReadWrite.User",
+ "type": "Delegated"
+ }
+ ]
+ }
+ },
+ "extensions": [
+ {
+ "requirements": {
+ "capabilities": [
+ {
+ "name": "Mailbox",
+ "minVersion": "1.14"
+ }
+ ],
+ "scopes": [
+ "mail"
+ ]
+ },
+ "runtimes": [
+ {
+ "requirements": {
+ "capabilities": [
+ {
+ "name": "Mailbox",
+ "minVersion": "1.14"
+ }
+ ],
+ "formFactors": [
+ "desktop"
+ ]
+ },
+ "id": "runtime_1",
+ "type": "general",
+ "code": {
+ "page": "https://officedev.github.io/Office-Add-in-samples/Samples/outlook-spam-reporting/src/spamreporting.html",
+ "script": "https://officedev.github.io/Office-Add-in-samples/Samples/outlook-spam-reporting/src/spamreporting.js"
+ },
+ "lifetime": "short",
+ "actions": [
+ {
+ "id": "onSpamReport",
+ "type": "executeFunction",
+ "displayName": "onSpamReport",
+ "multiselect": false,
+ "supportsNoItemContext": false
+ }
+ ]
+ }
+ ],
+ "ribbons": [
+ {
+ "contexts": [
+ "spamReportingOverride"
+ ],
+ "tabs": [],
+ "fixedControls": [
+ {
+ "id": "spamReportingButton",
+ "type": "button",
+ "label": "Report Spam Message",
+ "enabled": false,
+ "icons": [
+ {
+ "size": 16,
+ "url": "https://officedev.github.io/Office-Add-in-samples/Samples/outlook-spam-reporting/assets/icon-16.png"
+ },
+ {
+ "size": 32,
+ "url": "https://officedev.github.io/Office-Add-in-samples/Samples/outlook-spam-reporting/assets/icon-32.png"
+ },
+ {
+ "size": 80,
+ "url": "https://officedev.github.io/Office-Add-in-samples/Samples/outlook-spam-reporting/assets/icon-80.png"
+ }
+ ],
+ "supertip": {
+ "title": "Report Spam Message (GH)",
+ "description": "Report an unsolicited message."
+ },
+ "actionId": "onSpamReport"
+ }
+ ],
+ "spamPreProcessingDialog": {
+ "title": "Report Spam Message",
+ "description": "Thank you for reporting this message.",
+ "spamReportingOptions": {
+ "title": "Why are you reporting this email?",
+ "options": [
+ "Received spam email.",
+ "Received a phishing email.",
+ "I'm not sure this is a legitimate email."
+ ]
+ },
+ "spamFreeTextSectionTitle": "Provide additional information, if any:",
+ "spamMoreInfo": {
+ "text": "Reporting unsolicited messages",
+ "url": "https://www.contoso.com/spamreporting"
+ }
+ }
+ }
+ ]
+ }
+ ]
+}
diff --git a/Samples/outlook-spam-reporting/outlook-spam-reporting.zip b/Samples/outlook-spam-reporting/outlook-spam-reporting.zip
new file mode 100644
index 0000000000000000000000000000000000000000..178aa9cf09687e133f08f88cd7b9dd77401bc2ae
GIT binary patch
literal 8484
zcmb7qbx>W;lkb6xbCKWN{cY|3vFB7zSD%^bn(8{!)BWjzDua*+002M(=p6LlF_$x4b0Y)5S0Vtwdj4u}
z>R=7Cgu8Osz#ScWNUYU<3tV^?K87*>nATaez&7bVD_k^``TUdZllhf&2y4tatoO5d
zQ7td%^Y!sZcWlN~gW^}W!ASGRt($$+ekZv1+5Co*Z|>>Fj7bxA^Cy@C`JGbzG0f$X
zrd>>>ST`r$vdhNi9>gKw9ZcMk%o1bFf(7!c5pNcaLP*Wthu;e}RD40J1?(k)Cc$Is
z@3nZCD`&^*5}YWahcJm2s!129V}7Y(2Y!-CFnKK^hPFyI>CBa`mcRGG&xb3&IzCug
zN$5@v%p*pK84jkZe&s>g5m>P7LvNNE&tQ;Hm;}%&)MV$16J{utPwS%L1u@*xgh-xa
z4jegv;3ME==GMbsBe0-H*ZI-%S8IwPZ0dF@yIsly;9}iuPKOJc0RD3q-dgslSKlJH
z;7PGU(Ac%MH*Df~vIzKDjLx08c^$M{%_$~*lm1N?2w9)a~X`Qq=f7fdtuWS6;^ajhSlL2LdERss^yGboIqnVz1xDtmpr6Z5H
z>nDE2U=7@DY01+mS4S~QwJc0jO>vRr_d!!T5#4C+sapMM#5D)P_o=KHZ_%Nl0@@!n+Bc8l@;NZ>z?x