Issue with Displaying Icons in Custom UI Application

Forge Forge UI Kit and Custom UI
1

Hello!

I am currently encountering an issue with a custom UI application where the icons are not being displayed as intended. I have followed the instructions outlined here, where it indicates specifying a resource in the manifest.yml.

I’ve tried two different approaches to resolve this issue:

  1. First, I set the build folder as the root (consistent with the documentation) and specified the icons folder using icon: resource:main;icons/write.png.

  2. In my second approach, I pointed to the icons folder as the root and specified it using icon: resource:icons;write.png.

Despite trying both methods, the icons still do not appear in the UI. I also attempted using .svg files, but to no avail.

Here is a snapshot of my folder structure for reference:
image

And here are my specified resources in manifest.yml:
image
image

Has anyone else experienced this issue or have any suggestions on how to rectify it? Any advice or insights would be greatly appreciated!

2

From the picture, it looks like the icons folder is under build but is listed under public in resources. Is that intentional?

2 Likes
3

Oh my mistake. Sorry about that :sweat_smile: Actually this screenshot is from my last attempt. I had already tried customui/build/icons just before I took this screenshot. As a last hope I tried to give the actual location of the image in the project instead of the build folder. I’m glad you pointed that out, thanks.

4

Well, it works for me with this configuration:

modules:
  confluence:globalPage:
    - key: example
      resource: example
      title: Example
      render: native
      route: example
      icon: resource:icons-test;example.svg
      resolver:
        function: resolver
resources:
  - key: icons-test
    path: customui/build/icons

Then the icon appears when I click Apps on my site.

1 Like
5

Hi Aaron, when I tried your configuration it worked for me too. But, I noticed that I was trying to use this feature for subpages in project page. Here is my last manifest.yml file and result;

manifest.yml
image

Result
image

As you can see, it does not work when you specified the same icon for the subpage. Can you try that too?

6

Ah, I see. I tried it out and get the result there.

The problem is that resources aren’t accepted for icons for subpages. It’s not called out clearly in the documentation, but the definition of the icon property for sub pages is this: “The URL of the icon.” It only accepts icons hosted elsewhere.

You can see this in the built page (note the src:

<img src="resource:icons;example.svg" class="_1bsbgktf _4t3igktf">
1 Like
7

Hi Aaron,
Thank you for the clarification and for taking the time to help resolve this!

1 Like
8

@FaikBurakTredi I submitted a bug(ECO-185) with the Forge development team support and they have fixed the issue now. Try re-deploying your app and it should work now.

1 Like
9

Hello @kashsingh - are you by any chance using jira:globalPage as well? For jira:adminPage I can see in my Forge app that the issue with icons in subpages is resolved now. But for the global pages I still have the old, broken behavior. Maybe Atlassian did fix that only for admin pages then… Care to confirm if you’ve managed to successfully use icons in subpages of global pages modules?

10

@stefan-ok As of now, my app does not utilize the globalPage module, so the manifest file I submitted with my bug report did not include it. Consequently, it’s reasonable to assume that the fix was solely applied to the adminPage module. I recommend creating a new bug report for the Atlassian team; they resolved my issue within two weeks of my initial report, so they might be able to do the same for you.

1 Like