It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

0 votes
Answer 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 Sign up to answer
Community showcase
Posted in Jira

How InVision centralized their tools and scaled their remote team with Atlassian and Slack

Hi Atlassian Community, We recently published a case study that we thought you might be interested in. Learn about how InVision built their fully remote company’s culture using Atlassian and Slack ...

247 views 0 1
Join discussion

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you