Blogs

Liferay DXP 7.4 introduced objects: https://learn.liferay.com/web/guest/w/dxp/liferay-development/objects

Objects make it possible to define custom entities in Liferay: you name the objects, their fields, their relationship and Liferay generates the database tables and the APIs.

Once your objects have been published, you can define custom back-office object management screens (list views and management forms) and create end user facing screens to both capture and display data.

The idea behind Liferay Objects is to allow business practitioners to design and implement applications in a low-code fashion. And indeed, Liferay's built-in capabilities make it possible to assemble the objects and screens to deal with the presentation layer of such applications while making it possible to offload the application logic to an external system using webhooks or custom object actions you can trigger on object status change.

Now, instead of writing code to implement that external application logic, let's examine the n8n.io alternative.

Use case - Loan simulator

In order to illustrate the possibilities and architecture patterns, let's take the example of the Loan simulator.

In this application, the user will submit information about his project (its cost, the deposit they can make and the desired monthly installment). Once this information is submitted, the system displays a list of loan simulation results.

Let's examine how we can implement this using Liferay low code application development features + n8n.io for the backend service integration.

About n8n.io

https://n8n.io is a workflow automation platform. The strength of this platform is its integration capabilities: https://n8n.io/integrations/

In the Liferay context, there is one useful pattern you can use all the time:

1. Expose a webhook using n8n.io
2. Receive an object payload from Liferay on that webhook and do some processing (which might involve using the connectors to easily integrate with yet anything else)
3. Make calls to Liferay APIs to interact with Liferay entities using OAuth 2.0 for authorization

n8n.io is not the only platform providing that kind of capabilities but it's one of the few which can run on your own premises. Most alternatives only have SaaS models.

Besides, it's easy to try out n8n.io because there is a community edition and it's quite easy to get started (if you have node, just run npx n8n and you will soon be able to access it on your local machine behind http://localhost:5678). This makes it easy to try out n8n before considering the enterprise license.

They have recently added AI model integration capabilities which look promising, but that's going to be for another blog I guess.

Designing the Liferay Objects

The first step it to create the "Project" and "Loan Simulation" objects in Liferay.
They have a one to many relationship as you can get multiple loan simulation results for one single project.

Note: Please forgive me, I should have used Precision Decimal everywhere.

Creating the Project form page

We are first creating this page which allows the user to submit his project information:

It's made using a Form Container, bound to the Project object with the following options.

It means that when users submit this form, they will be redirected to the Display page template of the Loan simulation result.

Creating the Loan simulation result page

This is what the loan simulation result looks like.

The left hand part is a Form Container associated to the current object (the project). When you submit it, you stay on page (but it gets refreshed).

The right hand part is a Collection Display which displays the simulation results bound to that project.

The related collection can be found behind the third tab. It's available here because we are designing a Display page template which is associated to an object. A collection provider is made available by Liferay for each x to many relationship.

The collection of simulation results updates when the left hand form is resubmitted:

The n8n integration

As you can see on the screens, calculations have happened in the background during the screen transitions. This was done through n8n.io behind the screens.

First, you need to configure object actions for the Project object:

Those actions target an n8n webhook whenever they are triggered:

And on the n8n side, this is the automation we have designed:

We first hit the webhook:

The next step implements the simulation. I wrote something simple for demonstration purposes: https://gist.github.com/fabian-bouche-liferay/c655048400c524db3e6662e331f854af but in real life, a bank would have a dedicated service to do that job.

And finally, the flow calls the Liferay APIs to create the loan simulation result objects:

And uses Liferay OAuth 2.0 credentials to do so:

Debugging n8n

For each workflow execution, you can see step by step how the payload is progressing.

The payload initially received:

Adding the simulation results to the payload:

Using the simulation results to make build the payload of the Liferay API call:

Conclusion and next steps

Using Liferay Objects and n8n, you can quickly create an interactive application PoC and it's also straightforward to integrate with backend services or SaaS services using the many connectors which are available.

This blog is just an introduction, there are things I have not mentioned, like the fact that n8n operates asynchronously and for the application to work flawlessly, you actually have to do some work on the Liferay frontend side to deal with screen refresh when you're waiting for the n8n automation to complete.

But I think this is enough for this first blog. I'll probably write more about it. But I hope this Liferay + n8n.io combination example will inspire you and help you build great applications with Liferay.