Listen to Lesson

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.

Select the Collection Display fragment and click Select Collection () in the configuration side panel.

Go to the Collection Providers tab and select 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.
Begin editing the My Application page.
Drag and drop a Distributor Application Success Page composition 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.
Select element-text for the Application State element and map it to the object’s Application State field.
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.

Open the Site Menu (), expand Design, and click Page Templates.
Go to the Display Page Templates tab, click New, and select Display Page Template.
Select the Primary Master Page template.
Enter Distributor Application Display for the name and select Distributor Application for content type.
Click Save.
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.

For the form container, select Distributor Application.
A modal appears prompting you to select which fields to include in the form. However, you’ll use fragment compositions to accelerate form design.
Click Save without selecting any fields.
Drag and drop the Complete Form | Distributor Application Form fragment composition into the page body.
Drag and drop a Select fragment at the bottom of the General Details Container under Comments.
Select the fragment and map it to the Application State field.

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

Double click the Submit button and change its text to Save.
Click Publish.
Click 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.

Open the Site Menu (), expand Design, and click Page Templates.
Go to the Display Page Templates tab, click New, and select Display Page Template.
Select the Primary Master Page template.
Enter Application Evaluation Display for the name and select Application Evaluation for content type.
Click Save.
Drag and drop the Display Composition Application Evaluation fragment composition into the page body.
Select element-text for the Mapped Evaluation ID Heading fragment and map it to the ID field in the configuration side panel.
In the Applicant Details Grid, select the Mapped Applicant Name element-text.
In the side panel, set Source to Relationship.
Choose Distributor Application as the Relationship. This represents the Application to Evaluation relationship.
Select Applicant Name as the Field.

Repeat the previous four steps for the Business Name and Business Website URL fields.

Fragment Name	Mapped Field Configuration
Mapped Business Name	Relationship > Distributor Application > Business Name
Mapped Business Website URL	Relationship > Distributor Application > Business Website URL

These mappings access data from the related Distributor Application object through the Application to Evaluation relationship.

Select the Application Evaluation Form Container and map it to the Application Evaluation object. A modal appears prompting you to select fields to add automatically.

Click Save. You’ll use some fragments arranged according to Clarity’s designs.
Drag and drop the Application Evaluation - Form Elements Container fragment composition into the drop zone of the form container.
Click Publish.
Click 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.

Begin editing the Applications Overview page.
Replace the ID paragraph element in the first column with a Heading fragment.
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

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

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

Click Publish.
Repeat these steps to update the Evaluations Overview page.
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.

Next Up: Knowledge Check