Unable to load AJS (JS file) in Velocity template

@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?

6 answers

1 accepted

@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.

You have defined the context "ForgeJiraMailHandler" in your xml, but you do not use it in your velocity template. I would change the context name in your xml to the full package name:

com.soprasteria.di.mailhandler.ForgeJiraMailHandler

and then use this code in your velocity template:

&lt;head&gt;
  #requireResourcesForContext("com.soprasteria.di.mailhandler.ForgeJiraMailHandler")
&lt;/head&gt;

If your JS and CSS is still not getting loaded, check if the location path to your file is correct and starts at the right level.

@TtheB

I tried with package name and #requireResourcesForContext as stated above, but no luck!!!

here is my package structure for your reference. 

Eclipse_Structure.JPG

Please help!

Try to remove the leading "/" from the location path in your web-resource, so

&lt;resource type="download" name="ForgeJiraMailHandler.css" location="/css/ForgeJiraMailHandler.css"/&gt;
      &lt;resource type="download" name="ForgeJiraMailHandler.js" location="/js/ForgeJiraMailHandler.js"/&gt;

becomes

&lt;resource type="download" name="ForgeJiraMailHandler.css" location="css/ForgeJiraMailHandler.css"/&gt;
      &lt;resource type="download" name="ForgeJiraMailHandler.js" location="js/ForgeJiraMailHandler.js"/&gt;

@TtheB

No Luck with removal of slashes..sad

@TtheB

Thanks for your Help!!! I have incorporated your changes in my solution

And by "not working" you mean?

I m not able to load ForgeJiraMailHandler.js, I checked in Mozilla Firebug, js is not getting loaded. The dropdown is coming as empty. No errors in atlassian.log file and no error in Firebug console 

Try wrapping the whole JS you have shown within this method 

AJS.toInit(function() {
//your JS here
});

or within AJS.$() method instead.

 

Also make sure you are using the right contexts for your web resource, refer the section on contexts here:

 

https://developer.atlassian.com/jiradev/jira-platform/building-jira-add-ons/jira-plugins2-overview/jira-plugin-module-types/web-resource-plugin-module

I guess try adding the contexts as well:

 

<context>ForgeJiraMailHandler</context>

<context>atl.admin</context>

<context>atl.general</context>



And also be sure to clear the browser cache by hitting Ctrl-F5 on PC or Cmd-R on mac.

Also, can you check in if that web resource is actually enabled when you install the plugin? You can check that under "Manage Addons" and then expanding the link which shows your addon being installed.

@Petar Petrov [Botron]

I added below line in my velocity:

&lt;script src="$req.contextPath/download/resources/com.soprasteria.di.mailhandler.ForgeJiraMailHandler:ForgeJiraMailHandler-resources/ForgeJiraMailHandler.js" type="text/javascript"&gt;&lt;/script&gt;

So now when i m hitting below url, it is displaying js content to me

http://localhost:2990/jira/download/resources/com.soprasteria.di.mailhandler.ForgeJiraMailHandler:ForgeJiraMailHandler-resources/ForgeJiraMailHandler.js  

just that js is still not getting loaded in my browser/Velocity.

Suggest an answer

Log in or Join to answer
Community showcase
Sarah Schuster
Posted Jan 29, 2018 in Jira

What are common themes you've seen across successful & failed Jira Software implementations?

Hey everyone! My name is Sarah Schuster, and I'm a Customer Success Manager in Atlassian specializing in Jira Software Cloud. Over the next few weeks I will be posting discussion topics (8 total) to ...

3,089 views 13 18
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you
Atlassian Team Tour

Join us on the Team Tour

We're bringing product updates and pro tips on teamwork to ten cities around the world.

Save your spot