Introduction

Once a portlet is placed on a portal page, its data is not directly shared with other portlets. IPC (Inter Portlet Communication) defines the ways that a Portlet can interact and communicate with another Portlet. There are four ways to make inter portlet communication :

In this post, we will see how to communicate between portlets in client side using Ajax.

Client side communication

The JSR-286 (Portlet 2.0) specification don’t provide any approach to make an inter portlet communication on the client side. Liferay provides a powerful API based on JavaScript to perform communication between portlets within the client side.

One of the advantage of this solution is that there is no need for portlet configuration (portlet.xml) and the communication is done without page refresh. But the inconvenient is that all portlets must be in the same page since it uses JavaScript.

Below steps to follow to make a Portlet communication on the client side :

  • Sender portlet

The Liferay JavaScript API provides the function Liferay.fire to fire the event. It takes two parameters:  the first one is the event name and the second is the data to send.

Below how to use it :

You will often need to use Ajax calls to get data from the client side. To allow that you must set the property requires-namespaced-parameters to false in the liferay-portlet.xml file as below:

  • Receiver portlet

To process the fired event, The Liferay JavaScript API provides Liferay.on. The first parameter is the event name and should be the same as the fired one. The second parameter is the function to process the event :

You will often need to use Ajax calls to get data from the client side. To allow that you must set the property requires-namespaced-parameters to false in the liferay-portlet.xml file as below:

Concrete example

Let’s see a full example of using the IPC in client side using Ajax.

github-mark
The code source is available on Github. Download the source

Let’s consider two portlets :

  • CarList (Sender portlet): This portlet shows a list of cars. The user can select a car from the list. When the user select a car, an Ajax call is done in the client side to get the corresponding car and an event will be fired with the selected car. The car information will be displayed in the second portlet.
  • CarInformation  (Receiver portlet): If an event is fired, it will be processed in the client side of the second portlet which will display the car information.
IPC using Porlet session

Client side IPC

Sender portlet : CarList

  • Portlet.xml

  • Liferay-portlet .xml

Since an Ajax call will be done in this portlet, we will set the property requires-namespaced-parameters to false in the liferay-portlet.xml file as below:

  • Firing the event

Below the jsp view in which an event is fired with the selected car :

I used a portlet:resourceURL to serve the resource in Ajax call. Below the backing bean serving the resource :

Note that the car is sended as a parameter of type JSon.

Receiver portlet : CarInformation

  • Portlet.xml
  • Liferay-portlet .xml

Set the property requires-namespaced-parameters to false in the liferay-portlet.xml file as below:

  • Processing the event

The event is processed on the client side as below :

Note that the object event contains the parameter car.

Rendering after deployment

The CarList portlet is on the left. CarInformation portlet is on the right.

Liferay portlet communication on client side

Liferay portlet communication on client side

Below the result after selecting Ferrari car.

Liferay portlet communication on client side after the click

Liferay portlet communication on client side after the click

github-mark
The code source is available on Github. Download the source