Deploying Clarity's Ticket List Custom Element
Clarity needs an application that allows distributors to view, filter, and expand their open and in-progress tickets. Clarity’s development team is familiar with the React framework and prefers to use it in their frontend implementations. With Liferay’s plug-and-play capabilities, they can continue using React without compromising Liferay’s updates or upgrades.
In this exercise, you’ll explore and deploy a React application developed by Clarity’s team as a custom element client extension to retrieve, filter, and display ticket data.
-
Open a file explorer and navigate to the
exercises/module-1/
folder in your course workspace. -
Rename the
react-app/
folder toclarity-ticketing-ui
.
This is our application folder, which we will transform into a client extension. -
Open the
clarity-ticketing-ui/webpack.config.js
file and paste the following code.Note that we’ve added the
library
format, which specifies how the output bundle should be exposed. -
Save the file.
-
From the
clarity-ticketing-ui/public
folder, open theindex.html
file in a text editor or IDE. -
Replace the
<root>
and the<tickets-root>
tags with a<clarity-ticketing-ui>
tag, the name of our custom element.
Your final result should look like this: -
Save the file.
-
Paste the following code into the
clarity-ticketing-ui/index.js
file.This replaces the default use of
render()
on theticket-root
div, leveraging a Web Component to define the React app as a reusable and self-contained custom element. -
Save the file.
-
Create a new file named
client-extension.yaml
in theclarity-ticketing-ui/
folder and add the following code. -
Move the
clarity-ticketing-ui/
folder into theclient-extensions/
folder within your course workspace. -
Open a terminal and navigate to the
client-extensions/clarity-ticketing-ui/
folder. -
Run this command to build and deploy the custom element client extension:
-
Verify that the client extension deploys successfully:
Now that you've deployed the custom element client extension, examine the ticketing app UI.
-
In your Liferay instance, sign in as the Clarity Admin user.
-
Username:
admin@clarityvisionsolutions.com
-
Password:
learn
-
-
Open the Site Menu (
), click Page Tree, and select the Tickets page. -
Click Edit (
) to start editing the page. -
In the Fragments and Widgets search bar, search for
Clarity Ticketing UI
. -
Drag and drop the Clarity Ticketing UI widget to the page.
-
Click Publish.
You've now learned how to deploy custom element client extensions, giving you more control over your application.
Conclusion
Great! You’ve successfully deployed a custom element client extension for retrieving and displaying Clarity’s ticket data. Next, you’ll learn about a different use case for custom elements as remote applications.
Capabilities
Product
Education
Contact Us