none
Web Add-in Not Loading Icons RRS feed

  • Question

  • I am writing an Office web-based add-in that will connect to a server on the local network so clients can easily integrate into our software from the Office Suite. 

    But, I am having issues with getting the Icon to show up in desktop programs (it shows up fine in Office 365 [online stuff]). 

    Each XML file needs to be generate for each customer (since the website is on the local network--not a static domain). 

    Here is the generated XML for Outlook: 

    <?xml version="1.0" encoding="UTF-8"?>
    <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="MailApp">
       <Id>2f943db3-85e5-4544-afb1-be356d4a65bb</Id>
       <Version>1.0.0</Version>
       <ProviderName>MyCompany</ProviderName>
       <DefaultLocale>en-US</DefaultLocale>
       <DisplayName DefaultValue="Our Product" />
       <Description DefaultValue="Description" />
       <IconUrl DefaultValue="https://onlinedomain.com/logo80x80.png" />
       <HighResolutionIconUrl DefaultValue="https://onlinedomain.com/logo80x80.png" />
       <AppDomains>
          <AppDomain>local-server</AppDomain>
          <AppDomain>onlinedomain.com</AppDomain>
       </AppDomains>
       <Hosts>
          <Host Name="Mailbox" />
       </Hosts>
       <Requirements>
          <Sets>
             <Set Name="Mailbox" MinVersion="1.1" />
          </Sets>
       </Requirements>
       <FormSettings>
          <Form xsi:type="ItemRead">
             <DesktopSettings>
                <SourceLocation DefaultValue="https://local-server:443/officeAddin.htm" />
                <RequestedHeight>250</RequestedHeight>
             </DesktopSettings>
          </Form>
       </FormSettings>
       <Permissions>ReadWriteItem</Permissions>
       <Rule xsi:type="RuleCollection" Mode="Or">
          <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
       </Rule>
       <DisableEntityHighlighting>false</DisableEntityHighlighting>
       <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="OfficeAddin.FunctionFile" />
                   <ExtensionPoint xsi:type="MessageReadCommandSurface">
                      <OfficeTab id="TabHome">
                         <Group id="OfficeGroup">
                            <Label resid="OfficeAddin.Company" />
                            <Control xsi:type="Button" id="OfficeTaskPaneButton">
                               <Label resid="OfficeAddin.Name" />
                               <Supertip>
                                  <Title resid="OfficeAddin.Name" />
                                  <Description resid="OfficeAddin.LongDescription" />
                               </Supertip>
                               <Icon>
                                  <bt:Image size="16" resid="OfficeAddin.Logo16x16" />
                                  <bt:Image size="32" resid="OfficeAddin.Logo32x32" />
                                  <bt:Image size="80" resid="OfficeAddin.Logo80x80" />
                               </Icon>
                               <Action xsi:type="ShowTaskpane">
                                  <SourceLocation resid="OfficeAddin.URL" />
                               </Action>
                            </Control>
                         </Group>
                      </OfficeTab>
                   </ExtensionPoint>
                </DesktopFormFactor>
             </Host>
          </Hosts>
          <Resources>
             <bt:Images>
                <bt:Image id="OfficeAddin.Logo80x80" DefaultValue="https://onlinedomain.com/logo80x80.png" />
                <bt:Image id="OfficeAddin.Logo32x32" DefaultValue="https://onlinedomain.com/logo32x32.png" />
                <bt:Image id="OfficeAddin.Logo16x16" DefaultValue="https://onlinedomain.com/logo16x16.png" />
             </bt:Images>
             <bt:Urls>
                <bt:Url id="OfficeAddin.URL" DefaultValue="https://local-server:443/officeAddin.htm" />
                <bt:Url id="OfficeAddin.FunctionFile" DefaultValue="https://local-server:443/thisFileDoesNotExist.js" />
                <bt:Url id="OfficeAddin.LearnMoreUrl" DefaultValue="https://local-server:443/officeAddin.htm" />
             </bt:Urls>
             <bt:ShortStrings>
                <bt:String id="OfficeAddin.Name" DefaultValue="Our Product" />
                <bt:String id="OfficeAddin.Company" DefaultValue="MyCompany" />
                <bt:String id="OfficeAddin.Description" DefaultValue="Description" />
                <bt:String id="OfficeAddin.Title" DefaultValue="Our Product Title" />
             </bt:ShortStrings>
             <bt:LongStrings>
                <bt:String id="OfficeAddin.LongDescription" DefaultValue="Description" />
                <bt:String id="OfficeAddin.Name" DefaultValue="Our Product" />
             </bt:LongStrings>
          </Resources>
       </VersionOverrides>
    </OfficeApp>


    Am I missing something somewhere? The icons are actually on the internet (onlinedomain.com), while the rest of it is on a local server. 

    Add-ins are being sideloaded since we are unable to place them in the Office store. 

    Can anyone help me out to as why the icons are not showing up in the ribbon bar? I'm getting the default icon with the blue hexagons.

    The Icon shows up in the "My Add-ins" menu, or whatever it is called in each program. However, it is just missing on the ribbon bar.



    • Edited by mwrouse Monday, June 12, 2017 8:44 PM
    Monday, June 12, 2017 8:41 PM

All replies

  • Hi mwrouse,

    it is possible that you are not able to access the image from that domain.

    so the icons are not displaying.

    you can try to confirm that you can able to access image successfully.

    and if you are not able to access the icons then try to save it locally and try to reference them.

    try to check whether it work for you or not.

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, June 13, 2017 5:33 AM
    Moderator
  • I appreciate the response, but it was not helpful. The URL in the XML I gave is simply a dummy url, the real one is completely accessible: https://wordaddin.mwrouse.com/logo80x80.png 

    As I said, Office 365 displays the icons just fine. If I move the icons locally, and host them on a simple server with https access (self-signed), the same thing occurs.

    The icons also load fine in the add-in manager screens, just not on the ribbon bar.
    • Edited by mwrouse Tuesday, June 13, 2017 11:58 AM
    Tuesday, June 13, 2017 11:57 AM
  • Hi mwrouse,

    I find that previous reply was not much helpful.

    I will try to search further and try to provide you the information.

    thanks for your understanding

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, June 14, 2017 8:51 AM
    Moderator
  • Hello mwrouse,

    I test your icon url and it is fine in Outlook Desktop or Outlook Web App.

    If you create a new Outlook web add-in, replace the icon and host the webapplication in localhost, would the icon show?  

       <IconUrl DefaultValue="https://wordaddin.mwrouse.com/logo80x80.png" />
       <HighResolutionIconUrl DefaultValue="https://wordaddin.mwrouse.com/logo80x80.png" />
         <bt:Images>
            <!--<bt:Image id="icon16" DefaultValue="~remoteAppUrl/Images/icon16.png"/>
            <bt:Image id="icon32" DefaultValue="~remoteAppUrl/Images/icon32.png"/>
            <bt:Image id="icon80" DefaultValue="~remoteAppUrl/Images/icon80.png"/>-->
                 <bt:Image id="icon16" DefaultValue="https://wordaddin.mwrouse.com/logo16x16.png " />
                <bt:Image id="icon32" DefaultValue="https://wordaddin.mwrouse.com/logo32x32.png" />
                <bt:Image id="icon80" DefaultValue="https://wordaddin.mwrouse.com/logo80x80.png" />
          </bt:Images>

    Regards,

    Celeste


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, June 23, 2017 7:59 AM
    Moderator