« Back

Liferay PortletURL in JavaScript

Company Blogs December 20, 2008 By Eduardo Lundgren Staff

 

Each more we feel the need of becoming more and more web 2.0, it sounds like a physics law to the "guys" that are trying to survivor arround the amazing applications that surround us across the urls.

Since few months ago I want to blog post about the new Liferay functionality that let you build PortletURLs using JavaScript only.

There are many places you can apply this new way of generating PortletURLs. Imagine a big list of links on your portlet, instead of download repeated hundreds urls from the server site you can simply create a javascript function that retuns a PortletURL instance and set on the fly the parameters you need. And now, you can simply integrate your pure javascript files (.js) with PortletURLs, without over passing it as parameter for your javascript constructor or another work-arround came from our misterious mind.

The usage of this functionality using JavaScript is very simple:

<script>
var portletURL = new Liferay.PortletURL();
portletURL.setParameter("key1", "value");
portletURL.setParameter("key2", "value");
portletURL.setPortletId(86);
alert( "that is the url: " + portletURL.toString() );
</script>

Or you can simply wrap it into a javascript function:

<script>
function createRowURL( row ) {
   var portletURL = new Liferay.PortletURL();
   portletURL.setParameter("rowNumber", row );

   return portletURL.toString();
}

alert( "row1: " + createRowURL(1) );
alert( "row2: " + createRowURL(2) );
</script>

If you want to know what methods you can play with the JavaScript Liferay.PortletURL you can take a quick look on the methods below:

  • setCopyCurrentRenderParameters: function(copyCurrentRenderParameters);
  • setDoAsUserId: function(doAsUserId);
  • setEncrypt: function(encrypt);
  • setEscapeXML: function(escapeXML);
  • setLifecycle: function(lifecycle);
  • setName: function(name);
  • setParameter: function(key, value);
  • setPlid: function(plid);
  • setPortletConfiguration: function(portletConfiguration);
  • setPortletId: function(portletId);
  • setPortletMode: function(portletMode);
  • setResourceId: function(resourceId);
  • setSecure: function(secure);
  • setWindowState: function(windowState);
  • toString: function();

I've also created some shortcuts for diferent kind of urls on the portal:

  • var actionURL = Liferay.PortletURL.createActionURL(); // = new Liferay.PortletURL('ACTION_PHASE');
  • var renderURL = Liferay.PortletURL.createRenderURL(); // = new Liferay.PortletURL('RENDER_PHASE');
  • var resourceURL = Liferay.PortletURL.createResourceURL(); // = new Liferay.PortletURL('RESOURCE_PHASE');
  • var permissionURL = Liferay.PortletURL.createPermissionURL(portletResource, modelResource, modelResourceDescription, resourcePrimKey);

 

I hope it help you guys. Enjoy!

Threaded Replies Author Date
This is really helpful. Thank you, Eduardo! Jonas Yuan December 21, 2008 3:07 PM
nice! thank you Eduardinho!! Julio Camarero December 22, 2008 2:34 AM
I think It's a great feature. What happend... Jonatan Oyola December 22, 2008 7:28 PM
Eduardo, Does this mean that by using this... Prabhpreet Singh January 17, 2009 8:48 AM
Help I tried to run the code below. It is not... Banji O January 25, 2009 10:32 PM
Hi Eduardo, I am playing with... Camilo Aguilar July 24, 2009 6:02 PM
Is there a way to do this programmaticly? ... dennis monsewicz August 6, 2009 12:54 PM
This is reallt greate! Thanks a lot! Archi Madhu February 3, 2010 3:54 PM
Thanks.. Does this work in liferay 6? SZ khan September 17, 2010 1:15 AM
Hi Sultee, Two things you need to do on 6.0. ... Thiago Leão Moreira November 18, 2010 11:33 AM
Hi, I have a problem with the language part in... Oliver Dudas December 3, 2010 5:33 AM
Is there actual documentation for this... Pam Griffith January 18, 2011 4:21 PM
Guys I don't know how about you, but in current... Jakub Liska January 20, 2011 3:19 AM
I see, it's a module : ... Jakub Liska January 20, 2011 3:25 AM
Hi, I tried to use the createRenderURL()... sri p July 10, 2011 8:12 PM
Could you guys do everyone a favor and generate... Dave Col December 8, 2011 8:18 AM
Useful information about the Liferay JavaScript... Parkash Kumar October 3, 2012 6:36 AM
Really.. Very helpful information for directly... Piyush Ramani March 16, 2013 5:14 AM
Really.. Very helpful information for directly... Piyush Ramani March 16, 2013 5:14 AM

This is really helpful. Thank you, Eduardo!
Posted on 12/21/08 3:07 PM.
nice! thank you Eduardinho!!
Posted on 12/22/08 2:34 AM.
I think It's a great feature.

What happend when a portlet has got a friendly url mapper? Will it transform the url too?
Posted on 12/22/08 7:28 PM.
Prabhpreet Singh
Eduardo,

Does this mean that by using this mechanism I can integrate internal Liferay's Portlets for e.g Articles, Journals, etc directly into non-Liferay portal based web applications?

If yes, can you please provide a sample to use Article Portlet in a web application, lets say based on Zend framework?

Regards,
Prabhpreet
Posted on 1/17/09 8:48 AM.
Help I tried to run the code below. It is not going to my action class.

var renderURL = Liferay.PortletURL.createRenderURL();
//renderURL.setWindowState('exclusive');
r­enderURL.setParameter('struts_action','/my/action/class');
renderURL.setParamete­r('cmd', classType);
renderURL.setParameter('fromDate', _from_Date);


jQuery.ajax(
{
data: data,
url: renderURL.toString()
}
);


Can this be used with a class declared as follows?

"public class ViewReportsAction extends PortletAction "
Posted on 1/25/09 10:32 PM.
Hi Eduardo,

I am playing with Liferay.PortletURL a lot but I am having troubles because I am not see which servlet is attending request's in this uri /c/portal/portlet_url. When I try:

var portletUrl = new Liferay.PortletURL.createRenderURL();
portletUrl.setWindowState('pop_up');
p­ortletUrl.setPortletMode('view');
portletUrl.setPortletId('58');
portletUrl.­setParameter('struts_action', '/login/account/create');
portletUrl.setParameter('saveLastPath', '0');


//alert( "that is the url: " + portletUrl.toString() );
Liferay.Popup(
{
modal: true,
url: portletUrl.toString(),
width: 600
}
);

I am getting a lot of html code from server instead of portlet url

+info:
I am using Liferay 5.2.3 Community Edition

Thanks !
Posted on 7/24/09 6:02 PM in reply to Banji O.
Is there a way to do this programmaticly?

Like, if I wanted to do this using PHP.
Posted on 8/6/09 12:54 PM.
This is reallt greate!
Thanks a lot!
Posted on 2/3/10 3:54 PM.
Thanks.. Does this work in liferay 6?
Posted on 9/17/10 1:15 AM.
Hi Sultee,

Two things you need to do on 6.0.

1- you need to add the "liferay/portlet_url.js" to the list of javascripts on property "javascript.barebone.files"
2 - you need to wrap the javascript code as following


var faleConoscoURL;
AUI().use("liferay-portlet-url", function(a) {
faleConoscoURL = Liferay.PortletURL.createRenderURL();
faleConoscoURL.setParameter("page", $layout.getFriendlyURL()");
faleConoscoURL.setParameter("pageTitle", "$layout.getHTMLTitle($locale)");
});

Eduardo, correct me if I'm doing something wrong (I didn't like the way I created the url wrapped in that AUI function).

Um abraço
Posted on 11/18/10 11:33 AM in reply to Sultee khan.
Hi,
I have a problem with the language part in the url.
Normally I have an url:
http://localhost:8080/cs/web/guest/something,
but the Liferay.PortletURL.createRenderURL() generates the url without the language part:
http://localhost:8080/web/guest/something

When I fire the incorrect url, i get a response with this content:
Failed to load source for: http://localhost:8080/web/guest/something, and then, Liferay, redirects me to the correct url:
http://localhost:8080/cs/web/guest/something.

Problem:
when I submit the page with post method with the incorrect action url, Liferay redirects me to the correct url, but all my form parameters are lost emoticon

Is there something I have missed? In the portlet_url.js I saw nothing about setting the language.

Thanks
Posted on 12/3/10 5:33 AM in reply to Thiago Leão Moreira.
Is there actual documentation for this anywhere? What is the difference between actionURL, renderURL, etc? What are the acceptable parameters for all of the set methods?
Posted on 1/18/11 4:21 PM.
Guys I don't know how about you, but in current LR revision, there is no Liferay.PortletURL object in Liferay .... At least if I'm using it from within AUI sandbox, I don't have it there...
Posted on 1/20/11 3:19 AM.
I see, it's a module : AUI().use('liferay-portlet-url', function(A) { .....
Posted on 1/20/11 3:25 AM in reply to Jakub Liska.
Hi,

I tried to use the createRenderURL() method in javascript, but it did not work.
It is saying "Liferay.PortletURL is undefined"
I really appreciate any help out here.

the following are the things that I did to utilize liferay javascript methods :

Liferay EE 6.0.11
JBOSS 5.1

portal-ext.properties :

jdbc.default.jndi.name=jdbc/LiferayPool
mail.session.mail.pop3.host=localhost
mai­l.session.mail.pop3.password=
mail.session.mail.pop3.port=110
mail.session.mail.po­p3.user=
mail.session.mail.smtp.auth=false
mail.session.mail.smtp.host=smtp-relay.­cswg.com
mail.session.mail.smtp.password=
mail.session.mail.smtp.port=25
mail.sessi­on.mail.smtp.user=mystore
mail.session.mail.store.protocol=pop3
mail.session.mail.­transport.protocol=smtp
portlet.event.distribution=ALL_PORTLETS
portlet.public.ren­der.parameter.distribution=ALL_PORTLETS
portlet.event.max.generation=3
javascript.­fast.load=false
theme.css.fast.load=false
theme.images.fast.load=false
##
## JavaScript
##

#
# Set a list of JavaScript files that will be loaded automatically in
# /html/common/themes/top_js.jsp.
#
# There are two lists of files specified in the properties
# "javascript.barebone.files" and "javascript.everything.files".
#
# As the name suggests, the barebone list is the minimum list of JavaScript
# files required for most cases. The everything list includes everything
# else not listed in the barebone list.
#
# The two lists of files exist for performance reasons because
# unauthenticated users usually do not utilize all the JavaScript that is
# available. See the property "javascript.barebone.enabled" for more
# information on the logic of when the barebone list is used and when the
# everything list is used and how to customize that logic.
#
# The list of files are also merged and packed for further performance
# improvements. See the property "javascript.fast.load" for more details.
#
#
# Specify the list of barebone files.
#
# The ordering of the JavaScript files is important.
#
# The Liferay scripts are grouped in such a way, that the first grouping
# denotes utility scripts that are used by the second and third groups. The
# second grouping denotes utility classes that rely on the first group, but
# does not rely on the second or third group. The third grouping denotes
# modules that rely on the first and second group.
#
javascript.barebone.files=\
\
#
# YUI core
#
\
aui/yui/yui.js,\
\
#
# YUI modules
#
\
aui/attribute/attribute.js,\
aui/event-custom/event-custom.js,\
aui/loade­r/loader.js,\
aui/oop/oop.js,\
\
#
# Alloy core
#
\
aui/aui-base/aui-base.js,\
\
#
# Liferay module definitions
#
\
liferay/modules.js,\
\
#
# Liferay base utility scripts
#
\
liferay/dependency.js,\
liferay/events.js,\
liferay/language.js,\
liferay/­liferay.js,\
liferay/util.js,\
\
#
# Liferay utility scripts
#
\
liferay/portal.js,\
liferay/portlet.js,\
liferay/portlet_sharing.js,\
life­ray/portlet_url.js

--------- end of portal-ext.properties -------------------

jsp file :

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="liferay-aui"%>
<!-- Common references -->
<jsp:include page="../../jsp/mystore.common.jsp" flush="true" />

<script src="<%=request.getContextPath()%>/portlets/deliveryStatus/js/custom.js" type="text/javascript" charset="utf-8"></script>

<portlet:defineObjects/>

<c:set var="namespace"><portlet:namespace/></c:set>

<script type="text/javascript">

var $jq = jQuery.noConflict();
$jq(document).ready(function(){
alert ( " liferay url : "+ Liferay.PortletURL.createRenderURL());
}); // EOF ready function

alert ( " liferay url : "+ Liferay.PortletURL.createRenderURL());

</script>


========== result==============

Liferay.PortletURL is undefined


Thank you in advance,
Sri
Posted on 7/10/11 8:12 PM.
Could you guys do everyone a favor and generate some actual documentation on this feature? Blog posts are not the way to do that.
Posted on 12/8/11 8:18 AM.
Useful information about the Liferay JavaScript technique.
Posted on 10/3/12 6:36 AM.
Really.. Very helpful information for directly use the value in javascirpts
Posted on 3/16/13 5:14 AM.
Really.. Very helpful information for directly use the value in javascirpts
Posted on 3/16/13 5:14 AM.