• jQuery in Liferay Portal

    Posted on April 4, 2015 by Hamidul Islam in Liferay.

    jquery-in-liferay


    aimBy default jQuery is not added in Liferay. But there is a way to add jQuery in Liferay. This articles basically explains how to add third party JavaScript (JS)  libraries in Liferay portal. In earlier version of liferay, jQuery was available  by default. But when alloy was introduced the jQuery stuffs were removed . Still many developers like to use jQuery along with Alloy in various Liferay developments. 


    Add jQuery in portlet level:

    We can add jQuery in specific portlet. In liferay-portlet.xml under header-portal-javascript we can inject our jQuery.

    Code Example

    <portlet>
    		<portlet-name>sample</portlet-name>
    		<icon>/icon.png</icon>
    		<header-portlet-css>/css/main.css</header-portlet-css>
    		<header-portal-javascript>
    			http://code.jquery.com/jquery-latest.min.js
    		</header-portal-javascript>
    		<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
    		<css-class-wrapper>sample-portlet</css-class-wrapper>
    	</portlet>
    

    Note

    Suppose we have injected jQuery in 2 different portlets as shown in the above and both the portlets are added on the same portal page. In this scenario the jQuery will be loaded 2 times which may cause some conflicts.

    Making jQuery available for all portlets:

    Sometimes we may require jQuery for multiple portlets. In that case adding jQuery in individual portlet does not make any sense. So we must make jQuery available for the entire portal. There are 2 options we can make jQuery available for the entire portal.

    Option 1: Including jQuery in theme level

    The file portal_normal.vm of a theme is loaded on each page of the portal. Therefore this file is the good choice to add our jQuery stuffs. Including jQuery in portal_normal.vm will make jQuery available for all the portlets. Just to add below lines in header section of portal_normal.vm file. 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    Here we are adding jQuery from external source. If required we can download the JS file and keep it under js folder of the theme. After that we can point to the local jQuery file of the theme. 

    Problem in the above approach

    There is a problem in the above approach. If we change the theme then our jQuery will no longer be available. The above approach is applicable when we know that our theme is not going to change in future and we are stick to one and only one theme. 

    Option 2: Inject jQuery by Hook

    In this approach we can simply write one JSP Hook. We can override the JSP file "/html/common/themes/top_js-ext.jspf" through a simple JSP hook and add the entries for the JavaScript libraries that you want to inject. For an example, the following line needs to be inserted into this file and deployed as a hook.

     <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    Note

    In this approach even if we change our theme the jQuery will still be available for the entire portal.  In above we have discussed only about jQuery. In fact we can inject any type of JavaScript Library like Ext JS, Yahoo JS etc. 

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close