I am developing Outlook add-in using add-in command to execute a function.
The test version of the add-in will open dialog then user can choose to click OK or cancel then another dialog will appear and user can click OK to complete the action.
The add-in works well on iOS and web, but not on Android
I expected the add-in can work on web, iOS, Android
The add-in works very well on web and iOS. But when it comes to Android, the problem appears:
We are using ReactJs for the web part.
The code looks like:
command.js
import * as OfficeHelpers from '@microsoft/office-js-helpers';
Office.initialize = function() {
console.log('Office onReady!!!')
if (OfficeHelpers.Authenticator.isAuthDialog()) {
return
}
};
async function action(event) {
showNotification("step 1")
const result1 = await showDialog(dialogUrl , 18,25)
console.log(result1)
showNotification("step 2")
const result = await showDialog(dialogUrl , 20,25)
console.log(result)
event.completed()
}
async function showDialog(url, size1, size2){
//a promise wrapper for OfficeJs Office.context.ui.displayDialogAsync
}
function showNotification(message){
// a wrapper for Office.context.mailbox.item.notificationMessages.addAsync
}
//these bellow code following the tutorial to create add in by ReactJS
function getGlobal() {
return (typeof self !== "undefined") ? self :
(typeof window !== "undefined") ? window :
(typeof global !== "undefined") ? global : undefined
}
const g = getGlobal()
g.action = action
Hi @ntranvinh, thanks for taking the time to document this issue. We'll take a look and get back to you. Thanks!
hi @davidchesnut , @exextoc , any updates please?
More information that may help, the dialog webpage also use reactjs. We use webpack for bundling the script. Please note that it works well on iOS and owa, except Android.
Here is the code for demonstration:
dialog html:
<!doctype html>
<html lang="en" data-framework="javascript">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Success dialog page</title>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script type="text/javascript">
Office.initialize = function() {
console.log('Office initialized completely!!!')
};
</script>
<!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
<!-- Template styles -->
<link href="dialog.css?v=0.0.56" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
</div>
<script type="text/javascript" src="dialog.js?v=0.0.56"></script>
</body>
</html>
dialog.js
import * as React from 'react';
import * as ReactDOM from "react-dom";
import SuccessOwa from "./components/success-owa";
function loadUI() {
const message = 'Success message'
element = <SuccessOwa message={message}/>
ReactDOM.render(element, document.getElementById('container'))
}
/* Render application after Office initializes */
Office.onReady(() => {
loadUI()
});
success-owa
import * as React from "react";
import {ButtonType, PrimaryButton} from "office-ui-fabric-react";
export default class SuccessOwa extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {error: ""}
}
render() {
let that = this
return (
<div className="left-owa">
<p id="successfully-message">{this.props.message}</p>
<div className="bottom-right-owa">
<PrimaryButton
buttonType={ButtonType.hero}
onClick={function(){
try{
Office.context.ui.messageParent(JSON.stringify({ok: true }))
console.log('user clicked ok')
}
catch(ex){
that.setState({error: ex.message})
}
}}>OK</PrimaryButton>
</div>
<p>{this.state.error}</p>
</div>
);
}
}
Here is the code for openning dialog
```
static dialogCloseAsync(dialog, asyncResult) {
// issue the close
dialog.close();
// and then try to add a handler
// when that fails it is closed
setTimeout(function () {
try {
dialog.addEventHandler(Office.EventType.DialogMessageReceived, function () { });
dialogCloseAsync(dialog, asyncResult);
} catch (e) {
asyncResult(); // done - closed
}
}, 1000);
}
static showDialog(url, height, width) {
let that = this
return new Promise((resolve, reject) => {
let dialog = null
Office.context.ui.displayDialogAsync(url, { height: height, width: width, displayInIframe: true },
function (asyncResult) {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
reject(asyncResult);
} else {
dialog = asyncResult.value
dialog.addEventHandler(Office.EventType.DialogMessageReceived, (arg) => {
let result = JSON.parse(arg.message);
console.log(result)
that.dialogCloseAsync(dialog, () => {
resolve(result)
})
})
dialog.addEventHandler(Office.EventType.DialogEventReceived, arg => {
let error = null
switch (arg.error) {
case 12002:
error = "The dialog box has been directed to a page that it cannot find or load, or the URL syntax is invalid."
break;
case 12003:
error = "The dialog box has been directed to a URL with the HTTP protocol. HTTPS is required."
break;
case 12006:
error = "Dialog closed.";
break;
default:
error = "Unknown error in dialog box.";
break;
}
that.dialogCloseAsync(dialog, () => {
reject(new Error('Dialog closed with error: ' + error));
})
});
}
}
)
})
}
```
I also inject Sentry to catch the error if any. Sometimes the add in works well, there is no error logged in Sentry. But in case it is not working, there are errors that I've observed, not sure if it can catch all, but here is what I got:
TypeError
e.split is not a function
lib/1.1/hosted/telemetry/oteljs_agave.js at line 1:69980
{snip} p.Platform"];return function(e,t){if(!e)return!0;var n,i=e.split(".");if("Win32"===t)n=X;else{if("Mac"!==t)return!0;n=Y}for(var r=0;r
/lib/1.1/hosted/telemetry/oteljs_agave.js in e.initialize at line 1:70672
/lib/1.1/hosted/telemetry/oteljs_agave.js in new e at line 1:70310
/lib/1.1/hosted/telemetry/oteljs_agave.js in Function.e.createInstance at line 1:70406
/lib/1.1/hosted/office.js in Function.b.create at line 18:16527
/lib/1.1/hosted/office.js in d at line 18:16935
/lib/1.1/hosted/office.js at line 18:17079
I put sentry to capture message with dialog stuff. In case the dialog is hang and clicking button in the dialog doesn't do anything, I notice that the message I put in the callback of displayDialogAsync is never show up. It seems the dialog callback is not called.
Hello,
I am also seeing this issue, and also only on Android. My app is written in Angular.
My stacktrace is slightly different (possibly due to other external updates?):
[
"Unhandled Promise rejection:",
"e.split is not a function",
"; Zone:",
"<root>",
"; Task:",
"Promise.then",
"; Value:",
{
"name": "TypeError",
"message": "e.split is not a function",
"stack": "TypeError: e.split is not a function\n
at https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:69980\n
at ee (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70172)\n
at e.initialize (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70672)\n
at new e (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70310)\n
at Function.e.createInstance (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70406)\n
at Function.b.create (https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:18:16527)\n
at d (https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:18:16935)\n
at https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:18:17079\n
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (https://outlookapp-dist-leapaws.s3-ap-southeast-2.amazonaws.com/polyfills.bundle.js:6358:26)\n
at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (https://outlookapp-dist-leapaws.s3-ap-southeast-2.amazonaws.com/polyfills.bundle.js:6117:43)"
},
"TypeError: e.split is not a function\n
at https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:69980\n
at ee (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70172)\n
at e.initialize (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70672)\n
at new e (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70310)\n
at Function.e.createInstance (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70406)\n
at Function.b.create (https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:18:16527)\n
at d (https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:18:16935)\n
at https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:18:17079\n
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (https://outlookapp-dist-leapaws.s3-ap-southeast-2.amazonaws.com/polyfills.bundle.js:6358:26)\n
at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (https://outlookapp-dist-leapaws.s3-ap-southeast-2.amazonaws.com/polyfills.bundle.js:6117:43)"
]
I've contacted support on the Outlook app with the same info.
Please let me know if more information is required.
Hi, any update please?
Pinging @exextoc again...
Hello,
I would like to put on record my disappointment with the way Microsoft have handled this issue. It appears that it is not seen as important enough to warrant attention.
TL;DR: Outlook for Android is completely broken. We have provided our scenario. We have provided stack traces. PLEASE prioritize a fix for this ASAP!
Specifically, I will provide my experience with the Outlook for Android App Support below and the utter desperation with which I have tried to help along in searching for a solution:
My add-ins on AppSource currently do not have mobile support, and these past weeks I added mobile support as explained in the docs. As any good developer would do, I want to test my changes before sending the add-ins off to Microsoft for validation.
So, I begin testing, by side-loading my add-ins, again, as specified in the docs.
Everything works as expected on iOS. So far so good.
I begin testing on Android, and notice that my add-ins do not get past the initial Welcome screen. The view appears to be loading the next screen (the login screen, hosted on a different domain, which naturally has been declared in the manifest).
There are no errors displayed on the screen, so my next port of call would be the logs that are collected and pushed to our web-based logging dashboard. Here, I see a stacktrace similar to the one I provided above.
Well, that's weird. Maybe I messed up somewhere. So I painstakingly debug the issue (make code change -> push to test environment -> build + deploy -> start Android device -> check for + install Outlook for Android update -> clear caches -> load add-in -> perform problematic action -> pour over logs -> repeat).
After about a day of this, I create a dead-simple add-in and try that. Boom - same error.
I decide to contact support on the Outlook for Android app. I give them everything I've discovered thus far - including the link to this issue.
Now, I understand there's a script to follow when troubleshooting. But boy, did it seem like it was being followed blindly, fervently, even religiously, for no apparent reason.
I offer to send over the test manifest so that the technician can side-load and replicate. I am completely ignored.
I ask: can _anyone_ guarantee that my add-ins won't fail validation due this issue? I am completely ignored.
It is clear to me that no-one knows what they are doing.
Us long-suffering OfficeJS devs, we have our own deadlines that are extended purely due to our experience working through issues like this with Microsoft and knowing that support works at a snail's-pace. This would be fine if the issue is identified, acknowledged, prioritized, fixed, and released in a sane amount of time. But even acknowledgement of the bug isn't made and it is disheartening.
Exactly how much time would Microsoft need to fix a bug? Surely, weeks isn't the answer.
And I can say with absolute certainty that your customers, those OfficeJS devs, will eventually abandon this technology, more because quality support is non-existent than due to the bugs we find.
\<\/rant>
Sorry for delay, Can you please provide link to your add-in's manifest ? the Type Error mentioned does not break add-in. That error is related to internal telemetry. please provide manifest file. I will start debugging it.
Thanks
Hello @kapgupt,
Here is a link to the LEAP Mail Manager pointing to our test environment:
https://www.dropbox.com/s/ydzazr4k1uasv1w/LEAP.Office.Outlook.AddIn.test.xml?dl=0
As I mentioned before, this manifest has been updated to add mobile support. You should be able to sideload this and have it appear on your Android and iOS devices.
Please let me know if you need anything further.
Thank you.
@TheSamsterZA Can you please provide any test account using which i can test the add-in ?
Please share the exact problem(on which step ?) you are facing in case of android device ?
Thanks
@TheSamsterZA I checked the add-in, In Android it is having log:
"[AuthService] Redirecting to 'https://auth-test.leap.services/oauth/logout?redirect_uri=https://outlookapp-test.leap365.com/index.html' "
Seems add-in code is redirecting to home page instead of opening Dialog.
In Outlook web log was of opening dialog:
"Opening dialog with URL https://auth-test.leap.services/oauth/authorize?client_id=S639FGYFEDPLHTWM&redirect_uri=https://outlookapp-test.leap365.com/index.html&scope=*&response_type=token&newsession&view_target=&isInDialog=true"
Please check at your end and let me know if you need any support.
@kapgupt
Can you please provide any test account using which i can test the add-in ?
You can use [email protected] / Leap20171 to test.
Please share the exact problem(on which step ?) you are facing in case of android device ?
Details of my Android device:
Nokia 8
Android 9, security patch level: 1 August 2019
Outlook for Android version 4.0.7 (346)
auth-test.leap.services).So on Android, I can't even login on the add-in.
On iOS, the same add-in works great: I can login, and use the add-in as expected.
I checked the add-in
On mobile platforms, I am redirecting directly to the login web page.
On non-mobile platforms, I was directed by Microsoft to open a dialog to the login web page.
I do not see how this is relevant. It should not matter how I open the login web page, right? The flow is the same: login, then redirect back to the add-in domain, and proceed as normal.
Please check at your end and let me know if you need any support.
I need support. I need to know that the error and stack trace above will be fixed, and in a manner that does NOT break any other platforms (Outlook on Windows, Online, Mac, iOS, and Android).
Hi @kapgupt ,
Here is my sample git for the code:
https://github.com/ntranvinh/AndroidOutlookAddinSample
The add-in is also built and hosted, you can easily install the manifest in manifest folder and see the add-in on android.
The process can be stuck at any step, but sometimes it does not stuck. I also put a notification named "finished!" to indicate the add-in work is completed. Please reproduce many times (>10) to see the issue.
Note that it only happens on Android, it works very well on iOS.
Thank you.
@TheSamsterZA We are working on the problem, mean while you can try dialog flow for login. I will update you here, once we will get it fixed.
Hi @kapgupt , please also review my case to see if it has the same issue. Code and live sample posted.
@ntranvinh Thanks for reminding me and patience. I have found the root cause of problem. Soon Fix will be shipped.
@kapgupt Thank you, this is good news. Please remember to update here once the fix has shipped, I would be happy to verify.
@TheSamsterZA Your issue is different from the one @ntranvinh was facing.
Right now i could fix only @ntranvinh 's problem. I would suggest you to use dialog for login, mean while i will try to debug and fix.
@kapgupt I have pushed the change you suggested to the LEAP Mail Manager on our test environment. The add-in now opens a dialog on mobile (both Android and iOS) to the login page.
Unfortunately, on Android, after logging in, the dialog does not close, and in the logs I am seeing the same error:
TypeError: e.split is not a function
at https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:69980
at ee (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70172)
at e.initialize (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70672)
at new e (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70310)
at Function.e.createInstance (https://appsforoffice.microsoft.com/lib/1.1/hosted/telemetry/oteljs_agave.js:1:70406)
at Function.b.create (https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:25:16527)
at d (https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:25:16935)
at https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js:25:17079
at t.invoke (https://outlookapp-test.leap365.com/polyfills.edd7bd4bbe0876d4b552.bundle.js:1:89043)
at e.run (https://outlookapp-test.leap365.com/polyfills.edd7bd4bbe0876d4b552.bundle.js:1:84220)
On iOS, everything works just fine: the dialog opens, I log in, the dialog closes, and I can use the add-in as per usual.
This error is not related to add-in work flow. You can see this error even if add-in working perfectly. Can you share sample code which can help me to reproduce the issue or add-in manifest?
@kapgupt,
I shared a link to the manifest in a previous comment:
Here is a link to the LEAP Mail Manager pointing to our test environment:
https://www.dropbox.com/s/ydzazr4k1uasv1w/LEAP.Office.Outlook.AddIn.test.xml?dl=0
@TheSamsterZA , i have started working on it.
@TheSamsterZA I checked problem on Both iOS and Android when opening dialog, your parent page is getting refreshed. is it expected ? I It is possible that because of refresh, registered eventHandler of dialog is not getting executed.
Hi @kapgupt,
No, the page isn't being refreshed, the add-in is routing to the next page (the web app is written in Angular).
The way this is set up is:
Please let me know if any of this is unclear.
@TheSamsterZA , I checked multiple times and every time home page was getting reloaded.
As it has been long time, can you please send your email id and suitable time, we want set up a call with you to discuss it further.
@kapgupt I have just emailed you with details. Hopefully we can figure this out quickly! 馃槃
@kapgupt thank you for taking the time to attend our meeting. It was enlightening.
I have made some changes to the code for the LEAP Mail Manager pointing to our test environment. From my tests it appears that:
e.split is not a function still happens on Android, butThe code changes were:
window.location.href.Office.EventType.ItemChanged on mobile.Office.initialize (I use Office.onReady elsewhere) (see Initializing your add-in).Details of my Android device:
Nokia 8
Android 9, security patch level: 1 September 2019
Outlook for Android version 4.0.32 (357)
Please conduct your own tests and let me know what you find. Specifically, I would like to know when the fix for the e.split is not a function error is available.
Thank you.
@TheSamsterZA, Right now we are busy with some important project, we will soon pick the problem "e.split is not a function". Right now at this stage, i can not commit any date. be assured, we will fix it soon.
Hi @exextoc , could I know which version of Android Outlook app has this fix please? Thank you.
@ntranvinh our fix is ready. soon it will hit the production. Thanks for the patience.
Most helpful comment
Hello,
I would like to put on record my disappointment with the way Microsoft have handled this issue. It appears that it is not seen as important enough to warrant attention.
TL;DR: Outlook for Android is completely broken. We have provided our scenario. We have provided stack traces. PLEASE prioritize a fix for this ASAP!
Specifically, I will provide my experience with the Outlook for Android App Support below and the utter desperation with which I have tried to help along in searching for a solution:
My add-ins on AppSource currently do not have mobile support, and these past weeks I added mobile support as explained in the docs. As any good developer would do, I want to test my changes before sending the add-ins off to Microsoft for validation.
So, I begin testing, by side-loading my add-ins, again, as specified in the docs.
Everything works as expected on iOS. So far so good.
I begin testing on Android, and notice that my add-ins do not get past the initial Welcome screen. The view appears to be loading the next screen (the login screen, hosted on a different domain, which naturally has been declared in the manifest).
There are no errors displayed on the screen, so my next port of call would be the logs that are collected and pushed to our web-based logging dashboard. Here, I see a stacktrace similar to the one I provided above.
Well, that's weird. Maybe I messed up somewhere. So I painstakingly debug the issue (make code change -> push to test environment -> build + deploy -> start Android device -> check for + install Outlook for Android update -> clear caches -> load add-in -> perform problematic action -> pour over logs -> repeat).
After about a day of this, I create a dead-simple add-in and try that. Boom - same error.
I decide to contact support on the Outlook for Android app. I give them everything I've discovered thus far - including the link to this issue.
Now, I understand there's a script to follow when troubleshooting. But boy, did it seem like it was being followed blindly, fervently, even religiously, for no apparent reason.
I offer to send over the test manifest so that the technician can side-load and replicate. I am completely ignored.
I ask: can _anyone_ guarantee that my add-ins won't fail validation due this issue? I am completely ignored.
It is clear to me that no-one knows what they are doing.
Us long-suffering OfficeJS devs, we have our own deadlines that are extended purely due to our experience working through issues like this with Microsoft and knowing that support works at a snail's-pace. This would be fine if the issue is identified, acknowledged, prioritized, fixed, and released in a sane amount of time. But even acknowledgement of the bug isn't made and it is disheartening.
Exactly how much time would Microsoft need to fix a bug? Surely, weeks isn't the answer.
And I can say with absolute certainty that your customers, those OfficeJS devs, will eventually abandon this technology, more because quality support is non-existent than due to the bugs we find.
\<\/rant>