Office Add-in : How to identify back press in android outlook app - outlook

I have a office add-in which I enabled for mobile too. After viewing multiple tabs in the add-in, Android back button is actually coming out of the add-in instead of going to previous view. This is expected since I don't change the URL for each page(I do ajax).
I got a review comment from Microsoft reviewer asking I should handle navigation in a way that, it should go back to previous view.
I believe Android back button is more like a hardware event. Is that is even possible to identify that back button event?
Any help would be greatly appreciated.

After the Outlook add-in is loaded, the Android back button press is the same as pressing the back button in your web browser. The outlook add-in runs inside an embedded Android Webview which supports the popstate event. You can set up an event listener for the popstate event:
window.addEventListener('popstate', () => {
this.onBackButtonPressed();
}, false);
The popstate event only fires if there are items in the history stack. So to make sure that the history is not empty you can push an item when your add-in is loading:
if (window.history && window.history.pushState) {
window.history.pushState({}, '');
}
Note that the Office JS API sets the history.pushState and history.replaceState functions to null (Github issue). In order to call pushState after the Office JS API has loaded you need to either use a polyfill or restore the pushState function.

Related

Teams in browers opens up new tab when Launch() function is used from within Power App (canvas)

I'm doing a custom Power App (canvas) that is used inside Teams as a Tab in a channel. This app has some deeplinks to other channels inside teams (the link url is copied from within teams and are verified and works ok). I'm using the Launch() function to do these deeplink redirects. I get the desired behavior in the Desktop and Mobile version of Teams, but in the browser version whatever I try it always open up the link in a new tab. I would like it to open up in the same window and keep the navigation context for a smooth UX.
I've tried booth LaunchTarget.New and LaunchTarget.Replace. Also used booth 'https://' and 'msteams://' in the deeplink urls. I would expect that the LaunchTarget.Replace would have done what I wanted, but it doesn't work.
The only way I've seen links working as expected in all three versions of teams (Desktop, Mobile and Browser). Is if I manually insert a link inside a message in a 'Posts' tab or if I manually insert a link inside a Wiki. If I do the same in for example a OneNote document it doesn't work and open up in a new Tab. Its quite inconsistent behavior.
Any help, info or workaround is appropriated.

Outlook web addin issues

I am developing an Outlook Web Addin using Fabric UI.I have run into couple of issues which are given as follows:
The following is my outlook web addin screen shot:
1:
Issue #1 : I do not have access to addin title "My Test Outlook Web Addin" from within my code. I want to change the CSS properties of the title but I do not seem to have access. This title is defined in an XML file.
Issue #2: I have "Save" and "Cancel" buttons. In their call backs I need to perform some task and close the addin dialog. But I am not able to close the addin dialog. I can close the addin by clicking 'X' icon on the top, but not from within my code.
Issue #3, How to get file types icon with plane JS? (https://developer.microsoft.com/en-us/fabric#/styles/web/file-type-icons)
I am not using React or AngularJS. I am using Core fabric UI with plane JS.
Any help on these issues and on how to control properties of outlook web addin is highly appreciated.
Thanks!
For Issue #1: It is currently not possible to change the styling of the title bar. We track Outlook add-in feature requests on our user-voice page. Please add your request there. Feature requests on user-voice are considered when we go through our planning process.
For Issue #2: You can use the closeContainer API to close the add-in task pane.

Can I add a button to my add-in next to Send/Discard buttons?

I am writing an Outlook Add-In (Web version, Desktop) and so far I was able to add a link to my app in the contextual menu (see screenshot below - highlighted in yellow). This work well, but it is almost impossible to find the add-in and this is resulting in a ton of customer support calls. I was wondering if there is a way to add the button next to "Send", "Discard", or after the "Elipsis" buttons. This way the add-in would be more visible.
I was thinking about directly modifying the DOM if it is not possible, but I would prefer to not do that.
You can add a button there neither from a web based JS addin nor from a COM based addin for the desktop version of Outlook.

How to force the page to reload when the hardware back button is pressed?

I am developing a Cordova (PhoneGap) application using jQuery Mobile framework for Windows Phone 7. I'd like to get some pages refreshed/reloaded when the user hits the hardware back button. I am not using any data-rel="back" attribute.
How can I force the page to be reloaded when the user hits the hardware back-button?
Listen to the back button event and call the necessary code there. I'm not familiar with jQuery Mobile, but it seems like you could use changePage with the reloadPage option set to true.

How do I enable/disable my Ribbon Buttons in Outlook

I have an Outlook Add-in created with VSTO. Using the Ribbon Designer I have created a tab with three buttons on it. (Environment: Outlook 2010, .NET 4.0, VSTO latest runtime)
When one of the buttons is pressed a modeless dialog is opened. As long as the user is working on this dialog I do not want him to be able to press the button again. So basically I want to gray out the button till the dialog is closed. How can I do this?
For whatever reason, in the button click handler, if I do this.button1.enabled = false; it is just not working. Am I missing something about the way ribbons work.
Thanks
You need to re-render the control using IRibbonUI.InvalidateControl(controlID) or IRibbonUI.Invalidate(). See MDSN on how to dynamically update the Fluent UI for reference. This is done for performance reasons so that you can change all your Fluent UI settings and then re-render all control changes at once. However, if you are only changing one UI element (as you indicate) this can seem confusing and unnecessary.

Resources