Want to get AUI elements into your Jira life? Ask me how!

When you develop a new Atlassing plugin you often use a velocity templates (files with *.vm extension) . Creating fancy GUI with advanced dropdown menus, dialogs, autocomplete inputs can be challenging if you didn’t set up AUI  library properly when creating a new plugin with atlas-create-jira-plugin command. But don’t worry! This tutorial will guide you through the most tricky part of configuring process.

Step 1. Update dependencies in the pom.xml

You should add 2 dependencies. It’s TemplateRenderer module and AUIPlugin itself. Here,  i’m using AUI plugin ver. 7.9.5 and Jira ver. 7.9.1

<dependency>
    <groupId>com.atlassian.templaterenderer</groupId>
    <artifactId>atlassian-template-renderer-api</artifactId>
    <scope>provided</scope>
</dependency>
<dependency> 
    <groupId>com.atlassian.aui</groupId> 
    <artifactId>auiplugin</artifactId>
    <version>7.9.5</version> 
    <scope>provided</scope> 
</dependency>

Step 2. Update web resources in the atlassian-plugin.xml

Now you need to add a bunch dependencies of desired components from AUI library listed in the AUI docs. Likely you will have web-resource section by default in the auto generated plugin so you may use it. For example here i specified dependencies for dialog2 and aui-select components:

<web-resource key="my-aui" name="may-aui Web Resources">
  <dependency>com.atlassian.auiplugin:dialog2</dependency>
  <dependency>com.atlassian.auiplugin:aui-select</dependency>
 <!--.... other stuff-->
  <context>atl.general</context>
</web-resource>

Dependencies only need for components that are not included in the AUI core. To pick up dependency name check the concrete component page for each component and you will find them int the section called “Web resource key”.

Please notice <context> tag . It’s very important xml element which allows to configure your web resource with AUI dependencies to be included in the velocity page. In the docs you will find other available contexts.

Step 3. Add AUI support to you velocity page

Finally  put  the chosen context inside<head> tag of your *.vm page like this:

<html>
<head>
    <title>Create Issue — Issue CRUD Tutorial</title>
    <meta name="decorator" content="atl.general">
</head>
.....

And that’s all  you needed to start using fancy AUI components!

Leave a Reply

Your email address will not be published. Required fields are marked *