Adding Clay Components to Clarity’s Distributor Locator App

Consistent styling and functionality are essential for frontend applications. Liferay’s Clay streamlines development by offering a comprehensive library of UI components, including buttons and cards. To minify their code and ensure branding consistency, Clarity wants to refactor their Distributor Table custom element to replace the natively styled HTML table.

In this exercise, you’ll implement Clay components in the Distributor Table custom element.

Exercise: Implementing Clay in the Distributor Table

Clarity wants to use Clay’s Table and Button components within their Distributor Table custom element. Here, you’ll replace the table and button HTML elements with these components.

1. In your file explorer, go to the client-extensions/clarity-distributor-table-custom-element/ folder and open the DistributorTable.jsx file.

2. Below the existing import statements, add this:

   import ClayTable from '@clayui/table';
   import ClayButton from '@clayui/button';

   This imports Clay’s Table and Button components.

3. Scroll down to the return block.
   You’ll replace the component’s returned elements with Clay tags.

4. Replace the <table> and </table> tags with <ClayTable> and </ClayTable>, respectively.

5. Within <ClayTable>, replace the first set of <tr> and </tr> tags with <ClayTable.Head> and </ClayTable.Head>.

   

   The ClayTable.Head element serves as the starting point for the table’s header row.

6. Within the <ClayTable.Head> tags, insert an opening <ClayTable.Row> element below the <ClayTable.Head> tag and a closing </ClayTable.Row> above the closing </ClayTable.Head> tag.

   

   This creates a new Clay row for the table header.

7. Replace each <th> and </th> tag with <ClayTable.Cell headingCell> and </ClayTable.Cell>, respectively.

8. Above the {distributors.map((dist) => ( line, add an opening <ClayTable.Body> tag.
   This defines the Clay table’s body.

9. Above the </ClayTable> line, insert a closing </ClayTable.Body> tag.

   

10. Within the map function, replace the opening <tr> tag with <ClayTable.Row key={dist.id}> and the closing </tr> tag with the </ClayTable.Row> tag.
    This creates a Clay row for each distributor entry.

11. Replace each <td> and </td> tag with the <ClayTable.Cell> and </ClayTable.Cell> tags, respectively.

12. Find this <button> HTML element:

    <button onClick={() => handleSelect(dist)} > View Details </button>

13. Replace the entire element with this:

    <ClayButton 
         displayType="secondary"
         size='sm'
         onClick={() => handleSelect(dist)} 
    >
         View Details 
    </ClayButton>

    This defines a Clay button component with a secondary display style and small size.

14. Verify that the HTML elements were replaced with Clay components and ensure they’re correctly formatted.

    

15. Save and deploy the client extension to apply your changes to the Distributor Table custom element.

16. In your Liferay instance, go to the Distributor Details page and verify the new table styling.

    

Great! You’ve added Clay components to Clarity’s Distributor Table custom element. As you implement Clay in your projects, you’re creating reusable Clay components that you can leverage within other components and applications.

Conclusion

Liferay’s Clay component library empowers you to leverage reusable UI elements in your frontend applications. Furthermore, you can create and use custom Clay components for your specific needs. By using Clay’s library strategically, you can create uniform, engaging digital experiences.

Next, you’ll review what you’ve learned before moving on to the next module.