Deploying a Custom Application
You can use a custom element client extension to render a JavaScript application as a widget on a Liferay site page. The application is served by Liferay and interacts with Liferay through headless APIs.
Deploy the liferay-ticket-custom-element
client extension.
Run the following command:
./gradlew :client-extensions:liferay-ticket-custom-element:deploy
In Liferay, select the Product Menu () and navigate to Site Builder → Pages.
Click Add () and select Page.
Select the Blank type page. Give the page a name (e.g.
ticketing system
). Click Add.In the left navigation under fragments and widgets, click the Widgets tab.
Scroll down to the client extension type widget. Drag the Liferay Ticket Custom Element widget to the page.
Click Publish.
The custom ticketing system application is now running on the site page.
Note, clicking the Generate a New Ticket button generates additional random ticket entries. You can also create your own ticket object entries from Control Panel → Tickets.
Examine the Custom Element Code
The assemble
block section of the client-extension.yaml
file looks like this:
assemble:
- from: build/assets
into: static
Note, the .js
and .css
build files of the JavaScript application are copied from the build/assets
folder and placed into the deployable client extension .zip
file.
This liferay-ticket-custom-element
is a custom element type client extension. It is defined as follows in the client-extension.yaml
file:
liferay-ticket-custom-element:
cssURLs:
- "*.css"
friendlyURLMapping: current-tickets-custom-element
htmlElementName: current-tickets-custom-element
instanceable: false
name: Current Tickets Custom Element
portletCategoryName: category.client-extensions
type: customElement
urls:
- "*.js"
useESM: true
See Custom Element YAML Configuration Reference for an explanation of each property.
The relevant JavaScript files for the application are contained in the /src
folder. A full explanation of the JavaScript code is beyond the scope of this tutorial, but there are a few things to note:
- The
/src/pages/TicketApp.tsx
file defines the overall layout of the ticketing system page. - In the
/src/services/tickets.ts
file, tickets are created and fetched through the use of thej3y7ticket
object that was created when the data schema was defined. Note thegenerateNewTicket()
function in the/src/ticket.js
file generates additional ticket entries with random field entries. - In the
/src/services/tickets.ts
file, the object’s headless API calls are authorized with theLiferay.authToken
object. This object is available when a web component is running on Liferay and simplifies OAuth2 authorization. - The
package.json
file includes ascripts{ build: }
element that handles the initializing and building of the JavaScript application.
Next: Implement a Documentation Referral System.