Mastering Data Modeling with Liferay Objects

Course Overview

Creating Entry Display Pages for Clarity's Distributor Management App

Clarity’s apps require dedicated pages for presenting individual entries in greater detail. You've already created forms and overview pages for Clarity's distributor management app. Now, it’s time to implement individual display pages and link to them from Clarity's overview pages, providing users with a seamless way to navigate between lists and detailed views of individual entries.

Exercise: Creating the My Application Page

Clarity wants to allow applicants to view the status of their applications. Here you’ll implement a basic application display based on the application success page’s design.

  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. Begin editing the My Application page.

  4. Drag and drop a Distributor Application Success Page composition into the page body.

    Drag and drop a Distributor Application Success Page composition into the page body.

  5. Select element-text for the Mapped Business Name fragment.

  6. In the configuration side panel, map the text element to the object’s Business Name field.

    Map the text element to the object’s Business Name field.

  7. Select the Application Details Grid element, click Actions (Actions) for it, and select Duplicate.

    Alternatively, you can press CTRL + D / Command + D to duplicate the fragment.

    Duplicate the Application Details Grid element.

  8. Select the duplicate and configure this setting in the configuration side panel:

    Tab Setting Value
    General Grid Options > Number of Modules 2

    Select the duplicate grid and configure its number of modules.
  1. Double click the duplicate Application ID fragment to edit its text and enter Application State:.

    Double click the duplicate Application ID fragment to edit its text and enter 'Application State:'.

  1. Select element-text for the duplicate fragment and map it to the Application State field.

    Map the element-text to the Application State field.

  2. Click Publish.

Once published, Clarity’s applicants can go to the My Application page to review the status of their applications. While this page is sufficient for external users, Clarity needs displays for internal users.

Exercise: Creating a Display Page for Application Entries

To thoroughly evaluate each applicant, Clarity's employees require access to the submitted application data. They also need the ability to update entries as they collect information during the review process. Here you’ll implement a detailed display page for distributor applications.

  1. Open the Site Menu (Site Menu), expand Design, and click Page Templates.

  2. Go to the Display Page Templates tab and click New.

  3. Select the Primary Master Page template.

  4. Enter Distributor Application Display for the name and select Distributor Application for content type.

  5. Click Save.

  6. Drag and drop the International Distributor Application Page fragment composition into the page body.

    Use the search bar in the Fragments and Widgets side panel to quickly find the fragment you’re looking for.
  1. Drag and drop a Select fragment at the bottom of the General Details Container under Comments.

    Drag and drop a Select fragment at the bottom of the General Details Container under Comments.

  2. Select the fragment and map it to the Application State field.

  3. Select the Distributor Application Form Container element and configure these settings in the configuration side panel:

    Tab Setting Value
    General Actions After Submit > Success Action Stay in Page
    General Actions After Submit > Show Notification After Submit Yes
    General Actions After Submit > Success Notification Text The application was saved successfully.
  1. Double click the Submit button and change its text to Save.

  2. Click Publish.

  3. Click Actions (Actions) for the Distributor Application Display template and select Mark as Default.

    This ensures Liferay uses the template to display the entry when accessed via friendly URL.

Now Clarity’s business development team can access applicant information directly in Clarity’s public enterprise website. They also can update fields as they gather information.

Exercise: Creating a Display Page for Evaluation Entries

Clarity also needs a display page for viewing and updating application evaluations. Here you’ll create this display page.

  1. Open the Site Menu (Site Menu), expand Design, and click Page Templates.

  2. Go to the Display Page Templates tab and click New.

  3. Select the Primary Master Page template.

  4. Enter Application Evaluation Display for the name and select Application Evaluation for content type.

  5. Click Save.

  6. Drag and drop the Distributor Application Evaluation Display fragment composition into the page body.

  7. Select element-text for the Mapped Evaluation ID Heading fragment.

  8. In the configuration side panel, map it to the ID field.

    In the configuration side panel, map the element-text to the ID field.

  9. Within the Applicant Details Grid, map the element-text for each of these fragments to their corresponding object fields:

    Fragment Name Mapped Field Configuration
    Mapped Applicant Name Application to Evaluation (Distributor Application) > Applicant Name
    Mapped Business Name Application to Evaluation (Distributor Application) > Business Name
    Mapped Business Website URL Application to Evaluation (Distributor Application) > Business Website URL

    These mappings use the Application to Evaluation relationship to access data in the related distributor application.
  1. Select the Application Evaluation Form Container element and configure these settings in the configuration side panel:

    Tab Setting Value
    General Actions After Submit > Success Action Stay in Page
    General Actions After Submit > Show Notification After Submit Yes
    General Actions After Submit > Success Notification Text The evaluation was saved successfully.
  1. Double click the Submit button and change its text to Save.

  2. Click Publish.

  3. Click Actions (Actions) for the Application Evaluation Display template and select Mark as Default.

    This ensures Liferay uses the template to display the entry when accessed via friendly URL.

Now Clarity’s business development team can use this display page to view and update evaluations. While these display pages are functional, Clarity needs to improve employee access to them.

Exercise: Linking to Object Entry Display Pages

Currently, Clarity’s UI doesn’t provide an convenient way to access display pages for applications and evaluations. Here you’ll link to these display pages in the overview pages you designed previously.

  1. Begin editing the Applications Overview page.

  2. Replace the ID paragraph element in the first column with a Heading fragment.

  3. Select the Heading and configure these settings in the configuration side panel.

    Tab Setting Value
    General Heading Options > Heading Level H6
    Styles Text > Text Color Color Brand Primary

    Select the Heading and configure these settings in the configuration side panel.
  1. Select element-text for the Heading fragment and configure these settings in the configuration side panel.

    Tab Setting Value
    Mapping Field Basic Information > ID
    Link Link Mapped URL
    Link Field Display Page > Default

    Configure these settings for the Heading fragment's element-text.
  1. Click Publish.

  2. Repeat these steps to update the Evaluations Overview page.

  3. Go to each page and ensure the buttons link to each entry’s display page.

This update provides convenient access to the display pages for individual applications and evaluations.

Conclusion

Great! You’ve implemented display pages for object entries. These pages provide detailed insights into each entry and streamline the evaluation and approval process. Next, you’ll review what you’ve learned before moving on to the next module.

  • Exercise: Creating the My Application Page

  • Exercise: Creating a Display Page for Application Entries

  • Exercise: Creating a Display Page for Evaluation Entries

  • Exercise: Linking to Object Entry Display Pages

  • Conclusion

Loading Knowledge

Capabilities

Product

Education

Contact Us

Connect

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