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.
-
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 element-text for the Mapped Business Name fragment.
-
In the configuration side panel, map the text element to the object’s Business Name field.
-
Select the Application Details Grid element, click Actions (
) for it, and select Duplicate.
Alternatively, you can press CTRL + D / Command + D to duplicate the fragment. -
Select the duplicate and configure this setting in the configuration side panel:
Tab Setting Value General Grid Options > Number of Modules 2
-
Double click the duplicate Application ID fragment to edit its text and enter
Application State:
.
-
Select element-text for the duplicate fragment and map it to the 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 and click New.
-
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.
-
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 and click New.
-
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 Distributor Application Evaluation Display fragment composition into the page body.
-
Select element-text for the Mapped Evaluation ID Heading fragment.
-
In the configuration side panel, map it to the ID field.
-
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.
-
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.
-
Double click the Submit button and change its text to
Save
. -
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
-
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.
Capabilities
Product
Education
Contact Us