Loading Audio...
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.
Exercise: Creating the Distributor Application Form
Here you’ll create the International Distributor Application form for potential distributors to fill out.
-
Open the Global Menu (
) and click Clarity Public Enterprise Website.
-
Open the Site Menu (
), expand Site Builder, and click Pages.
-
In the Static Pages tab, click Actions (
) for the Apply page and select Edit.
-
Drag and drop the International Distributor Application Page fragment composition into the page body.
This composition adds an empty form container to the page.
-
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.
-
Select the Form Container fragment and configure these settings in the General Tab.
Setting Value Form Type Multistep Number of Steps 3 Display All Steps in Edit Mode Checked
This adds three dropzones that represent different steps for Clarity’s form. You can now add fields and other fragments to each dropzone.
-
Drag and drop these fragment compositions into each dropzone:
-
Step 1: General Details Container | Distributor Application Form
-
Step 2: Business Details Container | Distributor Application Form
-
Step 3: Additional Details Container | Distributor Application Form
These compositions include most of the fields and fragments that Clarity needs. Though you’ll add a few missing fields manually.
-
-
Select the Form Container and click Manage Form Fields in the side panel.
-
In the modal, check these fields:
-
Annual Purchase Volume
-
Business License
-
Business Website URL
-
-
Click Save.
The fields are added to the bottom of Step 1.
Next, you’ll move them to their appropriate locations. -
Move Annual Purchase Volume above the Comments field in Step 1.
-
Move Business Website URL below the Business Details Grid fragment in Step 2.
-
Move Business License below the Business TAX ID Number in Step 3.
Next, let’s take a look at the buttons that control how users move between steps. -
Click the Step 1 - Next button and confirm that its Type is set to Next in the General tab. This ensures the button leads to the second step.
-
Drag and drop the Form Button fragment into the second module of the Other Details - Buttons grid.
-
Select the Submit button and configure these settings in the Styles tab:
Key Value Padding Top Spacer 4 Padding Bottom Spacer 4 Text Alignment Center
-
Click Publish.
Liferay displays a warning because the form does not include the mandatoryapplicationState
field. You can safely ignore this warning and proceed.
The updated Apply page is now live. Authenticated users can access it to submit a distributor 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 as the 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.
Up Next: Displaying Lists of Object Entries in Site Pages
Capabilities
Product
Education
Contact Us