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.

1. Sign in as the Clarity Admin user.

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

2. Open the Site Menu (), expand Site Builder, and click Pages.

3. Click Actions () for the Applications Overview page and select Permissions.
   

4. Assign the View permission to the Business Development Manager and Business Development Specialist roles.

5. Remove all permissions assigned to the Guest and Site Member roles.

6. Click Save.
   This ensures only members of the business development team can access the page.

7. Begin editing the Applications Overview page.

8. Drag and drop a Collection Display into the page body.

9. Select the collection display fragment and click Select Collection () in the configuration side panel.

10. 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.

11. Drag and drop the General Info Display composition into the collection display fragment.
    

12. Select element-text for the Heading fragment and map it to the object’s Business Name field.

13. 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.

14. Delete the collection display.

15. Drag and drop the Distributor Applications Overview Page fragment composition into the page body.
    

16. Open the Browser side panel () and explore the page elements in the composition.

17. Select the Application Collection Display element and configure these settings in the configuration side panel:

    Tab	Setting	Value
    General	Collection	Distributor Applications
    General	Pagination	Numeric
    General	Maximum Number of Items per Page	20

     

    

18. 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 create an overview page for the Application Evaluation object.

1. Open the Site Menu (), expand Site Builder, and click Pages.

2. Click Actions () for the Evaluations Overview page and select Permissions.

3. Assign the View permission to the Business Development Manager and Business Development Specialist roles.

4. Remove all permissions assigned to the Guest and Site Member roles.

5. Click Save.

6. Begin editing the Evaluations Overview page.

7. Drag and drop the Distributor Evaluations Overview Page fragment composition into the page body.
   

8. Select the collection display fragment, click Select Collection () in the configuration side panel, and select Application Evaluations collection provider.

9. Select element-text for the Paragraph fragment in the ID column.

10. In the configuration side panel, map the text element to the object’s ID field.

11. Select element-text for the Paragraph fragment in the Recommendations column.

12. In the configuration side panel, map the text element to the object’s Recommendations field.
    

13. 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 a Simple Clarity Ticket Dashboard Using Data Set Manager

In this exercise, you'll create overview pages for Clarity’s distributor management app using the data set manager as the Clarity Admin user.

Enabling Feature Flags

Before implementing the overview pages, you must enable two release feature flags:

1. Open the Global Menu (), go to the Control Panel tab, and click Instance Settings.

2. Select Feature Flags.

3. In the Release tab, enable Root Object Definitions (LPD-34594) and Data Set Manager (LPS-164563).
   Liferay saves your configuration automatically, so you can begin using the features.

Setting Up the Ticket Data Set

1. Open the Global Menu (), go to the Control Panel tab, and click Data Sets.

2. Click Add ().

3. For name, enter Ticket Data Set.

4. For REST Application, select /c/tickets.

5. Click Save.

6. Begin editing the new data set.

7. Go to the Visualization Modes tab.

8. Click Add () and select Assign from Data Source.

9. Select these fields:

   • dateCreated
   • id
   • accountToTickets > name
   • userToTicket > emailAddress
   • subject
   • ticketStatus > name

   

10. Click Save.

11. Drag and drop the fields to match this order:

    

12. Click Actions () for each field, select Edit, set these values, and click Save.

    Name	Label	Renderer	Sortable
    id	Ticket ID	Default	True
    subject	Subject	Default	False
    accountToTicket.name	Customer	Default	False
    ticketStatus.name	Status	Default	False
    dateCreated	Creation Date	Date and Time	True
    userToTicket.emailAddress	Assignee	Default	False

13. Go to the Actions tab.

14. Click Add ().

15. Set these values:

    Field	Value
    Label	Assign to Me
    Icon	plus
    Type	Headless
    Headless Action Key	AssignTicketToMe
    Confirmation Message	Are you sure you want to assign the ticket to yourself?
    Message Type	Info
    Success > Message	The ticket has been assigned to you.

16. Click Save.

Configure the Page and Permissions

1. Navigate to Clarity Public Enterprise Website.

2. Open the Site Menu (), expand Site Builder, and click Pages.

3. Click Actions () for the Tickets page and select Permissions.

4. Assign the View permissions to the Support Agent role.

5. Remove all permissions assigned to the Guest and Site Member roles.

6. Click Save.

Add the Data Set to the Page

1. Begin editing the Tickets page.

2. Drag and drop a Container fragment onto the page.

3. 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

   
   

4. Drag and drop the Data Set fragment into the container.

5. In the configuration side panel, click Select Data Set View ().

6. Select Ticket Data Set and click Save.

7. Click Publish.

8. Within the Pages application, click Actions () for the Tickets page and select View.

9. Confirm the ticket data set appears in the page.

   If no tickets appear, go to Global Menu () → Applications tab → Tickets and create some test tickets.

Great! You’ve created an overview page for Clarity’s Ticket page. This page provides a clear and organized views of object data, improving usability and streamlining workflows for Clarity's support team.

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.

1. Open the Site Menu (), expand Site Builder, and click Pages.

2. Begin editing the Tickets page.

3. Drag and drop another Container fragment above the data set fragment.

4. 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

5. In the Fragments and Widgets () left side panel, go to the Widgets tab.

6. Drag and drop the Liferay Ticket Custom Element widget into the container.
   

7. Click Publish.

8. Within the Pages application, click Actions () for the Tickets page and select View.

9. Test the kanban board by dragging and dropping tickets between columns.
   

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.