Adding Overview Pages for Clarity’s Apps
So far, you’ve used object views to display object entries. In these exercises, you’ll create site pages for displaying all submitted applications and evaluations collections. Additionally, you'll use a client extension to create a ticket dashboard.
Exercise: Building the Applications Overview
Here you'll populate the page to display previously created distributor applications.
-
Sign in as the Clarity Admin user.
-
Username:
admin@clarityvisionsolutions.com
-
Password:
learn
-
-
Open the Site Menu (
), expand Site Builder, and click Pages. -
Click Actions (
) for the Applications Overview page and select Permissions.
-
Assign the View permission to the Business Development Manager and Business Development Specialist roles.
-
Remove all permissions assigned to the Guest and Site Member roles.
-
Click Save.
This ensures only members of the business development team can access the page. -
Begin editing the Applications Overview page.
-
Drag and drop a Collection Display into the page body.
-
Select the collection display fragment and click Select Collection (
) in the configuration side panel. -
Go to the Collection Providers tab and select Distributor Applications.
This is the collection provider that Liferay automatically generates for custom object definitions.
Once selected, you can add fragments to the collection and begin mapping their sub-elements to fields available in Distributor Application entries. -
Drag and drop the General Info Display composition into the collection display fragment.
-
Select element-text for the Heading fragment and map it to the object’s Business Name field.
-
Select element-html for the HTML fragment and map it to the object’s Applicant Email Address field.
Next, you’ll use a pre-configured fragment composition to accelerate page design. -
Delete the collection display.
-
Drag and drop the Distributor Applications Overview Page fragment composition into the page body.
-
Open the Browser side panel (
) and explore the page elements in the composition. -
Select the Application Collection Display element and configure these settings in the configuration side panel:
Tab Setting Value General Pagination Numeric General Maximum Number of Items per Page 20 -
Click Publish to publish the page.
Clarity's business development team can now use this page to view all received distributor applications. Now, Clarity needs a similar page for evaluations.
Exercise: Building the Evaluations Overview
Here you’ll populate an overview page for the Application Evaluation object.
-
Open the Site Menu (
), expand Site Builder, and click Pages. -
Click Actions (
) for the Evaluations Overview page and select Permissions. -
Assign the View permission to the Business Development Manager and Business Development Specialist roles.
-
Remove all permissions assigned to the Guest and Site Member roles.
-
Click Save.
-
Begin editing the Evaluations Overview page.
-
Drag and drop the Distributor Evaluations Overview Page fragment composition into the page body.
-
Select element-text for the Paragraph fragment in the ID column.
-
In the configuration side panel, map the text element to the object’s ID field.
-
Select element-text for the Paragraph fragment in the Recommendations column.
-
In the configuration side panel, map the text element to the object’s Recommendations field.
-
Click Publish to publish the page.
Clarity's business development team can now use this page to view and search existing evaluations of distributor applications. Next, Clarity wants to add a ticket dashboard page for viewing tickets and quickly managing their states.
Exercise: Setting Up Clarity’s Ticket Dashboard Using Client Extensions
Clarity’s developers have created a custom element client extension to design a kanban board for support tickets. While client extensions fall outside the scope of this course, this exercise provides an example of using client extensions to build advanced UIs for object definitions. Here you’ll deploy this client extension into Clarity’s Tickets page.
-
Open the Site Menu (
), expand Site Builder, and click Pages. -
Click Actions (
) for the Tickets page and select Permissions. -
Assign the View permissions to the Support Agent role.
-
Remove all permissions assigned to the Guest and Site Member roles.
-
Click Save.
-
Begin editing the Tickets page.
-
Drag and drop a Container fragment onto the page.
-
Select the container and configure these settings in the configuration side panel:
Tab Setting Value General Container Options > Content Display Flex Column General Container Options > Container Width Fixed Width
-
In the Fragments and Widgets (
) left side panel, go to the Widgets tab. -
Drag and drop the Liferay Ticket Custom Element widget into the container.
-
Click Publish to publish the page.
-
View the Tickets page and test the kanban board by dragging and dropping tickets between columns.
If no tickets appear, go to Global Menu ( ) → Control Panel tab → Tickets and create some test tickets.
Conclusion
Great! You’ve created overview pages for Clarity’s distributor management app and tested out their client extension. These pages provide clear and organized views of object data, enhancing usability and streamlining workflows for Clarity's teams. Next, you'll learn how to use display page templates for individual object entries.
Capabilities
Product
Education
Contact Us