Consuming APIs from Clarity's Client Extensions

Client extensions offer a powerful way to handle both frontend and backend processes in Liferay. In this scenario, Clarity's developers want to test two specific client extensions for consuming data from their ticketing app. Through these exercises, you'll learn how to use two types of client extensions—frontend custom elements and object actions—to fetch and interact with Liferay data effectively.

Exercise: Implementing Clarity's Frontend Custom Element

Here, you'll build and deploy Clarity's frontend custom element client extension testing client-to-server API calls.

1. Open a file explorer and navigate to the exercises/module-1/ folder in your course workspace.

2. Extract clarity-ticketing-custom-element.zip.

3. Move the clarity-ticketing-custom-element/ folder into the client-extensions/ folder of your course workspace.

4. Open the clarity-ticketing-custom-element/src/services/request.ts file with a text editor or IDE.

5. Underneath the import line, add this code snippet:

   export function request(path: string, method: string = 'GET', body?: any) {
   	return fetch(path, {
   		body,
   		headers: {
   			'accept': 'application/json',
   			'content-Type': 'application/json',
   			'x-csrf-token': Liferay.authToken,
   		},
   		method,
   	});
   }
   

   Copy

6. Save the file.

7. Open a terminal and navigate to the client-extensions/clarity-ticketing-custom-element/ folder.

8. Run this command to build and deploy the custom element client extension:

   blade gw clean deploy

   Copy

9. Verify that the client extension deploys successfully:

   INFO [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED clarityticketingcustomelement_7.4.13 [1468]

   Copy

   Now that you've deployed the custom element client extension, you'll examine the ticketing app's UI.

10. In your Liferay instance, sign in as the Clarity Admin user.

    • Username: admin@clarityvisionsolutions.com
    • Password: learn

11. Open the Global Menu (), go to the Applications tab, and click Client Extensions. Confirm that the Clarity Ticketing Dashboard is present.

    

12. Navigate back to the Home page.

13. Open the Site Menu (), click Page Tree, and select the Tickets page.

14. Click Edit () to start editing the page.

15. In the Fragments and Widgets search bar, search for Clarity Ticketing Dashboard.

16. Drag and drop the Clarity Ticketing Dashboard widget to the page.

    

17. Click Publish.

18. Confirm that the ticket 'How to adjust or tighten my frames?' is in the Open column.

19. In a new browser tab, open the Global Menu (), go to the Applications tab, and click Tickets.

20. Click Actions () for the ticket entry with the subject 'How to adjust or tighten my frames?'.

    

21. Click View.

22. Update the Ticket Status to In Progress.

23. Click Save.

24. Return to the tab with the Tickets page and confirm that the 'How to adjust or tighten my frames?' ticket was moved to the In Progress column without requiring a page refresh.

Exercise: Implementing Clarity's Object Action Client Extension

Here, you'll build and deploy Clarity's object action client extension performing an API call.

1. Open a file explorer and navigate to the client-extensions/clarity-ticketing-action/src/main/java/com/clarityvisionsolutions/ticketing/ folder in your course workspace.

2. Open the TicketActionSuggestionRestController.java file in a text editor or IDE.

3. Replace the code from lines 44 to 50 with the following code snippet:

   WebClient webClient = builder.baseUrl(
   	lxcDXPServerProtocol + "://" + lxcDXPMainDomain
   ).defaultHeader(
   	HttpHeaders.ACCEPT, MediaType.APPLICATION_JSON_VALUE
   ).defaultHeader(
   	HttpHeaders.AUTHORIZATION, "Bearer " + jwt.getTokenValue()
   ).defaultHeader(
   	HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE
   ).build();
   

   Copy

   This adds an authorization header, which ensures this WebClient securely transmits the data between itself and Liferay using the server-generated JWT token.

4. Save the file.

5. Open a terminal and navigate to the client-extensions/clarity-ticketing-action/ folder.

6. Run this command to build and deploy the client extension:

   blade gw clean deploy

   Copy

7. Verify it deploys successfully.

   2025-03-27 12:18:20.538 INFO [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED clarityticketingaction_7.4.13 [1469]
   

   Copy
8. Navigate back to the Home page.

   Run this command from the client-extensions/clarity-ticketing-action/ folder to start the Spring Boot service:

   blade gw bootRun

   Copy

   Now that you've deployed the spring boot client extension and started the service, configure the object action.

9. In your Liferay instance, open the Global Menu (), go to the Control Panel tab, and click Objects.

10. Go to the Ticketing folder and being editing the Ticket object.

11. Select the Actions tab and click Clarity Ticketing Suggestion Action.

    

12. Toggle the Active switch on.

    

13. Go to the Action Builder tab and set these values:

    Field	Value
    Trigger	On After Add
    Condition > Enable Condition	Enabled
    Condition > Expression Builder	ticketStatus == 'open'
    Action	object-action-executor[function#clarity-ticketing-action-object-action-ticket-suggestion]

     

    

14. Click Save.
    Next, you'll configure the OAuth 2.0 scope to allow the action to update tickets.

15. Open the Global Menu (), go to the Control Panel tab, and click OAuth 2 Administration.

16. Click the Clarity Ticketing Action OAuth Application User Agent configuration.

17. In the Scopes tab, click on C_TICKET and select create/update/delete data on your behalf.

    

18. Click Save.
    Next, you'll create a ticket to verify the API is invoked as expected.

19. Open the Global Menu (), go to the Applications tab, and click Tickets.

20. Click Add ().

21. Set these values for the fields:

    Field	Value
    Priority	Minor
    Account to Tickets	Iris Optical
    User to Tickets	Renee
    Region	EMEA
    Subject	Test Client Extension Ticket
    Ticket Status	Open
    Type	Delivery Issue

22. Click Save.

23. Return to the Tickets application menu.

    

24. Click on the ID of the created Test Client Extension Ticket.

25. Verify the Suggestions field contains the “There are no suggestions for this ticket“ value.

    

Conclusion

Great! You've implemented two of Clarity's client extensions consuming Liferay's headless APIs. By leveraging functionalities displayed in these client extensions, Clarity's team is better equipped to optimize their organization's performance.

Next, you'll review what you've learned before moving on to the next module.