Recently, while answering on developer forums. I came across a question where someone asked about a lightning component to display records in the table using a fieldset. I tried to put my effort to create a generic lightning component which can be used with any object and a fieldset.
After the release of new components like Lightning:RecordEditForm, this has become so easier. You can check the following blog post where I have used the page-layout to get the list of fields but you can still go with the fieldset approach.
This component can be used to display child records or all the records of an object. See below component code.
As you can see in the above component we have 4 attributes. These attributes can control the behaviour of the component. sObjectName : Name of the object which you want to query records from. (Required) fieldSetName: Name of the fieldset which will be used for the columns in the table. (Required) parentFieldName: If you want to display only child records of a parent then this should be specified. (Optional) parentRecordId: Parent record Id if you are displaying child records of a parent. (Optional) LightningTable is a parent component which is working as a table wrapper. This parent component is using a LightningCell component to display each cell of the row based on the data type. You can add more data types into the code as per your requirement. I am providing you all the code related to these components so you can update it as per your business use case. Fieldset is used to add/remove columns dynamically to the table.
LightningTable component
LightningTableController [APEX Class]
LightningTableController.js
LightningTableHelper.js
I have created one more component to use fieldset while displaying columns. As you know, we can not reference fields dynamically in the component so I used Javascript to get the value and update the view.
LightningCell Component
LightningCellController.js
LightningCellHelper.js
Reference/lookup fields are handled explicitly in the above code as they can be included as a field in any fieldset. I tried to make it as much as dynamic.
I am certified Salesforce Developer with Sales and Service cloud certifications. I am a true believer in #GivingBack principle and a Salesforce enthusiast. I am working as a member of our #SalesforceOhana to learn and help other fellow Trailblazers of the community to grow and learn.
“I’m a true believer in karma. You get what you give, whether it’s bad or good.”
Hi Sharma,
Great post..!! you saved my day…
Thanks,
Kamal.
Hi Naval,
Thank you for sharing your code.
I am trying to make it work for specific record but I am not able to achieve.
Please, help asap.
It’s bit urgent!!!
thanks and regards
PV Singh
It should work without any issue. What kind of issue are you having right now?
Hi Naval,
I have an issue with the child component. “record” variable is getting Proxy{} value instead of sObject. Probably the reason is LockerService which was enabled to all API versons > 40.0. What can we do continue to use this solution?
Hi Jenny,
This is a normal behavior due to LockerService which filters the objects created by lightning component.
You can learn more about that here –
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_proxy.htm
Hi Sharma,
There is datatable, Can u please provide a code which will fetch data from JSON file and show data in table dynamically.
without apex class, Create JSON file with dummy data, save it in static resource, call directly that JSON file in javascript controller
Hi Bharathi,
I am not sure what exactly you are looking for. Is your database resides in the Salesforce or it’s outside of the Salesforce.
However, you can not access the body of the JSON file in the javascript controller. You will have to query that static resource record through apex and then can use whatever inside in the body.
hi i got this error in this code ….
This page has an error. You might just need to refresh it. Error in $A.getCallback() [JSON.parse: expected ‘,’ or ‘]’ after array element at line 1 column 4 of the JSON data] Callback failed: apex://LightningTableController/ACTION$getFieldSet Failing descriptor: {c:LightningTable}
Looks like your JSON is not correct. Make sure your apex method is returning a valid JSON string.
HI,
I am getting the following error
This page has an error. You might just need to refresh it. Error in $A.getCallback() [JSON.parse: expected ‘,’ or ‘]’ after array element at line 1 column 4 of the JSON data] Callback failed: apex://LightningTableController/ACTION$getFieldSet Failing descriptor: {c:LightningTable}
Looks like your JSON is not correct. Make sure your apex method is returning a valid JSON string.