Motivation behind this
I have been looking for building configurable Related list component using Field Set and Lightning Web Component. Earlier I have written blog on Describe Objects and Retrieve Records using Salesforce Lightning Web Components flavored with Dynamic Datatable.
Now, I want to move it one step further using field set. This approach will help many developers to quickly develop and leverage this concepts.
Here is a justification why it is needed to build.
Business has requirement to view the Record detail page as well as its Related list. User has edit and delete permissions to the related list's objects. But business wants that user will be not see any options to edit or delete records from the related list.
For example, Case related list is available under Account or Contact record. User has a permission to edit or delete on Case object but those records only be available for view purpose. User will not able to see Edit/Delete option.
Only option is to built this component as read-only viewing purpose.
This requirement is applicable for similar use cases like this, so it will be better to create a configurable component using Field Set.
Fields from the Field Set will be displayed as columns and records based on those fields will be displayed as rows.
Possible End Result
After building the use case, it will look like this:
Refer this video for three step solutions:
For an example purpose, I have tried to build Case object as Related List.
Create a Field Set on Case Object and add necessary fields on the layout. For example name is CaseRelatedListFS
Build a LWC Component which will take following configurable attributes:
- Related Object API Name - Here it is Case
- Field Set Name - The name of field set defined on the Object whose fields will be displayed as table columns. Here it is CaseRelatedListFS
- Reference API Name - It is the field based on which query to be fired. Here, it is ContactId, as Case related list will be placed on Contact Record Page.
- First Column As RecordHyperlink - It will take Yes/No. For example, if we define CaseNumber as first column and if we choose Yes option then Case Number will be shown as hyperlink and clicking on that link, it will be navigated to Case Detail page. If we choose No then, it will be same for other columns.
Let's see this lwcFieldSetComponent.js-meta.xml where those parameters can be configured as targetConfig property.
Approach has been taken following way:
- Create a LWC component adding a lightning-datatable which will be populated on load.
- In the connectedCallback method of js it will fetch fields and records from the database
- Finally display those in the datatable.
Few important points to refer here:
Never define an attribute as objectApiName as it is reserved, that's why I have used SFDCobjectApiName, otherwise, it will always take current object.
When we pull entries from a Map which has been stored in Apex class, the index is inversed. For example, I have first stored FIELD_LIST and then RECORD_LIST in the Map. Now, the index of keys will be 1 for FIELD_LIST and 0 from RECORD_LIST.
Extra coding to handle hyperlink record navigation in the first column.
Rest of the comments in the code is self-explanatory.
Few notable points on this getFieldsAndRecords method:
- Getting the instance of SObject based on strObjectApiName, the reflection has been used which is way more faster that globalDescribe.
- Use of Schema.FieldSetMember to get the fields from Field Set. Refer Documentation
- getFieldPath() of FieldSetMember gives the fieldAPI which has been used to build SOQL query
After building the component, place it on Record Page through App Builder and define attribute values.
You can see that component is displaying fields and records.
This concept can be leveraged easily at any project. The component can be improvised more like, handling events, based on Salesforce field type Datatable column types can be defined, it could be good to incorporate paginations etc, but it is a good start.