📋 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.
✨ 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.
📌 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.
