Closed cut2run closed 4 months ago
Assigning @samantharamon to investigate.
Hello guys, We have already passed this point and built our add-on as the bundled JS file for event-based activation. Right now it's at your discretion to close this ticket or work on it. For someone interested in the topic, we probably wouldn't figure out certain points without "Viva Insights" add-on by Microsoft. This is an enterprise-quality event-based add-on. It's copyrighted, so it doesn't have a GitHub entry, but we learned a lot by looking at bundled JavaScript source code. It would be nice to have similar GitHub examples for everyone to see. I am certain, it would help the community to write more mature, enterprise-grade add-ons.
Hi @cut2run,
My apologies for not responding here sooner.
I understand that you've already built a bundled JS file for your event-based add-in. Event-based add-ins in classic Outlook on Windows use a custom sandbox that only supports JavaScript up to ECMAScript 2016. Classic Outlook on Windows doesn't use a webview sandbox for these add-ins. Because of this, only isomorphic JS libraries work well within this custom sandbox. Unfortunately, JQuery isn't one of those supported libraries as it uses DOM manipulation. The custom sandbox doesn't support DOM or BOM.
On that note, the JavaScript-only runtime used by classic Outlook on Windows is moving to the V8 JS engine, so that you can implement later ECMAScript standards in your event-based add-in. To learn more, see the "JavaScript runtime update" in What's new for Office Add-ins at Build 2024.
Before I close this issue, I want to address your suggestion to further enhance our existing samples. I added this to our backlog to look into further, so that we can provide samples that would benefit the community. We're hoping the move to the V8 engine will open up more functionality for event-based add-ins, but we'll also investigate other ways we can provide more real-life scenarios.
Thank you for your feedback. Please don't hesitate to create a new issue on GitHub if you have additional questions or feedback.
Question
The recent Outlook-set-signature example is a great attempt to display how to use webpack to build event-based activation add-on. When following the example, it was easy to understand, how to build with the packager the entire add-on, including taskpane and event-based parts to include appropriate dependencies, do multi-scripting, etc. However, the most complicated part to understand and very hard to find any information for was left uncovered. So let me explain ...
The example completely covers how to build the entry point to be used in webcontrol runtime environment. Basically, this is similar to creating the entry point for taskpane and we use the packager (webpack) to produce the HTML file with appropriate dependencies. For example, when built,
autorunweb.html
would include not just the main scriptautorun.js
but all required dependencies (for examplepolyfill.js
lib; may include jQuery as well, but the example uses external source, which is fine for demonstration purpose to include at least one 3rd party library) ...To finish with the introduction let's assume the
autorun.js
REQUIREDpolifill.js
and will fail without it. Or we can assumejQuery
is required as well in order main script to work. So, this runtime (web-browser control) will handle the load of all of the required dependencies and the produced HTML file will properly work under Outlook on Web, Mac new UI, etc.Finally to the question. Outlook desktop on Windows uses JS runtime instead. The entry point MUST be the single JS file, which the example has in the manifest. So far we just following the Event-based activation behavior and limitations where stated ...
But when we look close on the example provided you just copied the main file without any processing and manifest pointed to this file... Webpack command:
Manifest:
If we still assume the
autorunshared.js
requirespolifill.js
or the entirejQuery
library, the script will fail and I assume your example as well. It works only because the code really doesn't require thepolifill
orjQuery
, I assume Outlook JS runtime will not have those dependencies, as it loads only the single JS file. Am I missing something? The example doesn't really explain how to load the required dependencies for the main JS file.What I've done so far when trying to work on our company add-on ...
We are using webpack from the very first version of our add-on (years ago), as the Yeoman Generator is actually generates the add-on template this way. To add the event-based extension point I used the webpack to generate the single JS file with all of the required dependencies (kinda fat JS file). There are a lot of 3rd party dependencies for our code, such as polifill, jQuery, bootstrap, phonelib, etc. The HTML entry point is clean and following the the documentation ...
When the page loaded everything work as expected, even when webpack handling "unpacking" of this fat
launchEvents.min.js
file on the fly. When I pointed to the same`launchEvents.min.js
JS file for Outlook Desktop JS runtime. It doesn't work and failing by timeout.manifest.xml
It looks like it does loading the JS, but most likely cannot find the association entry ...
because it's "hidden" by webpack packaging as any other 3rd party dependencies. May be I am wrong, but I have a hard time to find any "mature" example on how the single JS file have to look like when combined with 3rd party dependencies by webpack. And ALL your Outlook event-based examples are not helpful.
I am not asking you to extend the example (it might be a great idea for someone else in the future), but at least would you provide with any information on how this single JS must be packaged with webpack when there are some 3rd party dependencies. In your case for example the dependency for
poolifill.js
.Sorry for the long essay, just wanted to make it clear.