Including CSS and JS in custom field

Yanduganov Andrey December 4, 2017

Hello.

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

2 votes
Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 4, 2017

Hello,

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

$webResourceManager.requireResourcesForContext(argument)

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

Yanduganov Andrey December 4, 2017

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

Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 4, 2017

In the atlassian-plugin.xml add

    <context>jira.general</context>

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

Yanduganov Andrey December 6, 2017

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 6, 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

Yanduganov Andrey December 6, 2017

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 6, 2017

I would need to see your code.

Yanduganov Andrey December 6, 2017

What exactly you need to see?

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

Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 6, 2017

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

Yanduganov Andrey December 6, 2017
Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 6, 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. 

Yanduganov Andrey December 7, 2017

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

Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 7, 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.

Yanduganov Andrey December 8, 2017

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:

Безымянный.png

P.S.

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