Unable to load AJS (JS file) in Velocity template

Rishabh Jain_1zijco

@Nic Brough [Adaptavist]

@Chris Fuller

Hi Team,

 

I am developing a plugin for JIRA admins. I m trying to load JS file in Velocity template but unable to do so. I want to add a dropdown which will provide the list of all the projects. 

I have tried below post also, but it is not working for me:

https://answers.atlassian.com/questions/30540422/add-projects-to-project-picker-field

 

Below is the code snippet for atlassian-plugin.xml

<web-resource key="ForgeJiraMailHandler-resources" name="ForgeJiraMailHandler Web Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <dependency>jira.webresources:jira-global</dependency>
    	<dependency>jira.webresources:autocomplete</dependency>
        <resource type="download" name="ForgeJiraMailHandler.css" location="/css/ForgeJiraMailHandler.css"/>
        <resource type="download" name="ForgeJiraMailHandler.js" location="/js/ForgeJiraMailHandler.js"/>
        <resource type="download" name="images/" location="/images"/>
        <context>ForgeJiraMailHandler</context>
    </web-resource>

 

Below is the velocity template- ForgeJiraMailHandlerConfiguration.vm

<html>
  <head>
    <title>$i18n.getText("fjmh.name")</title> 
    $webResourceManager.requireResource("com.atlassian.auiplugin:ajs")
    $webResourceManager.requireResource("com.soprasteria.di.mailhandler.ForgeJiraMailHandler:ForgeJiraMailHandler-resources")
  </head>
....

 

Below is the Javascript file ForgeJiraMailHandler.js

var ProjectPicker = AJS.SingleSelect.extend({
    init: function (options) {
        function formatResponse(response) {
            var ret = [];
            var groupDescriptor = new AJS.GroupDescriptor({
                weight: 1,
                label: "Projects"
            });
            ret.push(groupDescriptor);
            AJS.$(response).each(function(i, project) {
                groupDescriptor.addItem(new AJS.ItemDescriptor({
                    value: project.key,
                    label: project.name,
                    html:  "<div><span>" + project.name + "</span></div>",
                    icon: project.avatarUrls[project.avatarUrls.length - 1]
                }));
            });
            return ret;
        }
        AJS.$.extend(options, {
            errorMessage: "Missing Project",
            ajaxOptions: {
                url: contextPath + "/rest/api/2/project",
                query: true,
                formatResponse: formatResponse
            }
        });
        this._super(options);
    }
});
 
new ProjectPicker({
            element: AJS.$("#projectdropdown"),
            itemAttrDisplayed: "label",
            width: 300
        });

Could you please help?

Rishabh Jain_1zijco

@Yagnesh Bhat

Thanks For you kind reply. This thing works for me!!

There are some other few things which i need to mention here

• Calling #requireResourcesForContext is not mandatory as resources are available in admin context.
• <head> tag was not getting executed while calling JS file. I put them in <body> tag and it finally worked for me.