Liferay Client-Side IPC

How to implement Inter Portlet Communication on the Client Side

Overview

Widgets (portlets) in Liferay are usually dedicated to provide a separate piece of functionality: they can be placed onto a portal page, and work independently from the other widgets on the same page.

But sometimes there are scenarios where one widget should react to the actions performed in another one. A typical example is search filters and search results: by applying a filter in the Search Filters widget the Search Results data should be updated according to selected filters.

This kind of communication between portlets is called "Inter Portlet Communication" (IPC). IPC can be implemented in two ways:

- Server-side, using the portlet events mechanism;

- Client-side, using firing and listening to Javascript events;

In this article you'll find how to implement IPC on the client side.

Implementation

For IPC implementation we'll use two portlets:

- "Contacts List" - to display a list of contacts, structured web content;

- "Contacts Filter" - to display the filters using Asset Tags, and filter the content displayed in the "Contacts List".

First, we need to fire a Javascript event when the tags are changed (using the change event for filter checkboxes) in the "Contacts Filter" widget:

Liferay.fire('filterContacts', {
tagNames: tagNames

})

Here we fire a custom 'filterContacts' event using Liferay.fire function provided by Liferay, and pass a payload object with checked tag names.

Then, in the "Contacts List" widget we need to listen to the fired event, and refresh the data based on the provided tags:

Liferay.on('filterContacts', function(event) {
let tagNames = event.tagNames;
refreshContacts(tagNames);

});

Using Liferay.fire function we register a listener for created 'filterContacts' event. The listener function accepts an 'event' payload object with the data passed during firing the event. As we pass tag names using 'tagNames' field, we can get it from event: event.tagNames. Finally, we need to refresh the displayed contacts list in the widget according to tag names received in the event. The 'refreshContacts' function invokes the resourceURL to fetch the contacts list based on provided tag names, and refreshes the UI accordingly (but this is not in scope of this blog).

Enjoy 😏