Liferay: How portal Javascript files are imported

In this post I’m going to describe how Liferay loads JS files for the whole portal and how we can add new JS imports.

A lot of JS files are loaded by Liferay portal. In the portal.properties file you can see the list of files imported when a user is not connected (“barebone”) and when a user is connected (“everything”).

The two properties are located in portal.properties file:

  • javascript.barebone.files : the minimum list of JS files required
  • javascript.everything.files : barebone JS files + others

Then, either barebone or everything JS files are loaded using HTML “script” tag in the file “top_js.jspf”:

<%
	String[] javaScriptFiles = null;

	if (themeDisplay.isThemeJsBarebone()) {
		javaScriptFiles = JavaScriptBundleUtil.getFileNames(PropsKeys.JAVASCRIPT_BAREBONE_FILES);
	}
	else {
		javaScriptFiles = JavaScriptBundleUtil.getFileNames(PropsKeys.JAVASCRIPT_EVERYTHING_FILES);
	}

	for (StringjavaScriptFile :javaScriptFiles) {
%>
		<script src="<%= themeDisplay.getCDNHost() + themeDisplay.getPathJavaScript() %>/<%= javaScriptFile %>?t=<%= javaScriptLastModified %>" type="text/javascript"></script>
<%  } %> 

Side note: if the property “javascript.fast.load” is set to true, all JS files are packaged in one single JS file and imported in this JSP.

The JS files that can be added to these two lists must be located in the folder “/html/js” of a webapp.

Try to always import JS files that are in a project that is always deployed in your application server to ensure the JS file imported will always exist, for example in a hook or a theme (I always liked the word ‘always’).

New JS files added must be appended to the existing list, so you have to override the property “javascript.barebone.files” or “javascript.everything.files” in your portal-ext.properties file.

This pretty simple mechanism lets you add JS files at portal level in a proper way.

2 thoughts on “Liferay: How portal Javascript files are imported

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s