Including CSS and JS in custom field


I want to sreate my own custom field plugin. I use select2 for it. But I can't include any scripts ir styles in it.

As workaround I inserted my scripts just in <script></script> tag and styles in <style></style>.

And my question is: what is correct way to do it?

E.g. in webwork I can include JS as webresource. But I don't know how to do it in custom field velocity template.

1 answer

1 vote
Alexey Matveev Community Champion Dec 04, 2017


Put in your velocity template for the custom field the following code to the first line


as argument provide reference to your resource defined in altassian-plugin.xml

I already have tried it. Unfortunately it not works for me.

Alexey Matveev Community Champion Dec 04, 2017

In the atlassian-plugin.xml add


for your resources. See if it works. If it works, then you can find the necessary contex later

Well, it almost works.

  1. It works for only styles. So I leave my scripts in template.
  2. When I try change value from issue page I jist see standard input. It looks like no scripts or styles loaded. Really it looks like no velocity template loaded.
Alexey Matveev Community Champion Dec 06, 2017

If you have a code in a repository, I could have a look at your code. Or try to write alert("Hello world");  in your js file and have a look if the alert appears on the screen where you try to edit your custom field. Or you can use developer tools to search if you javascript is loaded

Sorry, It was my mistake. Scripts is loaded and works fine.

But it still not works on issue page. Furthermore it not works if I create issue not from current project. I mean my custom field works only if it loaded on the popup screen.

Alexey Matveev Community Champion Dec 06, 2017

I would need to see your code.

What exactly you need to see?

I have no public repository so I can paste only parts of code.

Alexey Matveev Community Champion Dec 06, 2017

pom.xml, atlassian-plugin.xml, all templates for custom fields, js, css

Alexey Matveev Community Champion Dec 06, 2017

This resource is unavailable for me. But I think the problem is with aui-select2. We also tried to use this type of field with REST call and had similair problems. We decided to use simple select instead. Try to simplify your script. For example, remove rest call or choose another field type. If it works with a simplified version then you can find the real bug. It would be time consuming to try to recreate your example. It is too much complicated. 

I'm not sure I understand what do you mean.

Alexey Matveev Community Champion Dec 07, 2017

I mean that it would be time consuming for me to try to make your code work, because your code has many dependencies on your other modules. If I tried to recreate all dependencies myself, then I would spend too much time.

That is why you have to do it yourself. Try to make your solution easier. Get rid of the rest call. Make your JavaScript as easy as possible and then when you make it work, you try to make it more complicated gradually.

Also I meant that we had about the same problem with aui-select2 when we tried to call a Rest method from an aui-select2 control. I did not dig deep in that case that is why I can not say for sure that it was a bug in Atlassian libraries or a bug in a developer code. But in the end we used aui-select and the code worked for us without changes.

Ok, thank you for explanation.

I tried to change my edit.vm and I've see that template is work.

But all styles and scripts are loaded only when I click on my field then click on Edit button and close popup window:



And if I want to edit this field again I need repeat all these actions.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Sep 25, 2018 in Jira

Atlassian Research Workshop opportunity on Sep. 28th in Austin, TX

We're looking for participants for a workshop at Atlassian! We need Jira admins who have interesting custom workflows, issue views, or boards. Think you have a story to sha...

456 views 7 5
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