How to handle event based activation in Windows Outlook add-in using modern JS ecosystem

[Jareh88]

Overview

• We have an add-in that allows you to log in and create a meeting based on your account options/selections. It creates a meeting in our application and adds a template to the body of the event so users can join.
• Using smart alerts/event-based activation and a launchevent.js file
• Add-in has 3 entry points, index.html, commands.html and launchEvent.js. launchEvent.js is compiled from a launchEvent.ts file and we compile it to pre ECMA2016 so that it is compatible.
• On failing to send an appointmentOutlook offers no useful errors. the sending just hangs saying the add-in is unresponsive (and prompt comes up to "send anyway".
• Our manifest is validating correctly, with and without production flag

Context

• Our app uses Typescript, Vite for code compilation, GraphQL/Apollo
• GraphQL/Apollo queries are imported for use in our add-in so we can update our DB when the subject is updated.
• Our security setup requirements mean we can't have any endpoints available "publicly"
• Using VS Code as our editor
• Current status is: only on Windows Outlook app, when adding event attendees and trying to send our appointment the app hangs and we are eventually met with a prompt about our add-in being unresponsive.

Steps Taken So Far (non-exhaustive list, these are the most recent/relevant)

• We have switched from using ItemSend to handle our appointment sending due to it not being support on AppSource (adding it there is now a requirement). Our add-in works on all environments other than Windows Outlook (Office 365).
• We have simplified the launchevent.js file just so the event completes straight away to see if this works, still same issue.
• Made sure our compiled code is ECMA2016 or earlier, same issue.
• Runtime debugging seems useless without us duplicating our imported app code in launchEvent.js, Not able to set any useful breakpoints in bundle.js.
• Writing to ClientLogs which offers no useful information for our add-in
• Switching to notifications instead of displayDialogAsync as that is not supported

Things we're considering (but looking for other/better options)

• Putting together a raw XMLHttpRequest using Axios that mimics a graphql request from our app to our API.
• Duplicating our add-in code in launchevent so bundle.js has more places we can set useful breakpints and we can use runtime debugging
• Switching to use callbacks more so our transpilation is compatible and we avoid imports/async/await

Questions

• How should we approach the update on send requirement? It seems like we need to make large-scale changes to our application and potentially compromise our security approach. Our app uses a modern JS ecosystem and smart alerts are restrictive in that we must go back to ECMA2016 or before.
• Do you have any suggestions on how we interact with our API via launchevent.js that don't require a complete rewrite or raw request?
• Do you have any suggestions on how we'd effectively debug this issue? We've followed your documentation in both Windows 10 & 11 but found no real way to do so, nor have we found any useful errors.
• Are there any known issues or requirements we may have missed?

Let us know if you require any more details, we'll provide what we can. Many thanks in advance.

[omar-pk]

We are dealing with similar issues with event based activation support for old/classic Outlook on Windows. I think a lot of the challenges come from the ECMA2016 (or earlier) restriction. The MS documentation you linked in your description overview specifically states to avoid async/awaits and ternary operators, despite these being in spec for for ECMA2016. It's unclear what is truly supported. What method are you currently using to convert your modern JS?

[Jareh88]

I believe async/await were introduced in ECMA2017. Ternary/conditional operators I believe have been in a lot longer but things like the nullish coalescing operator were introduced much later, which could be why they're recommending we avoid.

We're currently using Vite to compile our typescript/modern JS to ECMA2016 or earlier. The entry points then refer to those compiled files.

[bas-eenhoorn]

Yeah you just cant use certain things. For example, you can not use window.location.href, as location does not exist. There is nothing to do about that other than to not use newer functions.

You can not use async and await, you cant use tenery?.operations. You must be careful when using any method, and really check if they are available. You should just write a wrapper for the XmlHttpRequest class. And for example, if we used [].include() in our script, which is not available in this older version, we just write a replacement method for it like: function _includes(source, value) { [identical implementation] }

Its annoying, I know. Our Event-Based Activation script is around 1800 lines at the moment, because we had to copy paste A LOT of duplicate code, because you cant load other scripts/libraries. So we needed to copy and paste all methhods we needed in EBA from our Outlook Office js wrapper, some common javascript libraries, etc.

Nothing to do about it. Just be secure.

[hello-chenchen]

i don't know why Windows Classic Outlook have so much limitation on event-based? but there is no limitation in On Send: https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/outlook-on-send-addins?tabs=windows And i raise an feature request to remove these limitation: https://feedbackportal.microsoft.com/feedback/idea/867e188d-77fd-ee11-a73d-6045bd841c15

[Adrian-MSFT]

My suggestion for this is to use tools like webpack to transpile the code into ECMA2016 or earlier to avoid these unsupported cases. If you'd like to submit a feature request, we track Outlook add-in feature requests on our Tech Community Page. Please submit your request there and choose the appropriate label(s). Feature requests on Tech Community are considered when we go through our planning process.