search

OfficeDev / generator-office

Yeoman generator for building Microsoft Office related projects.
https://www.npmjs.com/package/generator-office
MIT License
839 stars 208 forks source link

Assets using icon with size 80 pixels, which now is invalid #571

Closed ralphtheninja closed 3 years ago

ralphtheninja commented 3 years ago

Expected behavior

I expect the icons to be of correct size.

Current behavior

Current behavior is using size 80 pixels of the biggest icon. But when running tests against the generated manifest (regardless of host) the test expects the biggest icon to be 64x64 pixels. The test I'm using is office-addin-manifest validate manifest.xml.

Steps to Reproduce

Just create any example project using yo office.

Context

Not relevant.

Failure Logs

Screenshot from output of office-addin-manifest validate manifest.xml:

incorrect-size

TCourtneyOwen commented 3 years ago

I am noticing our office-addin-manifest tests have started failing recently. Are you seeing errors such as the following during manifest validation:

"{\"utcTimestamp\":\"2020-11-24T17:32:11.2040272+00:00\",\"status\":*"Rejected\",\"errors\":[{\"id\":\"c8d66ffc-bc7b-41bd-983e-5c6c0459f0ad\",\"title\":\"High Resolution Icon URL Unreachable\",\"content\":\"Unable to retrieve an image from the high resolution icon URL.\",\"code\":\"The HighResolutionIconURL supplied in the app manifest is not reachable, HighResolutionIconURL : https://localhost:3000/assets/icon-80.png.\"},{\"id\":\"1f9a991b-be34-49c5-939a-46b5170d7dbf\",\"title\":\"Icon URL Unreachable\",\"content\":\"Unable to retrieve an image from the icon URL.\",\"code\":\"The IconURL supplied in the app manifest is not reachable, IconURL : https://localhost:3000/assets/icon-32.png.\"}],*"

Thanks,

Courtney

ralphtheninja commented 3 years ago

I had these issues as well when running github actions. They showed up after I fixed icon size. I didn't see them before, so I guess the test has been updated to actually go and fetch the icons. The original error I had was of the form:

incorrect-size

TCourtneyOwen commented 3 years ago

I have informed the team who owns the manifest validation service about this issue. Here’s the content of the thread:

“All our add-in starter templates host icon images locally as they are intended for developers. For example: https://github.com/OfficeDev/Office-Addin-TaskPane

I think it’s pretty likely that icons are going to hosted locally during the add-in development phase, so it would appear that this manifest validation step would always fail. I actually heard from a customer this morning who is encountering this same behavior when using one of our project templates, so it apparently is perceived as a bug to them as well.”

I will let you know when I hear more, but please bear in mind that it’s the Thanksgiving holiday week here, so we might not get much traction until Monday.

Thanks,

Courtney

ralphtheninja commented 3 years ago

I have informed the team who owns the manifest validation service about this issue. Here’s the content of the thread:

I don't have any issues with the validation. The issue I have is that the example projects created by using yo office creates projects with icons of size 80x80, which according to the validation now is incorrect. So the fix here would be to make sure the example projects generated by yo office contains icons that are 64x64. I'm guessing many use these examples as a starting point for their addins.

Another thing I just noticed is that this isn't true for Outlook addins. Outlook expects the addin to have size 80x80 and complains when trying to side load an addin with 64x64 as the biggest sized icon.

I will let you know when I hear more, but please bear in mind that it’s the Thanksgiving holiday week here, so we might not get much traction until Monday.

There's no rush or stress on this at all.

An idea I just had was that this project could have office-addin-manifest as a devDependency and you could run a test on CI to make sure yo office creates projects that always are on par with the validation. Might be some work to do, but the main tools are there I think.

It could look something like:

  1. run yo office (without manual input)
  2. start dev server npm run dev-server
  3. run office-addin-manifest validate manifest.xml (which now fails with exit code 1, which I added here https://github.com/OfficeDev/Office-Addin-Scripts/pull/329)

Happy Thanksgiving!

questicles commented 3 years ago

I disagree that there is no rush on this issue. It is preventing active development of add-ins.

When I try to upload a manifest.xml to Excel online, I see this error message: image

Running the manifest.xml through the validator shows the issue: image

I have tried making a 64x64 .png and using this in the manifest.xml but it still fails.

ralphtheninja commented 3 years ago

I have tried making a 64x64 .png and using this in the manifest.xml but it still fails.

Are you running the dev server while doing the validation? (When validating locally that is).

What does your manifest look like when uploading to Excel? Have you deployed your icons to a server so they can be reached while Excel is validating the manifest?

TCourtneyOwen commented 3 years ago

@questicles I have not encountered the behavior where you can't upload the manifest to Office Online if the icon urls are unreachable (according to the manifest validation error). Did you perhaps make other changes to the manifest that might make it invalid? Assuming you don't have personal information in the manifest, could you perhaps send a copy of your manifest?

Thanks,

Courtney

questicles commented 3 years ago

@ralphtheninja Yes the dev server is running when I run the validation script, as well as when I upload to Excel online. The only validation issues are the 2 in my above screen shot. @TCourtneyOwen the ability to upload and also pass validation script just simply stopped working for me from one day to the next. I did go and check that there were no other changes to the manifest and there was none. I cannot send the manifest sorry as its a company project.

ralphtheninja commented 3 years ago

@TCourtneyOwen the ability to upload and also pass validation script just simply stopped working for me from one day to the next

I noticed this as well.

Riplar commented 3 years ago

I am a new user, just generated a new template with yo office and wanted to try it out. When I run npm run validate I get the following output:

The manifest is not valid.

Error # 1: High Resolution Icon URL Unreachable: Unable to retrieve an image from the high resolution icon URL.

Error # 2: Icon URL Unreachable: Unable to retrieve an image from the icon URL.

Additional information: Package Type Identified: Package of your add-in was parsed successfully.

Correct Package: Your package matches the submission type.

Valid Manifest Schema: Your manifest does adhere to the current set of XML schema definitions for Add-in manifests.

Manifest Version Correct Structure: The manifest version number has the correct structure for the platform that it supports.

Manifest Version Correct Value: The manifest version number is greater or equal to 1.0.

Manifest ID Valid Prefix: The product ID in the manifest has a valid prefix

  • Details: 8b173155-2df9-4651-bf62-634d1920c45c

Manifest ID Correct Structure: The structure of the product ID is correct.

  • Details: 8b173155-2df9-4651-bf62-634d1920c45c

Desktop Source Location Present: A desktop or default source location URL is found.

Secure Desktop Source Location: The manifest desktop source location URLs use HTTPS.

Supported Office Identified: Supported Office products were successfully determined.

Support URL Present: The manifest support URL is present.

Valid Support URL: The manifest support URL is valid.

High Resolution Icon Present: A high resolution icon element was expected and is present.

Supported High Resolution Icon URL File Extension: The manifest high resolution icon URL has a valid image file extension.

  • Details: png

Secure High Resolution Icon URL: The manifest high resolution icon URL uses HTTPS.

Icon Present: A icon element was expected and is present.

Supported Icon URL File Extension: The manifest icon URL has a valid image file extension.

  • Details: png

The manifest icon URL uses HTTPS.: Secure Icon URL

Acceptance Test Completed: Acceptance test service has finished checking provided add-in.

TCourtneyOwen commented 3 years ago

@RipkensLar Yes this is a known issue and I am trying to get the team in Ireland that owns the service to fix it. In my opinion, the validation service should not fail validation for localhost icon urls, which, while perhaps not accessible by the service, are indeed valid urls. For now you should be able to ignore the validation error and proceed using your add-in, although @ralphtheninja and @questicles are apparently encountering manifest upload issues as well, which I have not encountered.-

-Courtney

TCourtneyOwen commented 3 years ago

@ralphtheninja @questicles are you still encountering the issue where you can't upload the manifest, or was this perhaps a service outage? Apparently they have a new validation url and I am wondering if they retired the old one or if the new one is having issues.

Thanks,

Courtney

ralphtheninja commented 3 years ago

@TCourtneyOwen To clarify. I never had any issues with uploading the manifest. My issue was that validation suddenly stopped working using the validation script.

Also, this issue is really about the size 80x80 pixels icons. And not about the service validation.

@RipkensLar Maybe you can make a new issue for your issues?

TCourtneyOwen commented 3 years ago

@ralphtheninja I tend to think that the 80x80 icon size has always failed, as the add-in store is very particular about the size of icons used, so the validation service is trying to keep users from using icon sizes that will ultimately prevent them from checking their add-in into the store. Is there a particular reason why you need to use a 80x80 icon?

ralphtheninja commented 3 years ago

@ralphtheninja I tend to think that the 80x80 icon size has always failed, as the add-in store is very particular about the size of icons used, so the validation service is trying to keep users from using icon sizes that will ultimately prevent them from checking their add-in into the store. Is there a particular reason why you need to use a 80x80 icon?

@TCourtneyOwen It seems you're not understanding the original issue I had while creating this issue for this particular repository on github. So I will try to take it from the beginning.

So, yo office generates invalid manifests by default. This is my issue (essentially a bug in this repository) and it could be fixed by adding an icon of size 64x64.

I hope this clear things up a bit.

TCourtneyOwen commented 3 years ago

Ah, OK I see now. And if may ask, which project type did you create (e.g. React, Angular, Taskpane)? Hopefully it's just one of the project templates and we don't need to update them all.

I apologize for this issue getting forked off and my confusion with the original issue.

-Courtney

ralphtheninja commented 3 years ago

And if may ask, which project type did you create (e.g. React, Angular, Taskpane)?

I don't believe React, Angular or Taskpane makes any difference. It seems to me it should be enough to update the different manifest template files. At a quick glance I can see that the manifest files for word and excel are incorrect:

It's difficult to test since there are problems testing the local manifest because https://localhost:3000/assets can't be reached. Is this because there's an external service validating the manifest? If so, why?

jfoclpf commented 3 years ago

I'm having the same issues, suddenly manifest is invalid due to icon

when I run office-addin-manifest validate manifest_dev.xml I get

Error # 1:
High Resolution Icon URL Unreachable: Unable to retrieve an image from the high resolution icon URL.
  - Details: The HighResolutionIconURL supplied in the app manifest is not reachable, HighResolutionIconURL : https://ckt-d.internal.epo.org/addins/msword/ckt.gif.

Error # 2:
Icon URL Unreachable: Unable to retrieve an image from the icon URL.
  - Details: The IconURL supplied in the app manifest is not reachable, IconURL : https://ckt-d.internal.epo.org/addins/msword/ckt.gif.

And when i try to access that url in the browser it works perfectly. What is the error? Icon size? But which size do you want? The error should be more verbose

jfoclpf commented 3 years ago

@ralphtheninja did you happen to solve the issue? Which icon size did you set?

TCourtneyOwen commented 3 years ago

@jfoclpf I have created a separate issue to track the behavior you and others are seeing with the icon urls being unreachable. Please see: https://github.com/OfficeDev/generator-office/issues/590

@ralphtheninja is seeing a different manifest validation issue, so let's keep these two issues separate to avoid confusion :-)

Thanks,

Courtney

TCourtneyOwen commented 3 years ago

@ralphtheninja Interesting that I don't ever see the manifest validation error related to the 80x80 icon size. Perhaps this error is hidden because if the occurrence of the "Icon URL Unreachable" errors which I see every time. Also I notice that I don't have any problems uploading the manifests to Office Online, so it's not failing manifest validation there either because of the 80x80 icon size. However, it is possible that this may become an issue if I were to try and add the add-in to the Store.

jfoclpf commented 3 years ago

@TCourtneyOwen why do you mention 80x80 if the documentation explicitly refers to use 32x32 or 64x64 icons for taskpanes?

TCourtneyOwen commented 3 years ago

Documentation also says that 80x80 is OK: https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-icons-monoline. This is not my area of expertise however, so I have reached out to the owning team in Ireland. Unfortunately with the holidays I am not getting the traction on this I would like. I have written them again this morning

ralphtheninja commented 3 years ago

@ralphtheninja Interesting that I don't ever see the manifest validation error related to the 80x80 icon size. Perhaps this error is hidden because if the occurrence of the "Icon URL Unreachable" errors which I see every time. Also I notice that I don't have any problems uploading the manifests to Office Online, so it's not failing manifest validation there either because of the 80x80 icon size. However, it is possible that this may become an issue if I were to try and add the add-in to the Store.

Yes, once the icons can be reached, then the error of missing 64x64 shows up.

Documentation also says that 80x80 is OK: https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-icons-monoline. This is not my area of expertise however, so I have reached out to the owning team in Ireland. Unfortunately with the holidays I am not getting the traction on this I would like. I have written them again this morning

80x80 is OK and in fact is required for Outlook. It seems 64x64 is only required for Office add-ins.

jfoclpf commented 3 years ago

It seems 64x64 is only required for Office add-ins.

It's exactly what I am using: Office add-ins. Thanks anyway. I will be waiting.

TCourtneyOwen commented 3 years ago

I grabbed a couple image icons off the internet and the following worked for Excel, Word and PowerPoint add-ins:

image

Manifest validation passes with a 32x32 image for the IconUrl and a 64x64 image for the HighResolutionUrl, and I am subsequently able to upload to the add-in the to Admin Center.

For Outlook add-ins, however, the expected dimensions are different and requires image sizes of 64x64 for the IconUrl and 128x128 for the HighResolutionUrl and this change to my manifest allowed it to pass validation:

image

So it looks like we have multiple issues here:

ralphtheninja commented 3 years ago

@TCourtneyOwen Thanks for looking into this. Highly appreciated!

TCourtneyOwen commented 3 years ago

We are updating the templates today with the new images and manifest updates. However, this will not address the fact that validation fails for localhost, as this is an issue with the validation service, which our templates simply call

-Courtney

arttarawork commented 3 years ago

We have updated the package we use for manifest validation. Please try using it!

office-addin-manifest: next: 1.5.12

https://github.com/OfficeDev/Office-Addin-Scripts/tree/master/packages/office-addin-manifest

JorisZzz commented 3 years ago

We have updated the package we use for manifest validation. Please try using it!

office-addin-manifest: next: 1.5.12

https://github.com/OfficeDev/Office-Addin-Scripts/tree/master/packages/office-addin-manifest

Sorry for beïng a noob, but can you tell me how to integrate this into my existing vscode project? Cheers!

ralphtheninja commented 3 years ago

@JorisZzz npm i office-addin-manifest -D

jfoclpf commented 3 years ago

Now it's working, thank you.

Just a tip, in package.json you should have had"office-addin-manifest": "^1.5.0" Note the ^ before the version, that allows the normal package update through common npm update https://docs.npmjs.com/about-semantic-versioning

lijunyzzZ commented 3 years ago

now,when i upload my add-ins to online office: image

JorisZzz commented 3 years ago

Maybe similar; https://github.com/OfficeDev/generator-office/issues/593

ralphtheninja commented 3 years ago

Note the ^ before the version, that allows the normal package update through common npm update

~ works as well, if you only want updates to patch versions. Just fyi.

arttarawork commented 3 years ago

@jfoclpf @ralphtheninja we're getting updates to the template rolled out to address the carat and the version update. Thanks!

bdentino commented 3 years ago
Screen Shot 2020-12-16 at 3 41 00 PM

I'm having this issue trying to submit an update to my add-in. Says it cannot find the image, but if you navigate to the link the image is clearly available.

https://office-2016-add-in.finbox.com/1.1.0.0/assets/icon-64.png

I have an urgent need to simply update the store listing description for our add-in and this is blocking me from doing so. Please help!

arttarawork commented 3 years ago

I'm sorry to hear that, @bdentino. Is the add-in available publicly, or can you send me the manifest, so I can do more investigation?

Also, is this for Outlook or a different Office application?

Thank you!

bdentino commented 3 years ago

Thanks @arttarawork

The add-in is available here: https://appsource.microsoft.com/en-us/product/office/WA200001556?tab=Reviews

Here's the updated manifest I'm trying to submit. Note that the only thing that's changed is the icon definitions, since my initial submission with just the description update was rejected given that 80x80 images are no longer valid.

Anything we can do?

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
  <Id>3c9ecaf1-1c01-4758-a289-bdfc649d05da</Id>
  <Version>1.1.0.0</Version>
  <ProviderName>Finbox</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="Finbox Excel Add-in"/>
  <Description DefaultValue="Finbox Add-in For Office Excel"/>
  <IconUrl DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/assets/icon-32.png"/>
  <HighResolutionIconUrl DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/assets/icon-64.png"/>
  <SupportUrl DefaultValue="https://www.finbox.com/support"/>
  <AppDomains>
    <AppDomain>https://office-2016-add-in.finbox.com/1.1.0.0</AppDomain>
    <AppDomain>https://finbox.com</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Workbook"/>
  </Hosts>
  <Requirements>
    <Sets DefaultMinVersion="1.1">
      <Set Name="CustomFunctionsRuntime" MinVersion="1.1"/>
      <Set Name="DialogApi" MinVersion="1.1"/>
    </Sets>
  </Requirements>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/index.html"/>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Workbook">
        <Runtimes>
          <Runtime resid="Taskpane.Url" lifetime="long" />
        </Runtimes>
        <AllFormFactors>
          <ExtensionPoint xsi:type="CustomFunctions">
            <Script>
              <SourceLocation resid="Functions.Script.Url"/>
            </Script>
            <Page>
              <SourceLocation resid="Taskpane.Url"/>
            </Page>
            <Metadata>
              <SourceLocation resid="Functions.Metadata.Url"/>
            </Metadata>
          </ExtensionPoint>
        </AllFormFactors>
        <DesktopFormFactor>
          <GetStarted>
            <Title resid="GetStarted.Title"/>
            <Description resid="GetStarted.Description"/>
            <LearnMoreUrl resid="GetStarted.LearnMoreUrl"/>
          </GetStarted>
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <OfficeTab id="TabHome">
              <Group id="CommandsGroup">
                <Label resid="CommandsGroup.Label"/>
                <Icon>
                  <bt:Image size="16" resid="Icon.16x16"/>
                  <bt:Image size="32" resid="Icon.32x32"/>
                  <bt:Image size="64" resid="Icon.64x64"/>
                </Icon>
                <Control xsi:type="Button" id="TaskpaneButton">
                  <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="64" resid="Icon.64x64"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/assets/icon-16.png"/>
        <bt:Image id="Icon.32x32" DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/assets/icon-32.png"/>
        <bt:Image id="Icon.64x64" DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/assets/icon-64.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://finbox.com/integrations/excel"/>
        <bt:Url id="Taskpane.Url" DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/index.html"/>
        <bt:Url id="Functions.Script.Url" DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/function.js"/>
        <bt:Url id="Functions.Metadata.Url" DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/function.json"/>
        <bt:Url id="Functions.Page.Url" DefaultValue="https://office-2016-add-in.finbox.com/1.1.0.0/function.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GetStarted.Title" DefaultValue="Get started with the Finbox Excel Add-in!"/>
        <bt:String id="CommandsGroup.Label" DefaultValue="Finbox"/>
        <bt:String id="TaskpaneButton.Label" DefaultValue="Finbox"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="GetStarted.Description" DefaultValue="The Finbox Excel Add-in is ready. Go to the HOME tab and click 'Finbox' to sign in."/>
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Get started with the Finbox Excel Add-in"/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>
TCourtneyOwen commented 3 years ago

I believe this issue has been fixed in the latest version of office-addin-manifest. Please reactivate if that is not the case

ralphtheninja commented 3 years ago

Just some feedback on the icon sizes. Apparently, it seems you must have size 80x80 in the manifest for office in order for centralized deployment to work. It's really unfortunate that the validation is different. This caused us two weeks of work trying everything, and you don't get any feedback from Microsoft during centralized deployment on what went wrong. It just fails silently. It would be very useful if there were some error feedback during that deployment phase, so you know what went wrong and can adjust accordingly.

Shujee commented 2 years ago

I'm currently using office-addin-manifest version ^1.7.6 and validation script says:

Localhost Manifest High Resolution Icon URL: The manifest high resolution Icon URL should not be localhost. (link: undefined)
  - Details: https://localhost:8080/img/icons/ms-icon-70x70.png

Is this still a bug (or am I required not to use localhost for HighResolutionIconUrl? The relevant line in my manifest file looks like this:

<HighResolutionIconUrl DefaultValue="https://localhost:8080/img/icons/ms-icon-70x70.png"/>

millerds commented 2 years ago

During the development process it is not required to be non localhost . . . that will be a requirement if you submit something to the store. If you create a new project using 'yo office' and run the validation command it will pass and you will see localhost urls in the manifest.

While I have not verified this, the previous comments suggest some specific sizes of icons are needed. I'm not aware of this requirement myself, but if that is what you find and our validation logic doesn't say that specifically, then that is something we need to get the validation service to correct.