AUI Dropdown2 in IssueTabPanel won't render

Trying to render AUI dropdown elements within an IssueTabPanel.

Using both JiraWebResourceManager, my .vm starts with:

$webResourceManager.requireResourcesForContext("myContext")

In my atlassian-plugin.xml:

 <web-resource key="myResourceKey" name="My Web Resources"> 
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:aui-button</dependency>
    <dependency>com.atlassian.auiplugin:aui-dropdown2</dependency>
    <!-- other things -->
    <context>myContext</context>
</web-resource>

Trying sample straight from the AUI documentation:

<button class="aui-button aui-dropdown2-trigger" aria-controls="radio-items">
    Dropdown menu
</button>
<aui-dropdown-menu id="radio-items">
    <aui-section label="Browsers">
        <aui-item-radio interactive checked>Chrome</aui-item-radio>
        <aui-item-radio interactive>Firefox</aui-item-radio>
        <aui-item-radio interactive>Safari</aui-item-radio>
    </aui-section>
</aui-dropdown-menu>

Other elements, like toggles, work just fine.

Hi @Maxwell-Norris,

When does your velocity template get rendered, and on what page?

The web resource manager has two phases for loading resources: the first is gathering the list of resources to require (what you’re doing there), and the second is turning those in to appropriate <script> and <link> tags. Most of the time, the second phase is done by a “decorator” – a template that wraps a page’s contents with things like the application header, sidebar, etc.

What’s likely happening is that the decoration has already happened by the time your template is being rendered, so nothing is doing that second phase for you.

The reason other controls like toggle might be working is that another feature on the page required that resource before the decorator was invoked and that second phase happened.

If you’re able to provide a bit more context about where and what page you’re rendering to, there might be more specific advice to give. For the moment, however, you can try two things:

  • Instead of using the java-based call to the WRM, try adding this javascript to your VM template: <script>WRM.require('wrc!myContext')</script>. This means whenever, wherever, or however your HTML ends up on the page, a JS call will lazily load the relevant CSS & JS assets. There might be a flash of unstyled content using this approach, but it should guarantee the delivery of your assets.
  • If you’re rendering to a specific page, look through the product’s documentation for a web-resource context defined for that page. For example, Jira will load a jira.create.issue context whenever a create or edit issue dialog is shown to the user.

Hope that helps!
Daz

I just checked Jira’s documentation for rendering Issue tab panels and it turns out they have a section discussing the problems with calling webResourceManager.requireResource and how to mitigate them. They recommend adding the jira.view.issue context to your web-resource to ensure they are loaded:

https://developer.atlassian.com/server/jira/platform/loading-issue-tab-panels-with-ajax/

Let me know if that helps. If not, we can dive further in to your problem’s context.

Cheers,
Daz

1 Like