Building Clarity’s Distributor Application Form
In the previous article, you explored how you can use form fragments to create engaging and user-friendly object experiences. Here, you'll continue implementing Clarity’s distributor management app by creating a form for distributor applications. This includes designing a submission success page.
Before diving into the exercises, you’ll prepare the resources you’ll use throughout this module’s exercises.
Preparing Exercise Resources
Preparing your exercise resources involves retrieving the Distributor Application object's ID, updating the provided fragment compositions with this ID, and importing the updated compositions into their respective fragment sets. You’ll then use these files throughout the following exercises.
Retrieving the Object IDs
-
Open the Global Menu (
), go to the Control Panel tab, and click Objects. -
Go to the Distributor Management folder and begin editing Distributor Application.
-
Copy the Distributor Application object’s ID for use in a later step.
-
Go to the Distributor Management folder and begin editing Application Evaluation.
-
Copy the Application Evaluation object’s ID for use in a later step.
-
You’ll use these IDs to update the provided compositions.
Updating the Fragment Compositions
-
Open your file explorer and navigate to the
exercises/module-6/
folder in the course workspace.
It should contain these items: -
Navigate to the
page-composition-apply/international-distributor-application-page/
folder and open thefragment-composition-definition.json
file in a text editor. -
Locate the
formReference
property and update theclassName
value with the Distributor Application ID. -
Save the file.
-
Return to the
exercises/module-6/
folder and compress thepage-composition-apply
folder into a zip archive. -
Navigate to the
display-composition-application-evaluation/distributor-application-evaluation-display/
folder and open thefragment-composition-definition.json
file in a text editor. -
Locate the
formReference
property and update theclassName
value with the Application Evaluation ID. -
Save the file.
-
Return to the
exercises/module-6/
folder and compress thedisplay-composition-application-evaluation
folder into a zip archive.
With the zip archives ready, you can import them into Clarity’s public enterprise website.
Importing the Fragment Compositions
-
In your browser, go to the Clarity Public Enterprise Website.
-
Open the Site Menu (
), expand Design, and click Fragments. -
Under Fragment Sets, click Clarity Page Compositions.
-
Click Actions (
) for the fragment set and select Import.
-
Click Select File and navigate to the
exercises/module-6/
folder in the course workspace. -
Select
page-composition-apply.zip
and click Import. -
After the import succeeds, click Done.
This adds the International Distributor Application Page composition to the current fragment set. -
Repeat the above steps to import the remaining page composition zip files:
-
page-composition-applications-overview.zip
-
page-composition-apply-success-page.zip
-
page-composition-evaluations-overview.zip
-
-
Under Fragment Sets, click Clarity Display Compositions.
-
Repeat steps 4-7 to import the
display-composition-application-evaluation.zip
file.
Great! Your environment is ready for this module’s exercises.
Exercise: Creating the Distributor Application Form
Here you’ll create the International Distributor Application form to be filled out by potential distributors.
-
Open the Site Menu(
) for the Clarity Public Enterprise Website, expand Site Builder, and click Pages. -
In the Static Pages tab, click Actions (
) for the Apply page and select Edit. -
Drag and drop a Form Container into the page body.
-
Click the drop-down menu and select the Distributor Application object.
This populates the form with fields from the object automatically.
-
Try rearranging the auto-populated fields and exploring their configuration options.
Next, you’ll use a pre-configured fragment composition to accelerate form design. -
Delete the existing form container.
-
Drag and drop the International Distributor Application Page fragment composition into the page body.
This composition adds a form container that is already mapped, styled, and arranged according to Clarity’s designs.
-
Select the Products of Interest picklist and configure this setting in the configuration side panel:
Tab Setting Value General Multiselect Options > Mark as Required Yes
-
Select the Distribution Regions picklist field and configure this setting in the configuration side panel:
Tab Setting Value General Multiselect Options > Number of Options 3
-
Click Publish.
Liferay displays a warning because the form does not include the mandatoryapplicationState
field. You can safely ignore this warning and proceed. -
Click Publish again to proceed.
This publishes the updated Apply page with the embedded International Distributor Application form. All authenticated users can now use it to submit an application.
Exercise: Creating the Submission Success Page
Now that you've built the Distributor Application form, Clarity wants to further customize the application process with a custom success page. This page should provide applicants with clear confirmation that their application has been received successfully. Here you’ll implement this page.
-
Open the Site Menu (
), expand Design, and click Page Templates -
Go to the Display Page Templates tab.
-
Click New and select Primary Master Page.
-
For Name, enter
Application Success
. -
For Type, select Distributor Application.
-
Click Save.
-
Drag and drop the Distributor Application Success Page composition into the page body.
This includes a nearly complete design for Clarity’s success page. -
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.
-
Click Publish.
With the page template complete, you can use it for the International Distributor Application form you created in the previous exercise. -
Open the Site Menu (
), expand Site Builder, and click Pages. -
Begin editing the Apply page.
-
Select the Distributor Application Form Container and configure these settings:
Tab Setting Value General Actions After Submit > Success Action Go to Entry Display Page General Actions After Submit > Display Page Application Success
-
Click Publish, then click Publish again to proceed.
Now when users click submit, Liferay submits the entry and directs the user to a separate success page. Take some time to test it out and verify the form behaves as expected.
Conclusion
Great! You’ve created Clarity’s distributor application form using objects and form fragments. Together, these features empower you to create engaging, seamless, and user-friendly experiences for creating object entries. Next, you’ll learn how you can use page builder features to display lists of object entries.
Capabilities
Product
Education
Contact Us