How to use JIRA AUI functions in my own custom field - velocity edit.vm

Question

I am trying use some AUI in my JIRA - in edit mode of my own custom field written in JAVA. I found this page: https://docs.atlassian.com/aui/latest/sandbox/# and in future I would like to use set an example Auiselect2.

https://docs.atlassian.com/aui/5.5.1/docs/auiselect2.html - here is written, that this is only experimental, so which steps I should do to use it? In examples bellow you can see, I was trying to add this funcionality, but it simple did not work. I was using an example mentioned in docs -

edit.vm:

$webResourceManager.requireResource("cz.firma.rozy:zakaznik")

<form class="aui">
    <select id="select2-example" multiple>
        <option value="CONF">Confluence</option>
        <option value="JIRA">JIRA</option>
        <option value="BAM">Bamboo</option>
        <option value="JAG">JIRA Agile</option>
        <option value="CAP">JIRA Capture</option>
        <option value="AUI">AUI</option>
    </select>
</form>

and zakaznik.js

AJS.$(function() {
    AJS.$("#select2-example").auiSelect2();
});

And my atlassian-plugin.xml is:

<web-resource key="zakaznik-resources" name="zakaznik Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:jquery</dependency>
    <dependency>com.atlassian.auiplugin:jquery-ui-other</dependency>
    <dependency>com.atlassian.auiplugin:aui-select2</dependency>
    <context>atl.general</context>
    <context>atl.admin</context>
    <resource type="download" name="zakaznik.css" location="/css/zakaznik.css"/>
    <resource type="download" name="zakaznik.js" location="/js/zakaznik.js"/>
    <resource type="download" name="images/" location="/images"/>
    <context>zakaznik</context>
  </web-resource>

...
  <customfield-type name="Pridani zakaznika" i18n-name-key="customer-add.name" key="customer-add" class="cz.firma.rozy.jira.customfields.CustomerCustomField">
    <description key="customer-add.description">Plugin, ktery prida zakaznika z abry</description>
    <resource name="view" type="velocity" location="templates/viewCustomer.vm"/>
    <resource name="edit" type="velocity" location="templates/edit.vm"/>
  </customfield-type>

But when I visit the edit mode, no jQuery is done - and browsers console does not write any error or warning.

Answer 1

Simply by adding this line to your edit.vm will include select2 js.

$webResourceManager.requireResource("com.atlassian.auiplugin:aui-select2")

You do not need to add it as dependency in web-resource.

In your js file call select2 simply by -

AJS.$("#select2-example").select2();

Answer 2

You just need to add following in your edit.vm

$webResourceManager.requireResourcesForContext("zakaznik")

I don't agree with other answer provided. When we have already added the js in the resource file why do it again in edit.vm file. Just refer to the web resource we have already created with it's context.

Answer 3

You need to load the aui resource via the webResourceManager . The atlassian-plugin.xml doesn't need to be changed. Your customfields .vm file could look like this:

#controlHeader ($action $customField.id $customField.name $fieldLayoutItem.required $displayParameters.noHeader)
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-select2")

<script type="text/javascript">
    AJS.toInit(function() {
        AJS.$("#$customField.id").select2();
    });
</script>

<select name="$customField.id" id="$customField.id" multiple>

    #foreach ($option in $options)
        <option value="$option">$option</option>
    #end
</select>

#controlFooter ($action $fieldLayoutItem.fieldDescription $displayParameters.noHeader)