Client Side Inter Portlet Communication in Liferay

Today we will discuss Client Side Inter Portlet Communication in Liferay . In my opinion it is the simplest way for sharing data between two portlets which are on same page. Liferay provide two basic methods for this:-

1)For Client

Liferay.fire('eventName',{
            parameter1: value1,
            parameter2: value2

    });

2)For Receiver

 Liferay.on('eventName',function(event) {
   var firstValue = event.parameter1,
   var  secondValue = event.parameter2

});

Note:- Their may be one sender and many receiver but sender and all the receiver are must be on the same page . 

We take a simple scenario where user can select food type from one portlet and second portlet shows food items on the basis of first portlet.Here we create two project and each project contain one portlet.

So lets start this step by step:-

For Sender

Step 1:-Create Liferay Project and Portlet

Inside eclipse IDE Click on File->New->Liferay plugin project and give the project name as client-side-sender and click finish. After that Right Click on your project and click on New than click on Liferay Portlet. Provide class and package name and select MVCPortlet and click finish.

Note:-You can check the snapshots in my  blog on Portlet Configuration Page in Liferay.

Step 2:-Change view.jsp 
Open view.jsp and paste this:-

Explanation:-

• On click of button we fetch the value of selected radio button and set in foodType.
• We give the eventName as selectedFoodType which is used to fetch the data in receiver.

Note:-Change <requires-namespaced-parameters> is false inside liferay-portlet.xml.

For Receiver

Step 1:-Create Liferay Project and Portlet
Similarly as in Sender Create project with name client-side-sender and create a portlet in it.

Step 2:-Change view.jsp
Open view.jsp and paste this:-

Explanation:-

Here we get the value from event and on the basis of input we show the output.

For Output

Now deploy both sender and receiver portlet and add to same page .

Now Select Vegetarian and click submit

Select Non-Vegetarian and click submit

Hope this will Help....

You can Download Source code from  Client Side IPC.

Related Post:-

Inter Portlet Communication in Liferay

Inter Portlet Communication using Events

Inter Portlet Communication using Public Render Parameter

Inter Portlet Communication using Session

Creating Services using Maven

Liferay Message Customization

Jasper Report with Eclipse

Validation in Liferay