Related List with Inline Edit | Lightning Component Salesforce

Hey Users,

Sometimes it is painful if you have to edit multiple child records and you have to open each record and update them. This component will make Related List with Inline Edit support. You can edit multiple rows and save them instantly. Also, if any error will occur, it will be visible instantly as Toast Message.

This component supports multiple salesforce datatypes and all necessary validations are already present. Pros and cons of the component are-

  • Single Unit Component
  • Major Exceptions Already Handled.
  • Inline Edit based on field permission. If no permission, no Inline Edit.
  • Auto Scroll-bar if more than 5 Child Records are present.
  • Supports major SF datatypes like Text, Textarea, Picklist, Number, Percent, Currency, Date, Time, DateTime, Checkbox, etc.
  • Lookup, Rich Text Area, Geo-Location are yet in view mode only.

Demo GIF:

related list with inline edit lightning salesforce gif

Also Check, Multi-Select Lookup Lightning Component


Step-1: Create an Apex controller

Our apex controller will have all the necessary Validations. Apex class will fetch the child records and save the records. Here we are using a wrapper class to pass data to the lightning component. Go to Dev. console > File > New > Apex Class.

We need to create an Exception class first to throw the custom exception.

Create MyException.cls Apex class.


Create AdvancedRelatedListController.cls Apex class and paste the below code.


Step-2: Create the AdvancedRelatedList Lightning Component.

For creating a new Lightning Component, go to dev. console > File > New > Lightning Component.

Now open the AdvancedRelatedList.cmp file and paste the below code.


Now open the controller file AdvancedRelatedListController.js and paste the below code.


Open the helper file AdvancedRelatedListHelper.js and paste the below code.


Open the helper file and paste the below code.


Now finally paste the CSS in the AdvancedRelatedList.css file.


Step-3: Now we will add the component on the record page.

Our component is ready to use. Let’s put it on the Record Detail Page. Go to your record > Click on setting Gear on top > Edit Page.

On the Lightning App Builder in the Left Pane, find Advanced Related List and drop it on the record page. Now you need to set the Header, Object API name, Fields API Name List, Icon Name, and check the checkbox if you want the Inline Edit button.

You can check the list of available icons here LDS Icons.

Add Advanced Related List to Lightning Page

Hurray… All Set… Now Save and Activate the Page from the top and click on the back Icon. Your Related List component is visible now.

Advanced Related List with Inline Edit Lightning Salesforce

Also Check:

For any queries or suggestions/queries, comment below.

Cheers … Happy Coding … 🙂

Notify of
Inline Feedbacks
View all comments

Hi, I am getting a compile error when saving the apex class: Invalid type: MyException. Can you please provide some guidance on how to resolve this?


absolutely great and exactly what i need. however, i have no idea what the test class for the controller should look like. can you help here?


Any chance you have the test class ready to go?


Any chance you’ve converted this to a Lightning Web Component?


Thanks for sharing! Test class and eventually an LWC would be awesome! Looking forward to building this out and testing.


Hi, do you have the LWC version of the related list yet by any chance? We are running around looking for a solution for a relatedlist with inline editing and lookup fields.


This is awesome, Is it possible to show more than 5 rows and can you sort a column ?


Many thanks for the quick answer !


Hi Suyash, this is awesome, but I need a test class to deploy ? Do you have the code for it ?


Ok great I really want to deploy soon

John Doe

Anyway to get this to work with AccountContactRelation object? Trying to display any related contact while being able to edit.

Thank you!

Gretchen M. Goulet


I’m wondering if you could quote for me how much you would charge to….

  1. Complete the test Class and
  2. Alter this such that the Name renders as a link to the record like other standard related lists.

I’ve been looking for something like this for awhile to replace some old Visualforce written to allow inline editing. Any chance you’ve written a test class for this yet that you would be willing to share?


I wrote one that gives me 88% coverage. It isn’t the prettiest thing but I’m happy to share if someone needs it.

Julianne Boley

private class test_AdvancedRelatedListController {
 static void setup() 
 Account acct = new Account();
    acct.Name = ‘Integra’;
    acct.Industry = ‘Technology’;
    acct.NumberOfEmployees = 13;
    acct.AccountSource = ‘Trade Show’;
 insert acct;
 Contact cont = new Contact();
    cont.FirstName = ‘Julianne’;
    cont.LastName = ‘Boley’;
    cont.MailingCity =’Baltimore’;
    cont.AccountId = acct.Id;
 insert cont;
 static void test(){
    Account acct = [Select Name, Industry, Id from Account limit 1];
    AdvancedRelatedListController.ReturnWrapper rwt = AdvancedRelatedListController.fetchRecords(Acct.Id, ‘Account’, ‘name, industry’, ‘true’);
    AdvancedRelatedListController.ReturnWrapper rwf = AdvancedRelatedListController.fetchRecords(Acct.Id, ‘Account’, ‘name, industry’, ‘false’);
    string recorddata = ‘{“Id”:”0016100000auBkxAAE”,”Name”:”Test Account”,”NumberOfEmployees”:”13″,”AccountSource”:”Web”,”CCM_Start_Date__c”:”2017-03-01″,”Total_Outstanding__c”:”13.20″,”MAQuality__c”:””,”Description”:”test”,”AnnualRevenue”:”18.00″}’;
   static void test2(){
    Account acct = [Select Name, Industry, Id from Account limit 1];
    AdvancedRelatedListController.ReturnWrapper rwerr = AdvancedRelatedListController.fetchRecords(Acct.Id, ‘Account’, ‘name, industry, nonfield__c’, ‘true’);
    string recorddata = ‘{“Id”:”0016100000auBkxAAE”,”Name”:”Test Account”,”NumberOfEmployees”:”13″,”AccountSource”:”Web”,”CCM_Start_Date__c”:”2017-03-01″,”Total_Outstanding__c”:”13.20″,”MAQuality__c”:””,”Description”:”test”,”AnnualRevenue”:”18.00″}’; 
   static void test3(){
    Account acct = [Select Name, Industry, Id from Account limit 1];
    AdvancedRelatedListController.ReturnWrapper rwerr = AdvancedRelatedListController.fetchRecords(Acct.Id, ‘Account’, ‘name, industry’, ‘true’);


Last edited 17 days ago by Julianne Boley

Hi Juli,

Can you please share the test class that you have written with me?

Thank you

Pavan B


I am trying to add a hyperlink in the data table so it is easy to navigate to the contact record page currently this component displaying all fields as text fields. Any idea on this


Hi Suyash,

This is working great for me. Thank you for this. It would be great if there was a test class for this. Can you also please provide the test class for this code?

Thank you

Lee Gregory

Here is a basic account/opp test class, hopefully this helps someone out there struggling to get it going. Replace with your own specific custom fields if you need to increase code coverage.

Pavan B

Hi Suyash,

Quick Question – in this component default all fields showing editable fields is it possible to change selected fields as non – editable fields on component UI? I made a couple of fields as read-only in profile level still I am able to edit those fields save records from component any thoughts on this.


Pavan B

Hi Suyash

Thanks for your quick update. I am trying to add a lock on fields to a specific profile. I have shown it in the attached image is there any way to do this?