Introduction

When working with Salesforce Lightning Web Components (LWC), displaying related records dynamically can enhance the user experience. Standard related lists provide limited filtering options, and often, users require a more flexible approach to view records based on custom criteria. In this blog, we’ll explore how to create a dynamic Related List View in LWC, where Account records are categorized based on dropdown selections and displayed using a Lightning Data Table.

Why Use a Custom Related List View?

Salesforce’s out-of-the-box related lists are great, but they lack advanced filtering and categorization options. A custom LWC component can:

  • Group records dynamically based on criteria.
  • Offer a user-friendly dropdown to filter records dynamically.
  • Display records in a structured Lightning Data Table format for better readability and usability.

Building the LWC Component

1. First we need to build Apex class which will get the object related record in which we want to use this functionality. (Ex – Here we use case object)

Apex Class:

Dynamic Related List 1

2. We will create LWC component consists of an HTML template, JavaScript, and metadata which will display the records in UI.

HTML File:

Dynamic Related List 2Dynamic Related List 3

JavaScript File:

Dynamic Related List 4Dynamic Related List 5Dynamic Related List 6Dynamic Related List 7

MetaData File:

Dynamic Related List 8

3. Now we can deploy our LWC component and Apex class to the desired Salesforce org also we can create a separate tab to display the related list view.

Below is a demo video to show how it looks:

Conclusion:

By implementing a custom Related List View in LWC with section-based filtering using a Lightning Data Table, you can provide a better user experience for navigating related records. This approach allows users to dynamically filter records based on selected criteria without the need for multiple standard related lists. With slight modifications, you can expand this functionality to include additional filtering criteria, styling enhancements, or even inline editing. Try this out and take your Salesforce UI customization to the next level!

Stay curious, keep experimenting, and we’ll see you in the next blogs. Also, stay tuned with The Pinq Clouds available on AppExchange for insightful blogs and updates. Happy coding!