I have created an addin for outlook that works as expected on Web, Windows and MacOS. But recently i have introduced Controls such as TaskPane Menu Buttons, Which on click invoke a function.
In Manifest.xml
<Control xsi:type="Button" id="msgComposeFunctionButton">
<Label resid="funcComposeButtonLabel" />
<Supertip>
<Title resid="funcComposeSuperTipTitle" />
<Description resid="funcComposeSuperTipDescription" />
</Supertip>
<Icon>
<bt:Image size="16" resid="InfoIcon.16x16" />
<bt:Image size="32" resid="InfoIcon.32x32" />
<bt:Image size="80" resid="InfoIcon.80x80" />
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>addBccToComposeEmail</FunctionName>
</Action>
</Control>
In Commands.js
function addBccToComposeEmail(event) {
Office.context.mailbox.item.bcc.setAsync(['test.test#test.com']);
event.completed();
}
This works as expected on MacOS and Web, but shows a loader message in Windows desktop client which never stops.
Spinning loader image
Kindly let me know what the issue might be ?
#Outlook Team pls help here.
#Office JS team, Can u kindly respond to this question ?
Related
I am developing an Outlook Add-in TypeScript Angular add-in. I deployed my add-in to Azure and it worked fine. I'm getting the error (screenshot for reference) while swapping between emails and folders(Inbox/sent items, etc..) in Pinned mode. It is working fine in normal mode facing issue only when enabled pinned mode and swapping different mails.
Environment: Outlook on Windows
piece of Manifest code:
<OfficeTab id="messageReadTab">
<Group id="messageReadTab.mainGroup">
<Label resid="GroupLabel"/>
<Control xsi:type="Button" id="openSidebarReadButton">
<Label resid="TaskpaneButton.Label"/>
<Supertip>
<Title resid="TaskpaneButton.Label"/>
<Description resid="TaskpaneButton.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="Taskpane.Url"/>
<SupportsPinning>true</SupportsPinning>
</Action>
</Control>
</Group>
</OfficeTab>
Below is my code snippet:
Office.context.mailbox.addHandlerAsync(
Office.EventType.ItemChanged,
function (eventArgs) {
setTimeout(() => {
window.location.reload();
_this.homeDetails = new Array<any>();
_this.getNewMailToCcRecepEdit();
_this.loadIninailCalls();
}, 500);
},
function (asyncResult) {
// window.location.reload();
}
Error: I'm facing this error stating: Sorry, we can't load the add-in. Please make sure you have network and/or Internet connectivity. Click "Retry" once you're back online
I even tried to re-install Dev certificates in my local machine as mentioned here to resolve this but no luck.
Can anyone please guide me on this?
If required, I can share part of my manifest file.
Don't use window.location.reload. One of the benefits of using pinnable pane is to send you an event, so that you don't have to reload all your HTML/JS again. It is likely the reload is causing the issue.
If this is not the issue, it is likely something else in your event handler code that is causing it. You could try systematically removing/adding code in the event handler, to see what may be the culprit.
I set the SupportsPinning to true for outlook addins by modifying the manifest file as shown below. This allows the pin icon available. By default, the Pin is not selected. So is there a way to have the addins PINNED right away?
<!-- Task pane button -->
<Control xsi:type="Button" id="msgReadOpenPaneButton">
......
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="readTaskPaneUrl" />
<SupportsPinning>true</SupportsPinning>
</Action>
</Control>
Nope. Users are responsible for pinning the task pane. The add-in just provides such ability. I'd suggest filing a feature request at https://aka.ms/M365dev-suggestions .
I know that for whatever reason google decided to make all button text capitalised in lollipop.
How do I set it in my appcelerator app that all my button text is not uppercase, but just however I typed it?
All you need is to define a android values under
/app/platform/android/res/values.xml
<resources>
<style name="Theme.myTheme" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:buttonStyle">#style/customButton</item>
</style>
<style name="customButton" parent="Widget.AppCompat.Button">
<item name="android:textAllCaps">false</item>
</style>
Add android theme to manifest (Theme.myTheme):
<android xmlns:android="http://schemas.android.com/apk/res/android">
<manifest>
<supports-screens android:anyDensity="false"
android:largeScreens="true" android:normalScreens="true" android:smallScreens="true"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23"/>
<application android:debuggable="true"
android:icon="#drawable/appicon"
android:largeHeap="true" android:theme="#style/Theme.myTheme">
<activity
android:configChanges="keyboardHidden|orientation|screenSize" android:name="org.appcelerator.titanium.TiActivity"/>
</application>
</manifest>
</android>
Why do you need to use a button and depend on the system's default layout?
You could just use a View instead and listen to the click event.
You could style the view as you wish and it would look the same across different platforms.
As PhoneGap build says to upload only www.zip folder, then I am not able to understand where I have to put the icons and splash screen folder for each platform. Should I put that inside www?
The reason to ask this question is that if we are supposed to keep the icons and splashes inside www only, then my app will become very heavy and unnecessary icons and splash screen files will be added into my app as my app is cross platform, and I have include icons and splashes for all the platforms.
If we work offline (PhoneGap CLI), then we used to keep the files inside res outside the www folder, and Cordova build process automatically copies only platform specific icons and splash screen files, but here it will add all the files even that is required for selected platform.
As you have already figured out, PhoneGap Build has slightly different project structure. Yes, you only zip and upload the www folder and nothing else. By the way, the name of the zip file does not have to be www.zip, it can be anything else, but it must only contain the www folder, or better only the contents of the www folder without the folder itself.
You need to have icon.png and splash.png in the www root folder which serve as the default icon and splash screen. Then you add a subfolder for the additional images. You can name it res or any name you want with any number of folders inside, but add an empty file with the name ".pgbomit" in its root, which will tell PhoneGap Build to only include the required files from this folder like you mentioned. Then you reference each file with the full path in the config.xml which must be in the www root folder too.
So the structure should be something like:
www
res
icon
android
ios
splash
android
ios
config.xml
icon.png
splash.png
index.html
And your config.xml section related to the icons and splash screens should be like this (in version 5 and above):
<icon src="icon.png" />
<splash src="splash.png" />
<platform name="ios">
<icon src="res/icon/ios/icon.png" width="57" height="57" />
<icon src="res/icon/ios/icon#2x.png" width="114" height="114" />
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/icon-72#2x.png" width="144" height="144" />
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/icon-60#2x.png" width="120" height="120" />
<icon src="res/icon/ios/icon-60#3x.png" width="180" height="180" />
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/icon-76#2x.png" width="152" height="152" />
<splash src="res/splash/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/splash/ios/Default#2x~iphone.png" width="640" height="960"/>
<splash src="res/splash/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/splash/ios/Default-Portrait#2x~ipad.png" width="1536" height="2048"/>
<splash src="res/splash/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/splash/ios/Default-Landscape#2x~ipad.png" width="2048" height="1536"/>
<splash src="res/splash/ios/Default-568h#2x~iphone.png" width="640" height="1136"/>
<splash src="res/splash/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/splash/ios/Default-736h.png" width="1242" height="2208"/>
<splash src="res/splash/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>
The above config is for iOS, so add similar sections for other platforms you wish to support, but like iOS section above, make sure you follow the correct image sizes and names from the other platforms.
If I add the VersionOverrides element to define a custom Ribbon button to launch a task pane for my add-in, the tab for my custom pane is no longer visible in Outlook 2016, but it is in Outlook Online/OWA. It is defined without any activation rules so it should appear for every read message. So is it a bug or by design that the tab is hidden if I've defined a custom Ribbon button to launch it? If I remove the VersionOverrides element the tab appears again.
Edit Nov 2016. For Outlook add-ins custom panes are considered absolete
https://dev.office.com/blogs/make-your-add-ins-available-in-the-office-ribbon
Old answer:
I have discussed similar topic with a Senior Product Manager of Office extensibility. I hope he would not mind if I quote him. Outlook web add-ins Custom panes should be considered:
just legacy support for clients which don't today support Office commands. Commands provide a much more intuitive, natural and engaging way to use add-ins, which is why we’re pushing for them very hard.
Having said that, OWA does not support commands yet. Owa looks in your manifest for the old FormSettings element and display your custom pane same as before when add-ins commands did not exist. Same thing for Office 2016 when there is no VersionOverrides element in your manifest for retro-compatibility purposes.
Now it is difficult for us, add-ins developers, to propose now an add-in with completely different UX between OWA and Desktop. Then, if you want to have the Custom Pane working with Add-ins commands in Outlook Desktop 2016 (only host that supports commands at the time of the writing) you have to specified it with an ExtensionPoint with type xsi:type="CustomPane" in your VersionOverrides see this example
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
<Requirements>
<bt:Sets DefaultMinVersion="1.3">
<bt:Set Name="Mailbox" />
</bt:Sets>
</Requirements>
<Hosts>
<Host xsi:type="MailHost">
<DesktopFormFactor>
<FunctionFile resid="functionFile" />
<ExtensionPoint xsi:type="CustomPane">
<RequestedHeight>250</RequestedHeight>
<SourceLocation resid="customPaneUrl"/>
<Rule xsi:type="RuleCollection" Mode="Or">
<Rule xsi:type="ItemIs" ItemType="Message"/>
</Rule>
</ExtensionPoint>
<ExtensionPoint xsi:type="MessageReadCommandSurface">
<OfficeTab id="TabDefault">
<Group id="msgReadDemoGroup">
<Label resid="groupLabel" />
<Tooltip resid="groupTooltip" />
<Control xsi:type="Button" id="msgReadOpenPaneButton">
<Label resid="paneReadButtonLabel" />
<Tooltip resid="paneReadButtonTooltip" />
<Supertip>
<Title resid="paneReadSuperTipTitle" />
<Description resid="paneReadSuperTipDescription" />
</Supertip>
<Icon>
<bt:Image size="80" resid="test-icon-80" />
</Icon>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="taskPaneUrl" />
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
</Resources>
</VersionOverrides>