Liferay PortletURL in JavaScript

 

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!

Blogs
I think It's a great feature.

What happend when a portlet has got a friendly url mapper? Will it transform the url too?
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
Help I tried to run the code below. It is not going to my action class.

var renderURL = Liferay.PortletURL.createRenderURL();
//renderURL.setWindowState('exclusive');
renderURL.setParameter('struts_action','/my/action/class');
renderURL.setParameter('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 "
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');
portletUrl.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 !
Thanks.. Does this work in liferay 6?
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
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
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?
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...
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
mail.session.mail.pop3.password=
mail.session.mail.pop3.port=110
mail.session.mail.pop3.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.session.mail.smtp.user=mystore
mail.session.mail.store.protocol=pop3
mail.session.mail.transport.protocol=smtp
portlet.event.distribution=ALL_PORTLETS
portlet.public.render.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/loader/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,\
liferay/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
Could you guys do everyone a favor and generate some actual documentation on this feature? Blog posts are not the way to do that.

Hi ,

I tried to use to create the redner url 

AUI().use('liferay-portlet-url', function(A) {

});

method in javascript In Liferay 7.3 SP3 DXP version, but it did not work. In the console it saying 

Uncaught Error: No inputNode specified. 

I really appreciate any help out here.