Alternative Languages: 日本語

How do I include JS files in all my portlets? #

If you want have Javascript in .js files that you want to make available to all your portlets, there are two ways in which you can include them depending on your version of Liferay.

For version 5.2.3 #

Use Render Part Request (JSR268) #

0/ set usage of Sun's container with portal property (in portal-ext.properties):

portlet.container.impl=sun 

1/ put in portlet.xml :

<portlet>
…
<container-runtime-option>
<name>javax.portlet.renderHeaders</name>
<value>true</value>
</container-runtime-option>
</portlet>

2/ override doHeaders() of GenericPortlet :

@Override
protected void doHeaders (RenderRequest request, RenderResponse response)
{
    org.w3c.dom.Element styleLink = response.createElement("link");
    styleLink.setAttribute("rel", "stylesheet");
    styleLink.setAttribute("href", response.encodeURL(request.getContextPath())+"/css/default.css" );
    response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, styleLink);
}

The link will be added to the page header.

For version 4.3: #

1. copy js files into portal-web/docroot/html/js or into ext-web/docroot/html/js #

2. In your portal.properties, find the entry for javascript.files, and copy/paste that entire entry into your portal-ext.properties #

javascript.files=\
        \
        #
        # JQuery scripts
        #
        \
        jquery/jquery.js,\
....

3. Paste your files to the very end of the entry that you copied over #

For version 4.2: #

1. copy js files into portal-web/docroot/html/js or into ext-web/docroot/html/js #

2. add entry in build.properties #

##
## JavaScript
##

javascript.files=sniffer.js,menu.js,rollovers.js,util.js,validation.js,portal.js,tabs.js,ajax.js,calendar/calendar_stripped.js,calendar/calendar-setup_stripped.js,colorpicker/colorpicker.js,dragdrop/coordinates.js,dragdrop/drag.js,dragdrop/dragdrop.js,dragdrop/resize.js,portlet/layout_configuration.js

3. add entry in top_js.jsp #

portal/portal-web/docroot/html/common/themes/top_js.jsp

<c:choose>
	<c:when test="<%= GetterUtil.getBoolean(PropsUtil.get(PropsUtil.JAVASCRIPT_FAST_LOAD)) %>">

		<%--
		everything.js includes all of the JavaScript files. It is autogenerated
		with the ant build-javascript task.
		--%>

		<script src="<%= themeDisplay.getPathJavaScript() %>/everything.js" type="text/javascript"></script>

		<c:if test="<%= GetterUtil.getBoolean(PropsUtil.get(PropsUtil.JAVASCRIPT_LOG_ENABLED)) %>">
			<script src="<%= themeDisplay.getPathJavaScript() %>/log.js" type="text/javascript"></script>
		</c:if>
	</c:when>
	<c:otherwise>
		<script src="<%= themeDisplay.getPathJavaScript() %>/prototype.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/json.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/sniffer.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/util.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/portal.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/ajax.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/alerts.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/swfobject.js" type="text/javascript"></script>

		<script src="<%= themeDisplay.getPathJavaScript() %>/calendar/calendar_stripped.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/calendar/calendar-setup_stripped.js" type="text/javascript"></script>

		<script src="<%= themeDisplay.getPathJavaScript() %>/colorpicker/colorpicker.js" type="text/javascript"></script>

		<script src="<%= themeDisplay.getPathJavaScript() %>/dragdrop/coordinates.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/dragdrop/drag.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/dragdrop/dragdropzone.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/dragdrop/resize.js" type="text/javascript"></script>

		<script src="<%= themeDisplay.getPathJavaScript() %>/portlet/layout_configuration.js" type="text/javascript"></script>
		<script src="<%= themeDisplay.getPathJavaScript() %>/portlet/messaging.js" type="text/javascript"></script>

		<c:if test="<%= GetterUtil.getBoolean(PropsUtil.get(PropsUtil.JAVASCRIPT_LOG_ENABLED)) %>">
			<script src="<%= themeDisplay.getPathJavaScript() %>/log/log4javascript.js" type="text/javascript"></script>
		</c:if>
	</c:otherwise>
</c:choose>

based on the value of "javascript.fast.load" (defined in portal.properties), Liferay will either use everything.js (a compilation of all the js files) or will include each individual js file (listed in the <c:otherwise> tag). Add the html statement to include your JS file.

see also:

• Liferay FAQ: How do you include CSS and JavaScript in a portlet? http://wiki.liferay.com/index.php/Liferay FAQ#How do you include CSS and JavaScript in a portlet.3F