Mastering Data Modeling with Liferay Objects

Course Overview

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 (Site Menu), expand Site Builder, and click Pages.

  3. Click Actions (Actions Icon) for the Applications Overview page and select Permissions.
    ​ 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.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.Drag and drop a Collection Display into the page body.

  9. Select the collection display fragment and click Select Collection (Select Collection icon) in the configuration side panel.​ 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.

    Go to the Collection Providers tab and select Distributor Applications.

    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.

    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.

    Select element-html for the HTML fragment and map it to the object’s Applicant Email Addressfield.

    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.

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

  16. Open the Browser side panel (image-20241218-022105.png) 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 Pagination Numeric
    General Maximum Number of Items per Page 20
     

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

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

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

  2. Click Actions (Action icon) 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.

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

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

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

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

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

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

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

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

  2. Click Actions (Action icon) for the Tickets page and select Permissions.

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

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

  5. Click Save.

  6. Begin editing the Tickets page.

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

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

    Select the container and configure the settings in the configuration side panel.
     
  9. In the Fragments and Widgets (Add icon) left side panel, go to the Widgets tab.

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

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

  11. Click Publish to publish the page.

  12. View the Tickets page and test the kanban board by dragging and dropping tickets between columns.

    View the Tickets page and test the kanban board by dragging and dropping tickets between columns.

    If no tickets appear, go to Global Menu (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.

  • Exercise: Building the Applications Overview

  • Exercise: Building the Evaluations Overview

  • Exercise: Setting Up Clarity’s Ticket Dashboard Using Client Extensions

  • Conclusion

Loading Knowledge

Capabilities

Product

Education

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy