Mastering Data Modeling with Liferay Objects

Course Overview

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.

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

  1. Open the Global Menu (Global Menu), go to the Control Panel tab, and click Objects.

  2. Go to the Distributor Management folder and begin editing Distributor Application.

  3. Copy the Distributor Application object’s ID for use in a later step.Copy the Distributor Application object’s ID for use in a later step.

  4. Go to the Distributor Management folder and begin editing Application Evaluation.

  5. Copy the Application Evaluation object’s ID for use in a later step.Copy the Application Evaluation object’s ID for use in a later step.

  6. You’ll use these IDs to update the provided compositions.

Updating the Fragment Compositions

  1. Open your file explorer and navigate to the exercises/module-6/ folder in the course workspace.
    It should contain these items:Open your file explorer and navigate to the exercises/module-6/ folder in the course workspace.

  2. Navigate to the page-composition-apply/international-distributor-application-page/ folder and open the fragment-composition-definition.json file in a text editor.

  3. Locate the formReference property and update the className value with the Distributor Application ID.

    [...]
    "formConfig": {
       "formReference": {
          "className": "com.liferay.object.model.ObjectDefinition#[Distributor_Application_ID]",
    [...]
  4. Save the file.

  5. Return to the exercises/module-6/ folder and compress the page-composition-apply folder into a zip archive.

    zip -r page-composition-apply.zip page-composition-apply
  6. Navigate to the display-composition-application-evaluation/distributor-application-evaluation-display/ folder and open the fragment-composition-definition.json file in a text editor.

  7. Locate the formReference property and update the className value with the Application Evaluation ID.

    [...]
    "formConfig": {
       "formReference": {
          "className": "com.liferay.object.model.ObjectDefinition#[Application_Evaluation_ID]",
    [...]
  8. Save the file.

  9. Return to the exercises/module-6/ folder and compress the display-composition-application-evaluation folder into a zip archive.

    zip -r display-composition-application-evaluation.zip display-composition-application-evaluation

With the zip archives ready, you can import them into Clarity’s public enterprise website.

Importing the Fragment Compositions

  1. In your browser, go to the Clarity Public Enterprise Website.

  2. Open the Site Menu (Site Menu), expand Design, and click Fragments.

  3. Under Fragment Sets, click Clarity Page Compositions.

  4. Click Actions (Action icon) for the fragment set and select Import.
    ​ Click Actions for the fragment set and select Import.  ​

  5. Click Select File and navigate to the exercises/module-6/ folder in the course workspace.

  6. Select page-composition-apply.zip and click Import.

  7. After the import succeeds, click Done.

    This adds the International Distributor Application Page composition to the current fragment set.

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

  9. Under Fragment Sets, click Clarity Display Compositions.

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

  1. Open the Site Menu(Site Menu) for the Clarity Public Enterprise Website, expand Site Builder, and click Pages.

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

  3. Drag and drop a Form Container into the page body.

  4. Click the drop-down menu and select the Distributor Application object.

    This populates the form with fields from the object automatically.
    Click the drop-down menu and select the Distributor Application object.

  5. Try rearranging the auto-populated fields and exploring their configuration options.

    Next, you’ll use a pre-configured fragment composition to accelerate form design.

  6. Delete the existing form container.

  7. 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 a form container that is already mapped, styled, and arranged according to Clarity’s designs.
    This composition adds a form container that is already mapped, styled, and arranged according to Clarity’s designs.

  8. 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 Products of Interest picklist and configure settings in the configuration side panel.

     

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


    Select the Distribution Regions picklist field and configure the setting in the configuration side panel.

  10. Click Publish.

    Liferay displays a warning because the form does not include the mandatory applicationState field. You can safely ignore this warning and proceed.

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

  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 Type, select Distributor Application.

  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 field.
    In the configuration side panel, map the text element to the object’s Business Name 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.
     
  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.

  • Preparing Exercise Resources

  • Exercise: Creating the Distributor Application Form

  • Exercise: Creating the Submission Success Page

  • Conclusion

Loading Knowledge

Capabilities

Product

Education

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy