How to use CSS files and JavaScript libraries in JIRA gadgets

Question

How to use CSS files and JavaScript libraries in JIRA gadgets

2.2k Views Asked by CPU_01 At 04 April 2025 at 23:40

Today I have two questions at once for developing JIRA gadgets:

1. CSS

How can I include a .css file for my gadget. I have some tables and those should have some style. The .css file is already in the atlassian-plugin.xml included like this:

<web-resource key="Web-resources" name="My Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
      <resource type="download" name="MyCSS.css" location="/css/MyCSS.css"/>
        <context>jira.general</context>

    <context>The_Context</context>
</web-resource>

But how can I use this stylesheet in my gadget? What do I need for this?

2. JavaScript libraries

I also want to include the Chart.js library, also included in the atlassian-plugin.xml. But how to use it in the gadget?

Original Q&A

There are 2 best solutions below

**LukeSolar** · Answer 1

In your gadget.xml file you have to include the resources via the project key and the gadget key and you defined. - the gadget key in your case is "Web-resources" (I recommend you rename it to mygadget-resources) - the project key is defined in your atlassian-plugin.xml file as attribute of element <atlassian-plugin key="your-project-key">

In your gadget.xml file in the CDATA section inside element Content first require the resource and then include them:

    <Content type="html" view="profile">
            <![CDATA[
                #requireResource("your-project-key:Web-resources")
                #includeResources()
             ]]>
    </Content>

Afterwards you are able to use any css styles you have in MyCss.css and if you add another resource tag for your JS file this will be included too.

That should get you startet.

**dvdsmpsn** · Answer 2

For my gadgets, I separate out all the XML, HTML, JavaScript and CSS from the atlassian-plugin.xml.

The setup is initially more complex, but once you've got this correct, the separation of concerns is much nicer than mangling everything into the atlassian-plugin.xml file.

The relative paths on the other hand do indeed look crazy.

My file system looks like this:

- resources/
    - gadgets/
        - css/
            - example.css
        - html/
            - example.html
        - js/
            - example.js
        - examaple-gadget.xml
    - atlassian-plugin.xml

In /resources/atlassian-plugin.xml:

<!-- add our web resources -->
<web-resource key="${project.artifactId}-resources" name="${project.artifactId} Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <resource type="download" name="example-gadgets/" location="/gadgets"/>
    <context>immersive-for-connections</context>
</web-resource>

<gadget name="Example JIRA Gadget" i18n-name-key="example-jira-gadget.name" key="example-jira-gadget" location="gadgets/example-gadget.xml">
    <!-- hosted at: /rest/gadgets/1.0/g/${project.groupId}.${project.artifactId}:example-gadgets/gadgets/example-gadget.xml -->
    <description key="jira-query-gadget.description">The JIRA Query Gadget Plugin</description>
</gadget>

In /resources/gadgets/example-gadget.xml (replace ${project.artifactId} & ${project.groupId} with the correct value):

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    ...
    <Content type="html" view="example.view" preferred_width="100%" href="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/html/example.html"/>
</Module>

In /resources/gadgets/html/example.html (replace ${project.artifactId} & ${project.groupId} with the correct value):

<!DOCTYPE html>
<html>
    <head>
        ...
        <!--   added ../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/ to most relative links -->
        <link  href="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/css/example.css" type="text/css" rel="stylesheet">
        <script src="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/js/example.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        ...
    </body>
</html>

How to use CSS files and JavaScript libraries in JIRA gadgets

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in JIRA

Related Questions in JIRA-PLUGIN

Trending Questions

Popular # Hahtags

Popular Questions