Can I use bootstrap and jquery plugins when making Jira gadgets?

Hi I’ve been working on Jira gadgets for a couple of months now and I’ve managed to get down a lot of the basics when it comes to using web resources and such to render html in the gadget’s view. However, I was really hoping to be able to use bootstrap and other similar sources typically used in web development.

When I try to just use the script and link includes for bootstrap it says it requires jQuery but you cannot use normal jQuery in a Jira gadget. Is there a way to get around this? Also would it still be possible to extend the AJS.$ with a jQuery plugin?

Thanks

I would strongly advise against using Bootstrap in a Jira gadget. Is there a specific reason you cannot use AUI?

Having said that, if you really want to use Bootstrap, you should be able to work around this by first exporting jQuery to the global scope prior to calling your include to Bootstrap javascript (see jquery - How do I load bootstrap using npm? - Stack Overflow)

I will try to look through AUI and see if it can accomplish what I want.

What about for using jQuery plugins in a gadget?

If possible, I would personally stay away from jQuery as I would consider this an outdated library. You should only really use jQuery if you expect your target audience to be using pre-ES5 browsers, and even then you can get away with polyfills for most missing features.

What are you trying to accomplish with jQuery and the jQuery plugins that you cannot accomplish with vanilla JS?

For my add-ons, I use VueJS as the front-end library, even though Atlassian has chosen to go with React. You can also use these frameworks in gadgets, albeit it might be an overkill.

1 Like

I am quite new to HTML, JS, and CSS as I only really started using them. I was hoping to create columns in a table that were resizeable and give users the option to re-order them.

I haven’t heard of VueJS or React, is there a way to accomplish these tasks with either of the frameworks you mentioned?

Hi @neil.sonnenberg,

Yes, you can create sortable & filtered tables with VueJS and React. If you’re really going to go into the front-end development stuff, you might want to start reading GitHub - kamranahmedse/developer-roadmap: Interactive roadmaps, guides and other educational content to help developers grow in their careers.

Cheers,

Remie