Loading Audio...

Listen to Lesson
0:00
  • Speed 0.5x
  • Speed 0.75x
  • Speed 1x
  • Speed 1.25x
  • Speed 1.5x
  • Speed 2x
  • Brian
  • Caris

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.

Implement Clarity’s distributor management app by creating a form for distributor applications.

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.

  1. Open the Global Menu (Global Menu) and click Clarity Public Enterprise Website.

  2. Open the Site Menu (Site Menu), expand Site Builder, and click Pages.

  3. In the Static Pages tab, click Actions (Action icon) for the Apply page and select Edit.

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

    This composition adds an empty form container to the page.

  5. For the form container, select Distributor Application.
    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.

  6. Click Save without selecting any fields.

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

    Select the Form Container fragment and configure the settings in the General Tab.
    This adds three dropzones that represent different steps for Clarity’s form. You can now add fields and other fragments to each dropzone.
     
  8. 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

      Drag and drop the fragment compositions into each dropzone.
      These compositions include most of the fields and fragments that Clarity needs. Though you’ll add a few missing fields manually.

  9. Select the Form Container and click Manage Form Fields in the side panel.
    Select the Form Container and click Manage Form Fields in the side panel.

  10. In the modal, check these fields:

    1. Annual Purchase Volume

    2. Business License

    3. Business Website URL
      In the modal, check the new fields.

  11. Click Save.
    The fields are added to the bottom of Step 1.
    Click Save and note that fields are added to the bottom of Step 1.
    Next, you’ll move them to their appropriate locations.

  12. Move Annual Purchase Volume above the Comments field in Step 1.
    Move Annual Purchase Volume above the Comments field in Step 1.

  13. Move Business Website URL below the Business Details Grid fragment in Step 2.
    Move Business Website URL below the Business Details Grid fragment in Step 2.

  14. Move Business License below the Business TAX ID Number in Step 3.
    Move Business License below the Business TAX ID Number in the Step 3 form step.
    Next, let’s take a look at the buttons that control how users move between steps.

  15. 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.
    Click the Step 1 - Next button and confirm that its Type is set to Next in the General tab.

  16. Drag and drop the Form Button fragment into the second module of the Other Details - Buttons grid.
    Drag and drop the Form Button fragment into the second module of the Other Details - Buttons grid.

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


    Select the Submit button and configure the settings in the Styles tab.

  18. Click Publish.
    Liferay displays a warning because the form does not include the mandatory applicationState 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.

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

  2. Go to the Display Page Templates tab.

  3. Click New and select Primary Master Page.

  4. For Name, enter Application Success.

  5. For Type, select Distributor Application.For Conetnt Type, select Distributor Application as Display Page Template

  6. Click Save.

  7. Drag and drop the Distributor Application Success Page composition into the page body. This includes a nearly complete design for Clarity’s success page.Drag and drop the Distributor Application Success Page composition into the page body.

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

  9. In the configuration side panel, map the text element to the object’s Business Name as the Field.In the configuration side panel, map the text element to the object’s Business Name as the Field.

  10. Click Publish. With the page template complete, you can use it for the International Distributor Application form you created in the previous exercise.

  11. Open the Site Menu (Site Menu), expand Site Builder, and click Pages.

  12. Begin editing the Apply page.

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

    Select the Distributor Application Form Container and configure the settings according to the values in the table
    ​​​​​​​
  14. 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

loading-knowledge-label