KHICHAD TECHNOLOGIES

Frontend Client Extensions in Liferay 7.4

2025-02-13T11:58:17Z

Overview:

Liferay 7.4 offers a powerful system for extending its functionality with front-end client extensions. This allows developers to embed custom JavaScript, CSS, and external frameworks (like React, Angular, or Vue.js) directly into the Liferay portal. By leveraging this system, you can create dynamic, interactive user interfaces while maintaining the core capabilities of Liferay, such as user authentication and data security.

In this blog, we will explore how to create a front-end client extension in Liferay 7.4 using React. By converting a React app into a custom web component, we can seamlessly integrate it into the Liferay portal. This enables the development of interactive UIs for Liferay users while utilizing React's powerful ecosystem.

Prerequisite:

JDK 11
Liferay Server: liferay-dxp-tomcat-2024.q4.0
Liferay Developer Studio: 3.9.7.202207131011-ga8
Node.js
React JS

What is a Frontend Client Extension in Liferay?

A frontend client extension in Liferay allows developers to add custom functionality to Liferay's frontend without modifying the core platform. These extensions can be used to:

Add custom JavaScript and CSS.
Integrate with external libraries or frameworks.
Build reusable components, such as widgets or portlets, that can be embedded in different parts of a Liferay site.
Extend Liferay's default UI and behavior.

In Liferay 7.4, the frontend client extension system allows you to register custom web components (like React or Angular components) and easily integrate them into the portal.

Key Features of Frontend Client Extensions in Liferay 7.4:

1. Framework Agnostic

Supports modern front-end frameworks like React, Angular, Vue.js, or even plain JavaScript, giving developers flexibility to use their preferred technologies.

2. Seamless Integration with Liferay

Easily integrates custom front-end components into Liferay’s environment, allowing for smooth interaction with Liferay services, APIs, and theme styles.

3. Modular Architecture

Encourages a modular approach to development, allowing for reusable, independent components that can be deployed and maintained separately.

4. Shadow DOM Support

Provides Shadow DOM encapsulation for CSS and JavaScript, ensuring style and behavior isolation from Liferay’s global environment. This prevents conflicts with other portal elements.

5. Single Page Application (SPA) Compatibility

Fully compatible with Liferay’s SPA navigation system, enabling fast, smooth transitions between pages without full reloads.

6. Deployment via Liferay Workspace

Simplifies deployment using Liferay Workspace and the Blade CLI, streamlining the build and deployment process for front-end developers.

7. Customization and Extensibility

Offers the ability to customize and extend Liferay’s default behavior and UI through custom elements, widgets, and portlets.

8. Access to Liferay APIs and Services

Provides easy access to Liferay’s REST APIs, OAuth2 services, and ThemeDisplay objects, enabling dynamic, data-driven applications.

9. Automatic Resource Loading

Automatically handles loading of JavaScript and CSS resources, optimizing performance and reducing manual configuration.

Types of Frontend Client Extensions

JavaScript: Include custom JavaScript code for specific functionalities.
CSS: Add custom CSS styles to specific pages or the entire platform.
Theme CSS: Modify the existing Liferay theme by adding custom CSS styles.
Theme Favicon: Change the favicon displayed in the browser tab.
Custom Element: Register and integrate external applications as widgets within Liferay.
IFrame: Embed external content within a dedicated frame on a Liferay page.

Steps to implement a front-end client extension in Liferay 7.4:

1. Create a Workspace Project:

Open Liferay Developer Studio and start the server.
Navigate to File → New → Liferay Workspace Project
Provide a project name (e.g., global-workspace) and click Finish.

2. Install Node.js:

Ensure Node.js is installed on your system.
You can download it from nodejs.org.

3. Create a Client Extension Folder:

Inside the workspace, create a new folder named client-extension.

4. Create a React App in the Client Extension Folder:

Open your terminal and navigate to the client-extension folder.
Run the following command to create a new React app inside this folder: Command: npx create-react-app my-react-app.

5. Update index.js:

The WebComponent class extends the HTMLElement class to manage the lifecycle of the custom React element, ensuring correct mounting and unmounting for improved performance.

6. Update index.html:

Modify index.html to register the React custom element. This ensures that when the browser encounters <employee-management-react-custom-element>, it renders the React application.

7. Create the client-extension.yaml File:

At the root of your React app, create client-extension.yaml. This file configures how Liferay loads the custom element:

a. Assemble Section
This section defines how static assets (like CSS, JS, and images) are packaged for deployment.

from: build/static
Specifies the source directory where static files are generated, typically from a React build (npm run build).
into: static
Indicates the destination directory where these files will be placed in the final build output.

b. Custom Element Configuration (my-react-custom-element1)

cssURLs:
css/main.*.css: Points to the main CSS file generated during the React build. The asterisk (*) is a wildcard matching hashed filenames like main.a1b2c3.css for cache busting.
friendlyURLMapping: my-react-custom-element1
Defines a user-friendly URL slug for accessing the custom element, useful in platforms like Liferay for direct navigation.
htmlElementName: my-react-custom-element1
Specifies the name of the custom HTML tag used to embed this component in your HTML.
instanceable: false
Indicates that the custom element cannot be added multiple times on the same page. Setting it to true would allow multiple instances.
name: My React Custom Element1
The display name of the custom element in the admin interface (e.g., Liferay Control Panel).
portletCategoryName: category.client-extensions
Specifies the category under which this custom element will be listed in the admin panel. Here, it's under Client Extensions.
type: customElement
Indicates that this extension is a Custom Element (Web Component).
urls:
js/main.*.js: Points to the main JavaScript bundle generated by the React build. The wildcard (*) handles hashed file names for cache management.
useESM: true
Instructs the system to use ES Modules (ESM), a modern JavaScript module format that enhances performance and compatibility with modern browsers.

8. Test Headless API:

Open a browser and navigate to: http://localhost:8080/o/api/
Click on the REST APPLICATION tab.
Click on employee-rest/v1.0 to view and test the API.
You can follow our blog for a detailed guide on creating headless APIs. Read more here.

9. Create a Test.js file:

Navigate to the src folder inside your React app:
Create a new folder named utils inside src.
Inside the utils folder, create a new file named test.js.

10. Create API Functions in test.js:
Inside src/utils/test.js, create API functions:

a. addObject(object): Adds a new employee via POST.

b. getEmployees(): Fetch All Employees

c. deleteEmployee(employeeId): Deletes an employee via DELETE.

d. updateEmployee(employeeData): Updates an employee via PUT.

11. Create Individual CRUD Components

AddStudent.js: Create the AddEmployee.js component to handle adding new employees.
EmployeeList.js: This component displays the employee list and includes the logic to delete employees from the list.
UpdateEmployee.js: Create the UpdateEmployee.js component to update existing employee records.

12. Build the Client Extension

Delete the node_modules folder from the React app.
Open Gradle Task Executor in Liferay Developer Studio.
Navigate to Client-Extension -> employee-management-app.
Under the Build section, click on Build to execute the build task.
After a successful build, a zip file employee-management-app.zip i will be generated in the dist directory.

13. Deploy the Client Extension

Open Gradle Task Executor in Liferay Developer Studio.
Navigate to Client-Extension -> employee-management-app.
Under the Build section, click on Deploy to execute the deployment task.
After deployment, the client extension will be available on the Liferay server. You can confirm that it has been properly configured from the workspace.

If you have any query, click here

Custom Permission in Liferay 7.4

2025-02-11T09:43:25Z

Overview:

Custom permissions in Liferay 7.4 empower developers to create advanced access control mechanisms that go beyond the platform's default settings. Using Liferay’s robust permission framework, developers can define specific rules and actions for portlets, model instances, or other resources. This capability ensures that permissions align precisely with business workflows, enhancing security and enabling granular, role-based access control for users. By tailoring permissions to suit unique application requirements, Liferay 7.4 provides a scalable and flexible solution for managing access to sensitive data and features.

Prerequisite:

JDK 11
Liferay Server: liferay-dxp-tomcat-7.4.13.u92
Liferay Developer Studio: 3.9.7.202207131011-ga8

How Custom Permissions Work

Liferay's permission system operates on the principle of actions and resources:

1. Actions: These represent operations that can be performed, such as VIEW, UPDATE, DELETE, or custom-defined actions like ADD_COMMENT or EXPORT_DATA.

2. Resources: These can be:

Portlet Resources: Access to the portlet itself and its associated features.
Model Resources: Access to specific entities, such as a blog entry, user profile, or custom object.
File or Data Resources: Access to files, documents, or other forms of data. By combining these elements, developers can define who (roles/users) can do what (actions) on a specific resource.

Features of Custom Permissions

1. Role-Based Control

Permissions can be assigned to roles such as Administrator, Guest, Power User, or custom-defined roles. This ensures that access aligns with user responsibilities.

2. Granular Access Levels

Developers can define permissions not only at a high level (e.g., portlet-level) but also at the entity or field level within a model.

3. Dynamic Management

Permissions can be adjusted dynamically through the Liferay Control Panel or programmatically using APIs.

4. Integration with Workflow

Custom permissions integrate seamlessly with Liferay’s workflow system, enabling conditional access based on the state of a resource.

5. Guest and User Differentiation

Actions available to guests (unauthenticated users) and authenticated users can be defined separately, providing an additional layer of control.

Steps to Implement Custom Permissions in Liferay:

1. Start the Liferay Developer Studio:

Open Liferay Developer Studio.
Start the Liferay server by navigating to the Servers tab and clicking on the Start button.

2. Create a Workspace Project:

Open Liferay Developer Studio and start the server.
Navigate to File → New → Liferay Workspace Project.
Provide a project name (e.g., global-workspace) and click Finish.

3. Create a Service Builder

Go to File → New → Liferay Module Project.
Choose the Service Builder template, provide the project name (e.g., customer-service), and click Finish.
Enter the class and package name.
Modify the service.xml file to define an entity (e.g. Customer) with attributes. Set the remote-service attribute to true.

4. Build the ServiceBuilder Module

Open Gradle Task Executor in Liferay Developer Studio.
In the Gradle Task Executor, navigate to Modules.
Go to the customer Service module.
Under the customer Service module, go to the Build section.
Click on Build Service to execute the build task.
Refresh the Gradle project to generate necessary packages and classes.

5. Define Custom Resource Actions in a Service Builder Module

Create a resource-actions folder under src/main/resources/META-INF/ in your module.
After creating the resource-actions folder, create the default.xml file within it.

6. Configuring Resource Actions

Specify the resource.actions.configs property in portal.properties to map your custom resource actions.

7. Enforce Permissions in the Service Layer

Use the Permission Checker API in your service methods to enforce permissions.
Add Customer:

Delete Customer:

8. Create a Portlet:

Navigate to File → New → Liferay Module Project.
Provide a project name (e.g., customer-portlet) and click Finish.
Enter the class and package name.

9. Integrate Service Builder with the Portlet

10 .Define Custom Resource Actions in the portlet module:

Create a resource-actions folder under src/main/resources/META-INF/ in your module.
After creating the resource-actions folder, create the default.xml file within it.

11. Configuring Resource Actions in the portlet

To define custom permissions for your Liferay module, you need to map the resource actions to their corresponding configurations. This is achieved by specifying the resource.actions.configs property in the portal.properties file.

12. Implement add, delete, and get Methods in the MVC Portlet:

13. Creating Views with JSP and Adding Permissions

Init.jsp: init.jsp file is a JSP file that initializes the portlet. It defines some taglibs and retrieves the mainRequire attribute set in the Java code.
View.jsp: The view.jsp file is used to display the data to the user.

Add Customer:

14. Deploy the portlet (Customer-portlet):

Deploy the portlet module using the Gradle Task Executor.
Add the portlet to a page.

15. Assign Permissions via Control Panel
After implementing custom permissions and permission checks in your portlet, you need to assign these permissions to specific roles (e.g., power-user, administrator) or individual users in Liferay. This can easily be done through the Control Panel.

a. Creating a User and Assigning a Role.

Navigate to the Control Panel and click on Users and Organizations.

Click on the (+) icon and add the necessary user information.

Click on Save and assign the custom permission role to the user you created.

b. Set the permission:

Now, go to Control Panel > Roles > Regular Roles and navigate to your role (e.g., 'Customer Custom Permission').
Go to Define Permissions and search for your application (e.g., 'Customer').
Set the application and resource permissions.
Then, go to Assignees and assign the permissions to the user.

c. Test Your custom permission:

Log in as your user (Test1 user).
First, set the application permissions: action.ADD_CUSTOMER, view customer, and delete customer."

Now, go to the page of the site where your portlet is available
Here, you should be able to view the customer, add a customer, and delete a customer.

Here, I changed the permissions to only allow viewing and adding a customer.
Now, I modified the permissions to only allow viewing and adding a customer. As a result, the delete button is no longer visible because I did not grant the delete permission in the application permissions.
Next, set the resource permission to allow only view permissions.
Now, I can only view the customer and cannot delete the customer. If I try to click the delete button, an error will be shown stating that the user does not have permission to delete the customer.

If you have any query, click here

CRUD Operations Using React Portlet in Liferay 7.4

2025-02-11T06:27:00Z

Overview:

A React portlet in Liferay 7.4 enables developers to build modern, interactive user interfaces by leveraging React’s capabilities within the Liferay DXP platform. These portlets enhance user experience through dynamic and reusable components, optimized performance, and seamless integration with Liferay's backend services and APIs. With support for modern front-end technologies, react portlets provide flexibility, efficiency, and maintainability, making them a popular choice for web application development. This blog explores how to implement CRUD (Create, Read, Update, Delete) operations using a React portlet in Liferay 7.4.

Prerequisite:

JDK 11
Liferay Server: liferay-dxp-tomcat-2024.q4.0
Liferay Developer Studio: 3.9.7.202207131011-ga8
Node.js
React

Steps to Perform CRUD Operations Using a React Portlet in Liferay 7.4:

1. Create a Workspace Project:

Open Liferay Developer Studio and start the server.
Navigate to File → New → Liferay Workspace Project
Provide a project name (e.g., global-workspace) and click Finish.

2. Create a Service Builder Module

Go to File → New → Liferay Module Project.
Choose the Service Builder template, enter the project name (e.g., react-crud-service), and click Next.
Enter the class name and package name, then click Finish.
The necessary file structure for Service Builder will be automatically created.

3. Add a Student Entity in service.xml

Modify the service.xml file to include the Student entity definition. This will enable the automatic generation of service layers for handling CRUD operation.

4. Build the ServiceBuilder Module

Open Gradle Task Executor in Liferay Developer Studio.
Navigate to Modules → react-crud-service.
Under the Build section, click on Build Service to execute the build task.
Under the react-crud-service module, go to the Build section.
Click on Build Service to execute the build task.

Refresh the Gradle project to generate necessary packages and classes.

5. Implement the business logic for Create, Read, Update, and Delete (CRUD) operations in the remote service layer of the Service Builder.

Create: Add logic to save a new student entity to the database.

Read: Fetch all students from the database.

Update: Modify an existing student.

Delete: Remove a student by studentId.

6. Create a React Portlet:

Navigate to File → New → Liferay Module Project.
Provide a project name (e.g., student-react-portlet) and click Finish.
Select Project Template Name as react-portlet and click Next.
Enter the class name and package name, then click Finish.
The necessary file structure for the React portlet will be created.

7. Rendering Your Component:

Index.js file: Modify the index.js file to render your React component within the Liferay framework.

App.js (Main Application Component): This file serves as the root of your React application and can manage routing, state, and global context.

8. Create Individual CRUD Components

AddStudent.js: Create the AddStudent.js component to handle adding new students.

Output of addStudent.js Component:

StudentList.js: Create the StudentList.js component to display the list of students.

Output of StudentList.js Component:

UpdateStudent.js: Create the UpdateStudent.js component to update existing student records.

Output of update action

Delete Student: Add a delete functionality that allows users to remove students from the list.

Output of delete action

9. Deploy the React Portlet and Test

Deploy the React portlet
Navigate to Liferay's control panel and add the React portlet to a page.

Test the CRUD operations to ensure data is being created, retrieved, updated, and deleted correctly.

If you have any query, click here

CRUD Operations Using MVC Portlet in Liferay 7.4

2025-01-30T09:15:48Z

Introduction:

CRUD (Create, Read, Update, Delete) operations are fundamental for managing data in web applications, and Liferay's MVC Portlet offers a robust framework for implementing them efficiently. The MVC Portlet follows the Model-View-Controller design pattern, enabling developers to create modular and maintainable applications. In this blog, we’ll provide a step-by-step guide to implementing CRUD operations using an MVC Portlet in Liferay 7.4, showcasing how to seamlessly handle data creation, retrieval, updating, and deletion within the Liferay platform.

Prerequisite:

JDK 11
Liferay Server: liferay-dxp-tomcat-2024.q4.0
Liferay Developer Studio: 3.9.7.202207131011-g

Steps to Perform CRUD Operations Using an MVC Portlet in Liferay 7.4:

1. Start the Liferay Developer Studio:

Open Liferay Developer Studio.
Start the Liferay server by navigating to the Servers tab and clicking on the Start button.

2. Create a Workspace Project:

Open Liferay Developer Studio and start the server.
Navigate to File → New → Liferay Workspace Project.
Provide a project name (e.g., global-workspace) and click Finish.

3. Create a Service Builder:

Go to File → New → Liferay Module Project.
Choose the Service Builder template, provide the project name (e.g., employee-service), and click Finish.
Enter the class and package name.
Modify the service.xml file to define an entity (e.g. Employee-service) with attributes. Set the remote-service attribute to true.

4. Build the ServiceBuilder Module

Open Gradle Task Executor in Liferay Developer Studio.
In the Gradle Task Executor, navigate to Modules.
Go to the Employee Service module.
Under the Employee Service module, go to the Build section.
Click on Build Service to execute the build task.

Refresh the Gradle project to generate necessary packages and classes.

5. Implement business logic for (CRUD) Create, Read, Update, Delete in service builder.

Create: Add logic to save a new entity (e.g., an employee) to the database.

Read: Fetch all employees.

Update: Modify an existing employee.

Delete: Remove an employee by employeeId.

6. Create a Portlet:

Navigate to File → New → Liferay Module Project.
Provide a project name (e.g., employee-portlet) and click Finish.
Select “Project Template Name” as “mvc-portlet” and Click on “Next” .
Enter the class and package name click on “Finish”. The necessary file structure for mvc module will gets created as below.

7. Integrate Service Builder with the Portlet

To add the dependency for employee-service in your MVC portlet, include the following line in the build.gradle file of your MVC portlet.

8. Now, create the addEmployee.jsp file in the same directory as view.jsp and add the following code to addEmployee.jsp.

Output of addEmployee.jsp

9. Now, implement the processAction method to add an employee in the controller class of the MVC portlet.

10. Now add below code in view.jsp

11. Now override render method of portlet to fetch all employees and send employees list to view.jsp

Output of view.jsp

12. Now, create the updateEmployee.jsp file in the same directory as view.jsp and add the following code to updateEmployee.jsp.

13. Now, implement the processAction methods for the update action.

Output of updateEmployee.jsp

14. Now, implement the processAction method for the delete action.

Output of delete action

If you have any query, click here.

CRUD Operation with Headless REST API in Liferay

2025-02-10T09:38:07Z

Overview:

A Headless REST API refers to an architecture that allows systems to interact with each other without being tied to a front-end user interface. This is particularly useful in enterprise applications, where the back-end data needs to be accessed by different front-end systems or third-party applications.

Using Headless REST APIs, developers can perform CRUD operations (Create, Read, Update, Delete) on Liferay’s resources without relying on its traditional user interface. This flexibility enables integration with external systems, custom front-end applications, mobile apps, and IoT devices.

Prerequisite:

JDK 11
Liferay Server: liferay-dxp-tomcat-7.4.13.u92
Liferay Developer Studio: 3.9.7.202207131011-ga8

Headless REST API:
A Headless API is an interface that allows you to interact with a system’s data programmatically, without requiring a user interface (UI). In a headless environment, the front-end (UI) is independent of the back-end, and communication occurs via APIs, making it easier to integrate with mobile apps, web apps, or other services.

A Headless REST API in Liferay refers to a set of API endpoints that allow for the interaction with the Liferay platform without using its user interface (UI). It allows you to manage and retrieve data, content, and other resources from Liferay in a "headless" manner, meaning there's no need for a front-end web interface directly tied to the API's operations. This API is designed to be consumed by external systems or client-side applications (e.g., mobile apps, single-page applications, etc.).

Key Features of Headless API:

Decoupled Front-End and Back-End: Headless APIs enable a decoupled architecture where the frontend and backend are separated. This allows developers to build user interfaces independently from the Liferay platform, offering greater flexibility and scalability.
JSON-Based Data Exchange: The API communicates using JSON (JavaScript Object Notation) to exchange data between client and server. This ensures a lightweight, easy-to-parse data format that works well with modern web applications.
RESTful Design: Liferay’s Headless APIs follow REST (Representational State Transfer) principles, ensuring a standard way to interact with the backend. This provides stateless operations using HTTP methods like GET, POST, PUT, and DELETE.
Scalability and Flexibility: Liferay’s headless APIs allow for easy scaling, enabling integrations with various third-party systems, and supporting large-scale, distributed solutions.
Content and Document Management: Provides powerful APIs for managing content types (web content, blogs, etc.) and handling document storage, retrieval, and manipulation in the Document and Media Library.
Security & Authentication: Liferay Headless APIs offer robust authentication mechanisms such as OAuth2, JWT, and Basic Authentication to ensure secure communication between the client and the API.
Custom Resource Extensions: Developers can extend Liferay’s headless API by adding custom resources and endpoints, enabling specialized business logic and personalized integrations.
Integration with Third-Party Systems: Seamlessly integrates with external systems like CRMs, ERPs, and other applications, enabling a unified ecosystem and data exchange without a traditional UI.

Steps for Performing CRUD Operations with Liferay Headless REST API

To perform CRUD (Create, Read, Update, Delete) operations using Liferay Headless APIs, you’ll interact with specific endpoints for each operation. Below are the steps for each operation:

1. Start the Liferay Developer Studio:

Open Liferay Developer Studio.
Start the Liferay server by navigating to the Servers tab and clicking on the Start button.

2. Create a Workspace Project:

Open Liferay Developer Studio and start the server.
Navigate to File → New → Liferay Workspace Project.
Provide a project name (e.g., global-workspace) and click Finish.

3. Create a Service Builder

Go to File → New → Liferay Module Project.
Choose the Service Builder template, provide the project name (e.g., employee-service), and click Finish.
Enter the class and package name.
Modify the service.xml file to define an entity (e.g. Employee) with attributes. Set the remote-service attribute to true.

4. Build the ServiceBuilder Module

Open Gradle Task Executor in Liferay Developer Studio.
In the Gradle Task Executor, navigate to Modules.
Go to the Employee Service module.
Under the Employee Service module, go to the Build section.
Click on Build Service to execute the build task.

Refresh the Gradle project to generate necessary packages and classes.

5. Implement business logic for (CRUD) Create, Read, Update, Delete in service builder.

Create: Add logic to save a new entity (e.g., an employee) to the database.
Read: Fetch all employees.
Update: Modify an existing employee by employeeId.
Delete: Remove an employee by employeeId.

6. Create and Develop the REST Builder Module

Go to File → New → Liferay Module Project and select the REST Builder template.
Provide a project name (e.g., employee-rest) and click Finish.
Enter the class and package name.
Add the OpenAPI configuration in the rest-openapi.yaml file under the *-impl module’s root folder.

7. Generate Scaffolding:

Open Gradle Task Executor in Liferay Developer Studio.
In the Gradle Task Executor, navigate to Modules.
Go to the employee-rest module.
Under the E employee-rest module, go to the employee-service-impl section.
In the employee-service-impl module, go to the Build section.
Click on buildRest to execute the build task.
Refresh the Gradle project to generate necessary packages and classes.

8. Add employee-service Dependency to employee-rest Project:

Navigate to the build.gradle file of the employee-rest-impl project in your project structure.
Add the employee-service Dependency
Refresh Gradle
Save the changes and sync the Gradle project. In your IDE, click on Sync Gradle Project

9. Now we have performed the CRUD operation for Employee in OpenAPI and implemented Business Logic for each service.

Add Employee
Get All Employees
Update Employee
Delete Employee

10. Deploy and Test the API:

Deploy the REST Builder module to the Liferay server.
The API is available at the following URL: http://localhost:8080/o/api
Add an Employee:
Retrieve All Employees:
Update an Employee:
Delete an Employee
If you have any query, click here

Product Architecture

2025-01-28T04:45:42Z

Introduction:

Liferay Product Architecture refers to the structural design of the Liferay platform, which is an open-source enterprise portal designed to build and manage web applications, digital experiences, and content management systems.
Liferay's architecture focuses on modularity, flexibility, and scalability, allowing developers to build customized solutions for enterprise needs.

Frontend:
The front end refers to the visual and interactive part of a website or application that users see and engage with. It involves designing and coding the user interface (UI) to ensure a seamless and appealing experience using technologies like HTML, CSS, and JavaScript. The focus is on creating responsive, accessible, and user-friendly designs that align with the project goals.

HTML:
HTML (Hypertext Markup Language) is the standard language used to create the structure and content of web pages. It provides the framework for organizing text, images, links, and multimedia elements on a webpage. HTML uses a system of tags and attributes to define the layout and structure, allowing browsers to interpret and display the content correctly. It forms the foundation of every website and works seamlessly with CSS and JavaScript to create visually appealing and interactive user experiences.

CSS:
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML elements on a webpage. It allows developers to apply styles such as colors, fonts, spacing, and positioning to create visually appealing designs. CSS enables responsive layouts, ensuring web pages adapt to different screen sizes and devices. It works by linking style rules to HTML elements through selectors. CSS enhances user experience by separating content (HTML) from design.

Java script:
JavaScript is a powerful, high-level programming language used to create dynamic and interactive features on websites. It enables developers to add functionality such as animations, form validation, content updates, and interactive elements. JavaScript works seamlessly with HTML and CSS, making web pages more engaging and responsive. It runs directly in the browser and supports frameworks like React, Angular, and Vue for advanced web development. JavaScript is a core technology for building modern web applications.

Browser:

A browser is a software application used to access and view websites on the internet. It interprets HTML, CSS, and JavaScript to render web pages. Popular browsers include Google Chrome, Mozilla Firefox, and Safari.

1. Native Development:

Native development is done for platform-specific apps (such as Android and iOS).
Native apps make full use of the device’s hardware and software capabilities.
Ios uses Swift/objective-c and Android uses java/Kotlin.
These are fast and deliver high performance.

2. Metal:

Apple has a low-level graphics API that uses the GPU (Graphics Processing Units) on iOS and macOS.
It is used for high-performance graphics and 3D rendering.
Metal provides direct access to the GPU for faster processing.
Ideal for gaming, virtual reality, and complex visual application.

3. React JS:

ReactJS is a JavaScript library used to build user interface (UL).
It works on component-based architecture.
It is fast and efficient due to virtual DOM.
Mainly used to build Single page Applications.
It helps in fetching data from API and displaying it in UI.

4. Angular:

Angular is a JavaScript framework for building dynamic web applications.
It uses Typescript, a powerful superset of JavaScript.
Angular supports features like two-way data binding and dependency injection.
It is great for building large-scale, single-page applications.
APIs are used in angular to Fetch and manage data dynamically.

5. Another JavaScript framework:

Vue. Js: A progressive JavaScript framework used to build user interfaces and single-page applications, offering simplicity and flexibility.
Svelte: A compiler-based JavaScript framework that converts Components into efficient, standalone JavaScript at build time, leading to faster performance.

Backend:
The backend is the server-side part of a web application responsible for processing data, managing business logic, and interacting with databases. It handles tasks like creating APIs, managing authentication, and ensuring that the frontend receives the necessary data. Backend development uses technologies like Java, Python, PHP, Node.js, Django, and Laravel to support the functionality of a web application.

What is API
API (application programming interface) is set of rules, protocols and tools that allow different software applications to communicate and interact with each other Enables applications to request services or data Frome other application, operating systems, or servers.

How Does API Work

Request: a clint (app) sends a request to the API
Endpoint: the request hits a specific URL in the API
Response: The API processes the request and sends Back a response, typically in Json or XML format.

What are Portlets
Portlets are small, reusable web components that display specific content or functionality within a larger portal or web application. They operate independently but are integrated into a portal page, allowing multiple portlets to coexist and deliver different features or data to the user.

What is Authorization:
Authorization is the process of deciding what a person or system is allowed to do after they have been verified. It controls access to resources, like files, settings, or actions, based on the user's permissions. For example, after logging into an app, authorization determines whether you can view a file, edit it, or just read it based on your role (like Admin, User, or Guest).

Persistence:
Persistence means data is stored in a non-volatile medium (like a database or file system), so it remains available even after the application is closed or the system restarts.

DB (Database):
A Database (DB) is an organized collection of data that is stored and managed in a way that allows for easy retrieval, modification, and updating. It is designed to handle large amounts of data and supports operations like querying, inserting, updating, and deleting data. Databases are commonly used in applications, websites, and enterprise systems to store and manage information such as user data, transactions, and inventory.

Search indexing:
Search indexing is the process of organizing and storing data in a structured format to make it easily retrievable by a search engine. It involves analyzing and indexing content, such as text or metadata, so that relevant results can be quickly found in response to user queries.

Cluster:
A cluster is a group of interconnected computers (nodes) that work together as a single unit to perform tasks, share resources, and provide high availability, scalability, and fault tolerance. It is commonly used in distributed computing, cloud environments, and databases.

Integration Adapters:
Integration Adapters are software components or tools used to facilitate communication between different systems, applications, or platforms. They act as bridges that allow two or more disparate systems to connect, share data, and work together, despite having different technologies, formats, or protocols.

What are Services:
Services are software components that perform specific tasks or provide functionalities to users or other systems. They can be background processes, web services, or APIs that enable interaction and data exchange between systems. Services are reusable, modular, and designed to handle specific operations.

Caching:
Caching is the process of storing frequently accessed data in a temporary storage layer (cache) to improve performance and reduce the time it takes to retrieve data. It allows applications or systems to access data faster by avoiding repetitive computation or database queries, enhancing speed and efficiency.

Auditing:
Auditing is the process of systematically recording, examining, and verifying activities, events, or changes within a system to ensure compliance, detect anomalies, and maintain accountability. It helps track user actions, data modifications, and system performance for security, legal, or operational purposes.

Workflow:
Workflow is the sequence of tasks, activities, or processes that are organized and executed in a specific order to achieve a particular goal or complete a business process. It defines how tasks are coordinated, who performs them, and how data flows between steps to ensure efficiency and consistency in operations.

Authentication:
Authentication is the process of verifying the identity of a user, system, or device to ensure that they are who they claim to be. It typically involves validating credentials such as usernames, passwords, biometrics, or tokens to grant access to a system or resource.

Analytics:
Analytics refers to the systematic process of collecting, analyzing, and interpreting data to derive meaningful insights that help in decision-making. It involves the use of statistical, mathematical, and computational methods to identify patterns, trends, and correlations within data. Analytics can be applied to various fields, such as business, marketing, healthcare, and sports, to improve performance, optimize strategies, and make data-driven decisions.

Message Bus:
A Message Bus is a communication system that facilitates the exchange of data between different software applications, services, or components within a system. It acts as a central hub or channel through which messages (data or events) are sent, received, and processed in a distributed environment. The message bus ensures decoupling between different systems, allowing them to communicate asynchronously and in a scalable manner. It typically supports features like message routing, queuing, and delivery guarantees, enabling efficient and reliable communication between services.

If you have any query, click here

Create Liferay Objects Using Asset Library and Account

2025-01-27T18:05:54Z

Overview:

In Liferay, creating custom Liferay Objects and utilizing Asset Libraries alongside Accounts offers an effective solution for managing both content and organizational data. You can use Asset Libraries to manage and organize digital content such as images, documents, and videos, making content management more streamlined. By associating custom Liferay Objects with Accounts, you establish a relationship between your business data and specific organizations or business units.

This integration enables you to display the connection between custom objects and the Account system object, creating a seamless experience for organizing and managing both content and data. By leveraging this relationship, you can efficiently handle assets and custom data linked to specific accounts, improving content management and enhancing data organization within the Liferay platform.

Prerequisite:

JDK 11
Liferay Server: liferay-dxp-tomcat-7.4.13.u92
Liferay Developer Studio: 3.9.7.202207131011-ga8

Liferay Objects:

Liferay Objects are custom data entities that can be created directly within the Liferay platform using the Objects framework. These objects allow you to define fields, relationships, and behaviors similar to database tables, without requiring database-level programming. They seamlessly integrate into the Liferay ecosystem for managing application-specific data.

Key Features of Liferay Objects:

System Objects: Default objects integrated with Liferay’s core functionality, such as Account, Organization, and User.
Custom Objects: User-defined objects that extend the functionality of system objects to meet specific business requirements.
Fields: Add custom data fields for your objects.
Relationships: Establish links to system or custom objects.
Actions: Set up custom workflows or business rules.
Layouts: Design user-friendly interfaces.
Views: Configure how data is displayed to users.

Creating Custom Liferay Objects Using Asset Library and Account Workflow in Liferay:

Steps for Creating Custom Liferay Objects Using Asset Library and Account

Creating custom objects in Liferay allows you to build tailored applications that meet specific business needs. Below are the step-by-step instructions for creating custom objects related to Asset Library and Account, and linking them for seamless management and display:

Step 1: Accessing the Object Section:

Ensure your Liferay server is running.
Open your browser and navigate to localhost:8080.
Go to the Control Panel and click on Objects.

Step 2: Creating a New Custom Object

In the Objects section, click the + icon to add a new custom object.
Provide the following details for the new object:

Label: Identifies the object in the Objects admin and supported application contexts (e.g., Workflow, Display Page Templates, Forms). (e.g., Product).
Plural Label: Name for plural references (e.g., Products).
Object Name: Define the object name (e.g., Product). This cannot be changed once published.

3. Click Save to create a draft of the custom object.

Step 3: Adding Fields

Navigate to the Fields tab and click the + icon to add fields.
Provide the Field Label, Field Name, and select the Field Type (e.g., Text, Decimal, Integer).

3. Add fields to your Product object, such as:

Product Name (Text)
Product Description (Text Area)
Price (Decimal)
Stock Quantity (Integer)

Step 4: Editing Object Details

Go to the Details section of your custom object.
Set Scope as "Site"
Set Panel Link as "Site Administration > People"
Save and publish the object.

Step 5: Establishing Relationships with System Objects

Linking Custom Object with Account:

Open the Account object and click on the + icon to add the relationship.

Choose One-to-Many as the relationship type.
Choose Product as the object in the object field.
Click Save to establish the relationship.

Step 6: Creating an Account

Navigate to the Control Panel and click on Accounts.
Add account information and addresses as needed.

Click Save.

Step 7: Creating an Asset Library

Go to Global Menu > Applications > Asset Library.
Provide a name for the Asset Library.
Add sites to the Asset Library.

In the Documents and Media section, create a folder for Product images and upload relevant images.

Step 7: Adding a Product Image Field

Navigate to Control Panel > Objects > Select Product.
Add a new field
Label: Product Image
Name: productImage
Field Type: Attachment
Request Files: Upload or Select from Documents and Media Item Selector.

Step 8: Viewing Your Object

Go to the Site Navigation under People and select Product.
Click on the '+' icon to add the object.
Fill in the details for each field, including uploading an image from the Asset Library.

Save the object.

Step 9: Displaying the Object on a Web Page

Navigate to your site and drag and drop the Asset Publisher onto the page.
Click Configuration in the Asset Publisher.

Set Asset Selection to Dynamic and select Asset Type: Product.
Save the configuration.
The Product object will now be visible on the web page.

If you have any query, click here

Cron Job Scheduling in Liferay DXP 7.4 : Best Practices and Tips

2025-01-27T18:06:11Z

Introduction:

The Job Scheduler is a powerful framework built on Liferay's scheduler engine, allowing you to run and schedule business logic seamlessly. A cron job scheduler is a vital feature in any application for automating tasks at specified intervals.
This framework uses the DispatchTaskExecutor interface to create templates with custom logic, which you can use to set up tasks through the Control Panel. After creating a task with the Job Scheduler, you can adjust its settings and schedule when it should run.
cron jobs are often used to perform maintenance tasks, email notifications, clean-up operations, or other background processes.

Prerequisite:

JDK 11
Liferay Server: liferay-dxp-tomcat-2024.q4.0
Liferay Developer Studio: 3.9.7.202207131011-ga8

Cron Job Scheduling Workflow in Liferay:
The cron job configuration process involves several steps that work together to schedule, execute, and track the execution of tasks. Below is a detailed explanation of each step:

1. Scheduler Framework:
Objective: Use the Quartz Scheduler to create a trigger based on the cron expression.
The Quartz Scheduler is a popular and powerful job scheduling library used in Liferay to handle cron jobs. It allows for highly configurable job scheduling. When the cron expression is parsed, a trigger is created that determines when the job should run.

2. Cron Job Configuration:
Objective: Define the cron expression and store it in an OSGi component or configuration file.
A cron expression is a string that represents a time schedule. It is a highly flexible and concise way to define when a job should run
Example:

0 0 12 * * ? — This means the job will run at 12:00 PM (noon) every day.
0 0 0 1 * ? — This runs the job at midnight on the first day of each month.

The cron expression is typically stored in a configuration file or directly in an OSGi service or component in Liferay. These configurations are loaded when the Liferay server starts or can be updated through the Control Panel or custom configurations.

3. Job Executor:

Objective: Execute the job once the trigger fires.

The Job Executor is a critical component in the scheduled job process. Once the cron expression is processed, and the scheduled trigger fires at the specified time, it is the Job Executor's responsibility to carry out the actual execution of the task. This is where the core logic of the scheduled task is executed.
BaseDispatchTaskExecutor, which is the base class provided by Liferay to create custom task executors. When the scheduled trigger fires, Liferay will invoke the doExecute method.

4.OSGi Scheduler Service:

Contains the task execution logic, defined as an OSGi service.
Includes the business logic for the scheduled task, such as database interactions, processing data, and other operations.
Business Logic: This step involves performing the core task of the scheduled job. It could involve a variety of operations, such as querying or updating a database, sending emails, performing calculations, processing data, or other application-specific tasks.

5. Task Logic/Business Logic:

Objective: Perform the business logic of the job.

6. Logs:

Logs the task execution details such as success/failure, execution time, messages, and errors.
Provides insights into task performance and debugging information.

7. Database:

Objective: Persist the task execution results for future reference and auditing.

1. Persistence of Results:

After the scheduled job (cron task) is executed, it’s important to store the execution results for reference and tracking. This involves saving key details about each execution, such as:
Task Name: The name of the task being executed. This helps in identifying what the task is doing (e.g., "Daily Report Generation" or "Data Backup").
Status: The status of the task after execution, indicating whether it was successful, failed, or encountered any issues.
Execution Time: The date and time when the task was executed are crucial for tracking the timing and ensuring that tasks run at the correct scheduled intervals.
Error Messages (if any): If the task encounters an error during execution, these error messages or exceptions need to be logged. This helps identify the root cause of any failures and is crucial for debugging.

Steps to Set Up a Cron Job Scheduler in Liferay:

Follow these detailed steps to create and set up a Cron Job Scheduler in Liferay.

1. Create a Liferay Workspace Project

Open Liferay Developer Studio and start the Liferay Server.
Go to the File menu, select New, and choose Liferay Workspace Project.
Enter your desired project name (e.g., liferay-cron-job), then click Finish.

2. Create a Liferay Module Project

Navigate to File → New → Liferay Module Project.
Name the project (e.g., liferay-cron-jobs-scheduler).

2.1 Select Project Template:

Choose the template as mvc-portlet.

2.2 Click Next and proceed with the project setup.
2.3 Enter the Portlet Class and Package Name. Then click Finish to create the module.

3. Create a Java Class for the Cron Job Logic

Right-click the package name in the project and select New → Java Class (e.g., ScheduledJobTaskExecutor).
In the newly created Java class, add the following properties:

4. Implement Job Logic

Extend BaseDispatchTaskExecutor to Implement Custom Task Logic: By extending BaseDispatchTaskExecutor, you can create custom logic for your cron job, enabling it to be scheduled, executed, and tracked within Liferay's task scheduler framework.
Override Methods:
Implement the following required methods:
(a). doExecute(): This is the method where the main logic of the job should be written. When the job is triggered, this method will be executed, and your specific task logic should go inside this method.
(b). getName(): This method should return the name or identifier for your task or job. This is useful for identifying which task is being executed or scheduled. It can return a simple string representing the name of the job.

Example:

5. Deploy the Portlet

After adding your logic, deploy the portlet to the Liferay server.

6. Log in to the Liferay Portal

Open your browser and log in to the Liferay Portal.
Navigate to the Global Menu → Control Panel → Configuration → Job Scheduler.

7. Access Job Scheduler

Navigate to the Global Menu → Control Panel → Configuration → Job Scheduler.

8. Configure the Cron Job Scheduler

In the Job Scheduler interface, click the + icon to add a new scheduler.
Select Scheduled Job Task Executor from the available options.
Enter the job name and click Save.

9. Test the Cron Job

Click the Run Now button to execute your job immediately.
You should see a confirmation message indicating that the job has executed successfully.

10. Manage Your Cron Job

You can now manage the scheduled job by modifying its configuration, schedule, and other settings to meet your needs.

10.1 Adjust Time Zone:

In the Time Zone field, select the desired region to ensure the job runs at the correct time in your preferred time zone.

10.2 Customize Cron Expression:

In the Cron Expression field, you can enter a specific cron expression that defines when and how often the job should be triggered (e.g., daily, weekly, or specific times).
Optionally, set an End Date and End Time to determine when the job should stop running, allowing for precise control over its lifecycle.

10.3 Define End Date and Time:

Optionally, set an End Date and End Time to determine when the job should stop running, allowing for precise control over its lifecycle.

11. Monitor Job Logs

Click on your job to view its details.
Go to the Logs tab to monitor the output and status of the scheduled job.

If you have any query, click here