Build and deploy to static web host
Publish as Outlook Mobile AddIn
This is a quick POC to show how Outlook Add-In uses backend service to handle email content.
-
Follow the guide to install latest Node.JS, use Yeoman to create Javascript project, and use Visual Studio Code to develop:
This add in uses the same project structure, and Taskpane.js contains the main logic.
The Add-In can be tested in Classic Outlook, New Outlook, and Web Outlook.
- If you are in debug phase, enable CORS for https://localhost:3000 on the service endpoint.
The menu layout in Web Outlook and New Outlook:
![image](https://private-user-images.githubusercontent.com/8623897/289811765-b06c4266-f819-4348-9514-d8af5b23a407.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzI4OTgxMTc2NS1iMDZjNDI2Ni1mODE5LTQzNDgtOTUxNC1kOGFmNWIyM2E0MDcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzdhYTA2OGExNDg5YTZmYmVjNzkzOWM4MmEyYjQ0ZTY1MDQ2NzFlYjA2Nzc5ODQzM2FmMTJkZGI0ZmVmNmYwMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.-l0vQFskJB0_5PokYpEXjqAWjZv6l8EoyVxKObWRDkI)
The menu layout in Classic Outlook:
![image](https://private-user-images.githubusercontent.com/8623897/289812057-3c842d0c-9645-4b99-bd1a-d68d122bd189.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzI4OTgxMjA1Ny0zYzg0MmQwYy05NjQ1LTRiOTktYmQxYS1kNjhkMTIyYmQxODkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTNlOTZmMWMwOGI4NTJjNzE2MjBmNzZhMWI1M2M4OWZkOWYzY2IxMWM2YTI1M2ZiODEzYTc3NjU4MTNkNDhjNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.pxtmvcLx0x_NpivSW-fMfrGdrfnD35i-C_5pTzkZVUA)
The TaskPane UI:
![image](https://private-user-images.githubusercontent.com/8623897/291472698-a998f7f6-3ef1-49fc-b175-2584cf4de934.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzI5MTQ3MjY5OC1hOTk4ZjdmNi0zZWYxLTQ5ZmMtYjE3NS0yNTg0Y2Y0ZGU5MzQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGZhM2MyYzgyYzhmODQ0NTFkNGI4N2QyOGUyMTE4MTgyMjgyMDZlMDFkNzk1NmIyYjRhNzBkNDEwYzE0ZDhjNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.j1MXmzVeb8HXWdXQdgqC9Q4WFNSysmzeGjuE0xy2I6M)
Here is the guide to publish the Built Script to Azure Blob Storage as a Static Web App:
https://learn.microsoft.com/en-us/office/dev/add-ins/publish/publish-add-in-vs-code
Alternatively, you can also run "npm run build", and put the "dist" folder content to other web host instead of Azure Blog Static Web App. Don't forget to change localhost reference in your manifest.xml as Step 9 points out.
Login as Global Admin or Application Admin on https://admin.microsoft.com , follow this guide to publish this AddIn manifest.xml as Integrated App in your organization, it may take up to 24 hours to show up for clients:
![image](https://private-user-images.githubusercontent.com/8623897/295799415-2dfa5f83-3b7e-4410-a187-d3d8f5abf543.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzI5NTc5OTQxNS0yZGZhNWY4My0zYjdlLTQ0MTAtYTE4Ny1kM2Q4ZjVhYmY1NDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTIwNWY4NzU3MGM4Y2JjNWYzMDc0NGI3NzhiMDI5ZjBiYTlkYmVjZWY0MzY3MzY4NDVhMzNjNzM4ZDFhY2Q5OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.-MEfhyAHCMmWBnyv7kiRUZAV8TIY_iEoKt8okxcDh2k)
![image](https://private-user-images.githubusercontent.com/8623897/295799480-be7f3f9c-2f4d-40cb-8f02-513170ea61de.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzI5NTc5OTQ4MC1iZTdmM2Y5Yy0yZjRkLTQwY2ItOGYwMi01MTMxNzBlYTYxZGUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzQyMWJmNDJiNjhhYTQyZmM0NWY3ZTkyMWQwNmYxOWIyZDk1OWMyNTY2MTU3NTM0OTAwZDliYzNkNzY0NzIwMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.j4RU4ymGj_WEh2PqIVfLKAcNsSHEs_O_6i22vhfWa68)
About more information about the publish process and related requirement, can read:
https://learn.microsoft.com/en-us/office/dev/add-ins/publish/publish
To support Mobile (IOS) device, it requires to define MobileFormFactor in manifest.xml, the guideline is:
https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/outlook-mobile-addins
Pay attention to the Difference section.
Besides this, ensure the resid is decalred in Resources.
There is a good discussion and reference in stackoverflow
The manifest.xml in this project is also updated to support Mobile and PC Outlook clients.
![image](https://private-user-images.githubusercontent.com/8623897/296703812-eb5e0ab8-de93-4e88-985f-f2398bd6a322.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzI5NjcwMzgxMi1lYjVlMGFiOC1kZTkzLTRlODgtOTg1Zi1mMjM5OGJkNmEzMjIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2UwNjNiYjc2YjQ0NDE5Y2VjNTQyZDFkOTExOWNjNDg3MDFhYmViYjM5MmEwOTJiZjFhM2RiZGNmMGFjM2EzMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Kub9qN8Gsp13PaRSdUiNOMjcNj3ixJ6Q5nlQwGQZ_OY)
![image](https://private-user-images.githubusercontent.com/8623897/296704206-191e1fb7-5535-401b-ae67-92ca3aa08f78.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzI5NjcwNDIwNi0xOTFlMWZiNy01NTM1LTQwMWItYWU2Ny05MmNhM2FhMDhmNzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Yjc3MDJkNTBiYmE4NWZjODA4ODg2OWJhMTA3MGYzOTBkZTljMzI2YWIxNjU0NGQxMTkzZDBhOGFiNDkxYmE4ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Mf5RKz8rz131RubF044aS4HwHgeLG0no9rrQ8hBMCvM)
For Windows 11 environment, suggest to follow this article:
https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-desktop-using-edge-chromium
Note: It is possible to use remote URL to replace localhost:3000 in manifest.xml and continou using local debugging. If the breakpoint cannot be hit, can use the Edge Inspact to set breakpoints and debug it:
![image](https://private-user-images.githubusercontent.com/8623897/301799986-d4e6fb4a-5260-485a-baf6-d225fe88ab57.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzMwMTc5OTk4Ni1kNGU2ZmI0YS01MjYwLTQ4NWEtYmFmNi1kMjI1ZmU4OGFiNTcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTM4NzA1ZTdlNWU0NDM5NjM1OWIyYWRkYmNhZGQyZjRlMmVlYTAxYTg5NDhlNzBhZmJkNzVkYzNhNjU0MGE4MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.jpaOXgSZMP5E0FfpWau4Vnr5hFPzBCb-Q5DEdX_NLB4)
![image](https://private-user-images.githubusercontent.com/8623897/301799709-350db2b0-530c-4695-b624-fc1139e68e69.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NDAzNjMsIm5iZiI6MTcyNTk0MDA2MywicGF0aCI6Ii84NjIzODk3LzMwMTc5OTcwOS0zNTBkYjJiMC01MzBjLTQ2OTUtYjYyNC1mYzExMzllNjhlNjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTBUMDM0NzQzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGRkNGY3YTFlMWEzMzY5YzVmYzc4OWI1N2YxZDU1YTM4YzFlNDNkYWYyNzAxZDcxMWM0NTQ4NTg1YzczNTM3NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.uurb4gjb8vtEXVmw4dXOo15ttS9U_hxZbobhuLE5yxI)
If hits dev enviornment issue (Yoeman Office debug or build), can raise issues to: