Using Liferay System Object with Drag-and-Drop UI on Pages (OOTB or Custom Approach?)

Hi everyone,

I’m exploring how to use Liferay System Objects in a more flexible UI way and had a question regarding drag-and-drop capabilities.

As per my understanding, Liferay provides Objects (including System Objects) that can be managed via the Object UI and Headless APIs. However, I’m trying to achieve the following:

Requirement:

  • Use a System Object

  • Display its data directly on a page

  • Allow users to add/view entries via a drag-and-drop component/widget-like experience

What I’ve explored so far:

  • Checked available widgets but didn’t find any OOTB component that directly supports System Objects in a drag-and-drop manner

  • Looked into Object layouts and views, but they seem limited to predefined UI screens

  • Considered using fragments + APIs, but not sure if that’s the recommended approach

Questions:

  1. Is there any OOTB widget or fragment that allows binding a System Object for drag-and-drop usage on pages?

  2. If not, what is the recommended approach to achieve this?

    • Custom Fragment + Headless API?

    • Custom Widget (Portlet)?

    • Using Object REST APIs with frontend framework (React, etc.)?

  3. Are there any best practices or examples for this kind of use case?

Environment:

  • Liferay Version: 7.4.3.132 ga132

Any guidance or suggestions would be really helpful.

Thanks in advance!

Hi,

Yes, this can actually be achieved using OOTB capabilities in Liferay DXP without the need for a custom fragment or React client extension.

You can leverage the following two components:

  1. Object Entries (Data Component) – This allows you to display all entries of the selected Object directly on the page (table/list view with pagination and basic actions).

  2. Form Container (Object Form) – This enables users to create and submit new Object entries based on the configured Object layout.

By dragging and dropping these two components onto the page using the Page Builder, you can achieve a functional UI where:

  • Users can view Object data

  • Users can add new entries

  • Everything works in a low-code, configurable manner

However, if you are looking for more advanced interactions, then a custom solution using Headless APIs with a Fragment or React Client Extension would still be needed.

Hope this helps clarify.

Hi,

Thank you for your response!

I think there might be a slight difference in what I’m trying to achieve. My use case is specifically around Liferay System Objects, not custom objects created via the Object UI.

I’m currently exploring Liferay’s out-of-the-box system objects and want to:

  • Use them directly on pages

  • Allow users to interact with them (view/add entries)

  • Ideally support a drag-and-drop, widget-like experience

From what I understand, the components you mentioned (Object Entries and Form Container) work well with custom objects, but I’m not sure if the same applies to system objects.

Could you please confirm if there’s any OOTB widget/component that supports System Objects in this way?

If not, I’m planning to proceed with a custom fragment approach, likely integrating Headless APIs to handle the data interactions.

Would appreciate your thoughts or any suggestions on best practices for this scenario.

Thanks again!

Hi Patham,

Apologies for the earlier misunderstanding.

Based on the use case, there is currently no out-of-the-box support in Liferay to use System Objects ( Users, Accounts) in a drag-and-drop, widget-based CRUD UI similar to Custom Objects.
However, you can still display system object data using Collections or certain OOTB widgets, but these approaches are primarily read-only and do not support create/update/delete operations directly from the page builder.

Given this, the most suitable approach would be to implement a Custom Fragment or a Liferay Client Extension integrated with Headless APIs. This allows you to build the required UI and handle CRUD operations.
Thanks,
Koustuv