LWC: Reusable Related List View

📋 Reusable Related List View for Salesforce LWC

A fully configurable Lightning Web Component that renders Salesforce related lists with pagination, sorting, search, inline editing, CSV export, row actions, and record management.

📖 Project Overview

relatedListView is a production-ready Salesforce Lightning Web Component designed to display related records dynamically without writing custom code for each object relationship.

The component is fully configurable through Lightning App Builder and supports pagination, server-side sorting, searching, CSV export, row actions, bulk selection, inline editing, and New/Edit record management.

Administrators can configure object names, parent relationships, columns, page sizes, and actions directly from App Builder, making the component reusable across multiple Salesforce implementations.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Configurable Columns	JSON-driven column configuration with labels, types, sorting, and editing support.
Pagination	Supports 5, 10, 25, 50, and 100 record page sizes.
Server-Side Sorting	ORDER BY support with persistent sorting across pages.
Search	Debounced search filtering using SOQL LIKE queries.
Inline Editing	Edit records directly inside lightning-datatable.
Row Actions	View, Edit, Delete, and custom row actions.
CSV Export	Export visible records to CSV format.
Bulk Selection	Checkbox selection with event-based record handling.
New/Edit Modal	Record creation and editing using lightning-record-edit-form.

🏗 Architecture

App Builder / Parent Component
            │
            ▼
     relatedListView
            │
 ┌──────────┼──────────┐
 │          │          │
 ▼          ▼          ▼
Header   Datatable  Pagination
Actions   Search     Controls
 │          │          │
 └──────┬───┴──────┬───┘
        ▼          ▼
  Record Modal  Delete Modal
        │
        ▼
RelatedListController.cls
        │
 ┌──────┴─────────────┐
 │                    │
 ▼                    ▼
getRelatedRecords()  getTotalCount()
        │
        ▼
 Dynamic SOQL Queries

📁 Project Structure

force-app
└── main
    └── default
        ├── classes
        │   ├── RelatedListController.cls
        │   └── RelatedListControllerTest.cls
        │
        └── lwc
            └── relatedListView
                ├── relatedListView.html
                ├── relatedListView.js
                ├── relatedListView.css
                └── relatedListView.js-meta.xml

README.md

⚙️ Lightning App Builder Configuration

Property	Purpose
Object API Name	Target child object.
Parent Field API Name	Lookup relationship field.
Columns JSON	Dynamic datatable configuration.
Page Size	Records per page.
Enable Selection	Show row selection checkboxes.

🧩 Column Configuration Example

[
  {
    "label": "Contact Name",
    "fieldName": "Name",
    "type": "text",
    "sortable": true
  },
  {
    "label": "Email",
    "fieldName": "Email",
    "type": "email"
  },
  {
    "label": "Phone",
    "fieldName": "Phone",
    "type": "phone"
  }
]

💻 Component Usage Example

<c-related-list-view
    record-id={recordId}
    object-api-name="Contact"
    parent-field-api-name="AccountId"
    page-size="25"
    columns-json={columnConfig}>
</c-related-list-view>

🔍 Supported User Actions

• View Record
• Edit Record
• Delete Record
• Create New Record
• Refresh Data
• Search Records
• Export CSV
• Select Multiple Rows
• Inline Save

📤 CSV Export

The component can export currently visible records to CSV format while respecting configured columns and applied filters.

Header Actions
    │
    ▼
Export CSV
    │
    ▼
Generate Blob
    │
    ▼
Download File

🔒 Security Considerations

• Uses with sharing Apex classes.
• Supports Salesforce CRUD permissions.
• Supports Field-Level Security.
• Dynamic SOQL validation implemented.
• Safe handling of configurable properties.

🧪 Testing

• RelatedListControllerTest.cls included.
• Pagination testing.
• Sorting validation.
• Search functionality verification.
• CRUD operation testing.

🚀 Deployment

sf org login web -a myOrg

sf project deploy start \
--source-dir force-app \
-o myOrg

🎯 Benefits

• Eliminates custom related list development.
• Highly reusable across multiple objects.
• Admin-friendly configuration.
• Modern Lightning user experience.
• Improves productivity and maintainability.
• Enterprise-ready architecture.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The LWC Related List View component provides a complete replacement for traditional Salesforce related lists with advanced features such as search, pagination, inline editing, CSV export, row actions, and configurable columns. Its metadata-driven design makes it an ideal reusable solution for enterprise Salesforce applications.