Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
Influencing the order of combined JavaScript files
There are multiple portlets on a single page, all of them have some com.liferay.portlet.header-portlet-javascript entries, which are combined together into a single bundle.
However, in my case the order matters. Unfortunately, the portlet placement is not taken into an account, so some libs from second portlet are bundled before the first portlet which breaks some functionality.
Is there any solution for this?
My only (crazy) idea is to create dummy potlet cummulating all libs used on that page and remove javascript references from other portlets.
However, in my case the order matters. Unfortunately, the portlet placement is not taken into an account, so some libs from second portlet are bundled before the first portlet which breaks some functionality.
Is there any solution for this?
My only (crazy) idea is to create dummy potlet cummulating all libs used on that page and remove javascript references from other portlets.
After various tests I can see some correlation between the order and Module/Portlet names.
The more serious thing is observation same libraries referenced from different modules are bundled multiple times. So I either need to keep all portlets in same module or to move javascript libraries into dedicated module/portlet, which needs to be placed to any page with the instance of my script-less portlet.
The more serious thing is observation same libraries referenced from different modules are bundled multiple times. So I either need to keep all portlets in same module or to move javascript libraries into dedicated module/portlet, which needs to be placed to any page with the instance of my script-less portlet.
Hi Jan,
This looks similar to what you are asking/said --
https://community.liferay.com/blogs/-/blogs/sharing-js-across-modules
If you need it on all pages, but don't want to (or can't) include it in the theme you could use this trick. It's for an older version of Liferay but it still applies in 7+ -- I've used static portlets more than once in this new OSGI world
https://community.liferay.com/blogs/-/blogs/adding-a-javascript-to-every-page
Does any of this help?
As an aside, I know it seems odd (and broken) to have the resources loaded on every page but you have to consider the fact that in the portlet world it's no uncommon to encapsulate everything the portlet needs to work as part of the package right? Technically there is no way to know if two portlets that share a resource will be on the same page since technically speaking you should think of each portlet as it's own application. I understand what you want to do of course, and there are lots of people out there fighting to build SPAs on portals. I think the more common approach for what you are trying to do though is to have one (monolith) portlet on the page so that the resources are only loaded once and then use Angular, or VUE, or NPM or React or whatever to update the sections. So your individual portlets become the components of those JS framworks and you package the whole kits as a single portlet.
This looks similar to what you are asking/said --
https://community.liferay.com/blogs/-/blogs/sharing-js-across-modules
If you need it on all pages, but don't want to (or can't) include it in the theme you could use this trick. It's for an older version of Liferay but it still applies in 7+ -- I've used static portlets more than once in this new OSGI world
https://community.liferay.com/blogs/-/blogs/adding-a-javascript-to-every-page
Does any of this help?
As an aside, I know it seems odd (and broken) to have the resources loaded on every page but you have to consider the fact that in the portlet world it's no uncommon to encapsulate everything the portlet needs to work as part of the package right? Technically there is no way to know if two portlets that share a resource will be on the same page since technically speaking you should think of each portlet as it's own application. I understand what you want to do of course, and there are lots of people out there fighting to build SPAs on portals. I think the more common approach for what you are trying to do though is to have one (monolith) portlet on the page so that the resources are only loaded once and then use Angular, or VUE, or NPM or React or whatever to update the sections. So your individual portlets become the components of those JS framworks and you package the whole kits as a single portlet.
Hi Andrew,
thanks for various approaches to share JS libraries, good to know.
In my case all those modules/portlets will end up on a single page, kind of dashboard. In this controlled environment I can afford the luxury to bring the tight dependency of my portlets (mostly charts) to a base one, which contains all required dependencies (moment.js, chart.js, chartjs-plugin-datalabels.js, in the correct order) and it is placed before the rest of components.
I've already implemented this for few portlets and it seems to be a viable option.
Thanks,
Jan
thanks for various approaches to share JS libraries, good to know.
In my case all those modules/portlets will end up on a single page, kind of dashboard. In this controlled environment I can afford the luxury to bring the tight dependency of my portlets (mostly charts) to a base one, which contains all required dependencies (moment.js, chart.js, chartjs-plugin-datalabels.js, in the correct order) and it is placed before the rest of components.
I've already implemented this for few portlets and it seems to be a viable option.
Thanks,
Jan
Copyright © 2025 Liferay, Inc
• Privacy Policy
Powered by Liferay™