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>
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 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 ?
I am building my first VS extension, so my current skills in this area amount to following tutorials and asking questions. The extension is for encrypting/decryption a section of the web.config file of a web app project. I have 2 commands, and currently the buttons are set up in the .vsct file as follows:
<Buttons>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="EncryptConfigCommandId" priority="0x0100" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="MyMenuGroup" />
<Strings>
<ButtonText>Encrypt Mail Settings</ButtonText>
</Strings>
</Button>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="cmdidDecryptConfigCommand" priority="0x0100" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="MyMenuGroup" />
<Strings>
<ButtonText>Decrypt Mail Settings</ButtonText>
</Strings>
</Button>
</Buttons>
This gives me 2 buttons in the Tools menu, as follows:
Encrypt Mail Settings
Decrypt Mail Settings
I would like to have just one top level button in the Tools menu, with 2 nested buttons, one for each operation, e.g:
Config Encryptor
...Encrypt Mail Settings
...Decrypt Mail Settings
How do I achieve the outcome I am looking for?
Related documents about this issue:
Add submenu to menu, Add menu to menu bar, GUIDs and IDs for the VS Menus.
What we want:
Click the Tools menu in VS=>display Config Encryptor submenu, Click the Config Encryptor menu will display Encrypt Mail Settings and Decrypt Mail Settings commands.
The structure in my xx.vsct:
Tools menu in IDE
--SubMenuGroup
--SubMenu1
--ButtonsGroup
--EncryptConfigCommandId(Encrypt Mail Settings)
--DecryptConfigCommandId(Decrypt Mail Settings)
The real content in Commands section:
<Commands package="guidEncryptConfigCommandPackage">
<Menus>
<Menu guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenu1" priority="0x0100" type="Menu">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenuGroup"/>
<Strings>
<ButtonText>Config Encryptor</ButtonText>
<CommandName>Config Encryptor</CommandName>
</Strings>
</Menu>
</Menus>
<Groups>
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="ButtonsGroup" priority="0x0600">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenu1"/>
</Group>
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="SubMenuGroup" priority="0x0600">
<Parent guid="guidSHLMainMenu" id="IDM_VS_MENU_TOOLS"/>
</Group>
</Groups>
<Buttons>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="EncryptConfigCommandId" priority="0x0100" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ButtonsGroup" />
<Icon guid="guidImages" id="bmpPic1" />
<Strings>
<ButtonText>Encrypt Mail Settings</ButtonText>
</Strings>
</Button>
<Button guid="guidEncryptConfigCommandPackageCmdSet" id="DecryptConfigCommandId" priority="0x0110" type="Button">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ButtonsGroup" />
<Icon guid="guidImages" id="bmpPic1" />
<Strings>
<ButtonText>Decrypt Mail Settings</ButtonText>
</Strings>
</Button>
</Buttons>
<!--The bitmaps section is used to define the bitmaps that are used for the commands.-->
<Bitmaps>
<Bitmap guid="guidImages" href="Resources\EncryptConfigCommand.png" usedList="bmpPic1, bmpPic2, bmpPicSearch, bmpPicX, bmpPicArrows, bmpPicStrikethrough"/>
</Bitmaps>
</Commands>
And don't forget to define the IDSymbol in GuidSymbol:
<!-- This is the guid used to group the menu commands together -->
<GuidSymbol name="guidEncryptConfigCommandPackageCmdSet" value="{70c1a496-88b4-4c83-8539-39decdbdb8fb}">
<IDSymbol name="ButtonsGroup" value="0x1020" />
<IDSymbol name="EncryptConfigCommandId" value="0x0100" />
<IDSymbol name="DecryptConfigCommandId" value="0x0110" />
<IDSymbol name="SubMenu1" value="0x1100"/>
<IDSymbol name="SubMenuGroup" value="0x1150"/>
</GuidSymbol>
According to these three document above:
1.We can add submenu to an existing menu or custom menu according to the first document.Not clearly described in documents how to structure the button, menu, group and what's the relationship between them, but check the content in its code we can find 1. To add a submenu to Tools menu, we need to set a group as its parent, then sets the Tools menu as its parent.
2.And to group two buttons to a submenu, we need to set the two buttons's parent as GroupB, then set the SubMenu as GroupB's parent.
3.According to third document, the menus and groups on the Visual Studio menu bar use the GUID guidSHLMainMenu. And the ID of Tools menu is IDM_VS_MENU_TOOLS.
That's why I edit the content in this structure, luckily it works. And since I may misunderstand something in the documents, if there's something wrong or something can be better feel free to correct me:)
The appearance when debugging:
In addition:
1.About managing the handler of the commands see this.
2.See this document which indicates to add submenu to another VS menu, we need a a group in this process.
To add a group to an existing Visual Studio menu, set one of the following menus as its parent.
You need to create Menu for your buttons
<Menus>
<Menu guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenu" priority="0x0100" type="Menu">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenuGroup"/>
<Strings>
<MenuText>Config Encryptor</MenuText>
<ButtonText>Config Encryptor</ButtonText>
<CommandName>Config Encryptor</CommandName>
</Strings>
</Menu>
</Menus>
And set parents for Group
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenuGroup" priority="0x0100">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenu"/>
</Group>
<Group guid="guidEncryptConfigCommandPackageCmdSet" id="ConfigEncryptorMenu" priority="0x0200">
<Parent guid="guidEncryptConfigCommandPackageCmdSet" id="ToolsMenu"/>
</Group>
Also don't forget to add IDSymbol for Group and GroupMenu
and set correct name for Tools id="ToolsMenu"
i'm developing a Visual Studio 2010 extension, i already have a toolbar inside my window. on that toolbar i have a button that i want to give an icon - my own icon!
I've read this article and it is great but... it explains how to replace the icons.
i want to add an additional icon.
how do i achieve that?
First, add the bitmap and set its build action to Resource
Remember, shocking pink = transparent (damn you, old school!)
Then, in your vsct file, add the image to the bitmaps section
<Bitmaps>
<Bitmap guid="AddSampleData.bmpGuid"
href="..\Button Bitmaps\AddSampleData.bmp"
usedList="AddSampleData.bmpId" />
<Bitmap guid="ApplySampleData.bmpGuid"
href="..\Button Bitmaps\ApplySampleData.bmp"
usedList="ApplySampleData.bmpId" />
</Bitmaps>
and assign it a guid in the symbols node
<Symbols>
<!-- snip -->
<GuidSymbol name="AddSampleData.bmpGuid"
value="{dcae7c84-8e91-4f8a-907b-95ccb0f52e6e}">
<IDSymbol name="AddSampleData.bmpId"
value="1" />
</GuidSymbol>
<GuidSymbol name="ApplySampleData.bmpGuid"
value="{9f555245-2430-4e6f-992b-b49ce87a31a2}">
<IDSymbol name="ApplySampleData.bmpId"
value="1" />
</GuidSymbol>
</Symbols>
and apply it to a button
<Buttons>
<!-- snip -->
<Button guid="guidEditorExtensionCommandSet"
id="setDesignTimeDataOnPage"
priority="0x0100">
<Icon guid="ApplySampleData.bmpGuid"
id="ApplySampleData.bmpId" />
<Strings>
<!-- snip -->
</Strings>
</Button>
</Buttons>
Of course, its always easier to use the available tools, including the excellent VSPackage Builder extension.
A workaround for this is to create a PNG and rename the extension as *.bmp. VS will accept it as an icon image and it will also have transparency (from Visual Studio Extensibility > Toolbox Icons -- Is transparency supported?)