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:-

<script>
$(document).ready(function(){
$("#submit").click(function(){
var selectedfood = $("#foodForm input[type='radio']:checked").val();
Liferay.fire('selectedFoodType',{
foodType: selectedfood
});
});
});
</script>
<form id="foodForm">
<h3><input type="radio" name="foodType" value="veg">Vegetarian<br><br></h3>
<h3><input type="radio" name="foodType" value="non-veg">Non - Vegetarian<br><br></h3>
<input type="button" value="Click Here" id="submit">
</form>
view raw view.jsp hosted with ❤ by GitHub

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:-

<script type="text/javascript">
$(document).ready(function(){
Liferay.on('selectedFoodType',function(event) {
var foodType = event.foodType;
var htmlString;
if(foodType == 'veg'){
htmlString = "<h3><font color=green> You are Vegetarian. You Can Enjoy Dosa</font></h3>";
}
else {
htmlString = "<h3> <font color=red>You are Non - Vegetarian. You can enjoy Chicken.</font></h3>";
}
jQuery('#foodInfo').html(htmlString);
});
});
</script>
<div id="foodInfo"><h3>Please Select Food Type</h3></div>
view raw view.jsp hosted with ❤ by GitHub


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