How to use AUI elements in a Velocity template?

Jira Development Jira Server
1

Hello. I’m trying to use an AUI Single Select in a Velocity template for a servlet plugin but it doesn’t seem to work. I do not want to activate the AUI component with JS when the page loads; I want to use the native AUI syntax in my Velocity template. Is that possible?

Specifically, I’m pulling in the Priority list using the Jira Server API and want to recreate the Priority dropdown using AUI.

Is my syntax wrong? I couldn’t find examples of how to use AUI like this inside Velocity templates. Developing for Jira Server 8.1.0.

Plugin XML:

  <web-resource key="form-plugin-resources" name="form-plugin Web Resources">
    <dependency>com.atlassian.auiplugin:aui-select</dependency>
    <dependency>com.atlassian.auiplugin:ajs</dependency>
.
.
.
  </web-resource>

Velocity template:

#requireResource("com.atlassian.auiplugin:aui-select")
.
.
.
<form class="aui">
    <aui-label for="priority-aui-select">Priority</aui-label>
    <p>
        <aui-select
            id="priority-aui-select"
            name="product"
            placeholder="Select"
        >
        #foreach($priority in $priorities)
            <aui-option value="$priority" img-src="$priority.getRasterURL()">$priority.getName()</aui-option>
            #end
        </aui-select>
    </p>
</form>

What I see running the servlet:
velocity-template-view

2

In your atlassian-plugin.xml you are declaring a web resource module which has the resources you want to use. What you need to do is directly reference that web resource which you defined in the atlassian-plugin.xml by the web resource’s key and your plugin key. Just defining the web resource won’t do anything by itself.

For example in your velocity template:

#requireResource("your-plugin-key:form-plugin-resources")
3

Sorry if the way I submitted my code snippets was confusing. I do have the #requireResource("com.atlassian.auiplugin:aui-select") in my Velocity template.

velocity-template-snippet
velocity-template-snippet708×442 33.9 KB

Actually, I also have #require('aui/select') following that line, which, if I remove it, the servlet breaks. I’m not sure why that’s happening.

5

Sorry, let me try to explain more clearly. You are trying to reference a web resource with the key “aui-select” from a plugin with the key “com.atlassian.auiplugin”. You actually want to reference the resource that you yourself created. So replace “com.atlassian.auiplugin” with your plugin key and replace “aui-select” with “form-plugin-resources”.

6

Hello,

got a similar issue. Followed advice, still it is badly rendered. Any hints what todo?

My web resource:

<web-resource key="ca-sync-web-resources" name="CA Sync Web Resources">
    <dependency>com.atlassian.auiplugin:aui-select</dependency>
    <dependency>com.atlassian.auiplugin:ajs</dependency>
  </web-resource>

#requireResource("com.test.caSync:ca-sync-web-resources")
<html>
<head>
    <title>Add new synchronization scheme</title>
    <meta name="decorator" content="atl.admin">
</head>
<body>

in pom.xml:

<dependency>
            <groupId>com.atlassian.aui</groupId>
            <artifactId>auiplugin</artifactId>
            <version>8.5.0</version>
            <scope>provided</scope>
        </dependency>