I'm trying to load the css and javascript files into my plugin, but despite having what I think is the correct code in the atlassian-plugin.xml file, nothing appears to be loaded. I've seen other people have the same problem but their solutions don't work for me. Here is what I have for the code: com.atlassian.auiplugin:ajs com.atlassian.auiplugin:aui-experimental-table-sortable example-report Does anybody know why the files aren't being imported? EDIT: I forgot to mention that I had this line of code in my view.vm file already. sorting works so I'm sure importing of at least that dependency was successful, but I'm not sure why my js and css files are not taking affect. $webResourceManager.requireResourcesForContext("example-report")

I had this problem and there is more than one thing to check. $webResourceManager.requireResourcesForContext("example-report") This is incorrect. It needs to be: $webResourceManager.requireResourcesForContext({groupId}.{artifactId}:example-report-resources) * be sure to replace the groupId and artifactId with the values found in your pom.xml You may try putting this in the body of your velocity template: * be sure to replace the groupId and artifactId with the values found in your pom.xml Also, you should be able to see whether or not your .js file is loaded by using Dev Tools of your Browser while the page is loading (Network tab). You can also try navigating to your .js and .css files using the technique I laid out in my previous comment. That will force you to understand the groupId and artifactID and how they are used with respect to the .js and .css files.

Your src=might be slightly different. Another way to test this is to try the URL in your browser. Go to something like: * http://localhost:2990/jira/download/resources/com.example.my-example:example-report-resources/example-report.js * http://localhost:2990/jira/download/resources/com.example.my-example:example-report-resources/example-report.css If everything is configured correctly and loading as it should, you will see your .js or .css contents appear in your browser. Also, for troubleshooting, open your Browser's Developer tools, open the console, reload your page. Dev tools console will let you see any errors loading your .js

Your web-resource in your original post is correct. If you are using a velocity template, put this into the tag of your template: where: - {groupId} is in your pom.xml - {artifactId} is in your pom.xml - {web-resource key} is in your atlassian-plugin.xml

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

CSS and Javascript not loading into Jira plugin

Shirley He

I'm trying to load the css and javascript files into my plugin, but despite having what I think is the correct code in the atlassian-plugin.xml file, nothing appears to be loaded. I've seen other people have the same problem but their solutions don't work for me.

Here is what I have for the code:

<web-resource key="example-report-resources" name="example-report Web Resources">
<dependency>com.atlassian.auiplugin:ajs</dependency>
<dependency>com.atlassian.auiplugin:aui-experimental-table-sortable</dependency>
<resource type="download" name="example-report.css" location="/css/example-report.css"/>
<resource type="download" name="example-report.js" location="/js/example-report.js"/>
<resource type="download" name="images/" location="/images"/>
<context>example-report</context>
</web-resource>

Does anybody know why the files aren't being imported?

EDIT: I forgot to mention that I had this line of code in my view.vm file already. sorting works so I'm sure importing of at least that dependency was successful, but I'm not sure why my js and css files are not taking affect.

$webResourceManager.requireResourcesForContext("example-report")

Accepted answers

All comments

Alexey Matveev

You need to add

$webResourceManager.requireResource("yourpluginkey:example-report-resources") to your vm template

Shirley He

Whoops, forgot to mention I had this added to the vm template. The tables are sortable so I'm assuming the web-resources have been loaded successfully, but I don't see the js or css taking affect on my plugin

$webResourceManager.requireResourcesForContext("example-report")

Alexey Matveev

Put the first line into your js

alert("hello");

and see if the message appear. It it appears then there are errors in your js, if the message does not appear then js is not loaded

Shirley He

The message does not appear, so the js is not loading for some reason

Shirley He

Decided to come back to this question since I figured out a work around. The js and css files still would not import. Instead, I put the script directly in the view.vm file and it worked.

Jeff Louwerse

One thing that I always try... add/remove the "/" from the location. I swear i have banged my head against this problem many times and it seems depending on what you are doing.. sometimes it is required, other times you have to remove it. I also work on crucible/fisheye and confluence plugins so many that is why it is always confusing to me.. for my Jira plugins though.. I seem to have to omit the initial backslash.

therefore

  <resource type="download" name="example-report.js" location="/js/example-report.js"/>

becomes

  <resource type="download" name="example-report.js" location="js/example-report.js"/>

I also tend to make the key, name and context the same value.. all lowercase, no dots or dashes.. (banged head too many times on this issue!) and when all else fails, put it in

<context>atl.general</context>

DH_id8km7

Your web-resource in your original post is correct.

If you are using a velocity template, put this into the <body> tag of your template:

<script type="text/javascript" src="/jira/download/resources/{groupId}.{artifactId}:{web-resource key}/example-report.js"></script>

where:

- {groupId} is in your pom.xml

- {artifactId} is in your pom.xml

- {web-resource key} is in your atlassian-plugin.xml

DH_id8km7

Your src=might be slightly different.

Another way to test this is to try the URL in your browser. Go to something like:

If everything is configured correctly and loading as it should, you will see your .js or .css contents appear in your browser.

Also, for troubleshooting, open your Browser's Developer tools, open the console, reload your page. Dev tools console will let you see any errors loading your .js

DH_id8km7

I had this problem and there is more than one thing to check.

$webResourceManager.requireResourcesForContext("example-report")

This is incorrect. It needs to be:

$webResourceManager.requireResourcesForContext({groupId}.{artifactId}:example-report-resources)

* be sure to replace the groupId and artifactId with the values found in your pom.xml

You may try putting this in the body of your velocity template:

<script type="text/javascript" src="$baseurl/download/resources/{groupId}.{artifactId}:example-report-resources/example-report.js"></script>

* be sure to replace the groupId and artifactId with the values found in your pom.xml

Also, you should be able to see whether or not your .js file is loaded by using Dev Tools of your Browser while the page is loading (Network tab).

You can also try navigating to your .js and .css files using the technique I laid out in my previous comment. That will force you to understand the groupId and artifactID and how they are used with respect to the .js and .css files.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

jira

developer

import

jira-app-development

javascript

css

external

web-resource