What is it all about?
A common complaint we hear from Lightning users is that when they update a particular object’s records, they have to do it individually. Sounds hectic, right? Of course it is! Luckily, there’s an easy solution with the inline edit functionality in the Lightning Datatable (AURA/LWC Component).
It’s helpful in many ways, and we are able to see the data in one place. Text, Number, Boolean, and Date data types are supported.
You can learn more about LWC DataTypes here.
Here are the steps you’ll need to follow in order to take advantage of this functionality.
- Create Lightning DataTable: We’ll first need to create a Lightning Datatable in which we fetch the details of multiple contacts in one place and represent them in the form of a table. Information is fetched using SOQL in Apex Class.
- While fetching the details into any method or variable, we must check for AuraEnabled. It must be true.
Fig:AuraEnabled for method
Fig : AuraEnabled for variables
Marking a method as storable, or cacheable, improves your component’s performance by quickly showing cached data from client-side storage without waiting for a server trip.
- Create a Subclass for declaring the attribute used in the Lightning datatable.
Fig: Code of subclass for declaring Attribute
Keep the following in mind:
- These attributes are Apex Class Driven to store them temporarily; datatable is a JS component. We need to establish a relationship between them.
- List has the capability to store these attributes and then pass them to the JS.
- First list objects store the value of fields. Another list object can be helpful by storing the first’s object and then passing it to the JS.
- Set Editable to true: If we are editing a single column or multiple columns, we need to apply this. Set editable to true for the column name(s) that you want to edit.
- In JS, use @wire to call the Apex method. This is a way to connect something or relate something to fetch the details from one place to another. It must be AuraEnabled(cacheable=true) inside Apex to fetch the data into js.
- Use handleSave()- This is used to save the data successfully. After this, it dispatches to the next step. When the user clicks outside the cell after updating the record, a datatable footer appears with a Cancel and Save button.
Fig : The handleSave Method.
- async keyword: The keyword async is used to make a function asynchronous. The use of the async keyword happens at the beginning of the function declaration.
- await Keyword: The await keyword used to wait for a Promise. It will ask the execution to wait until the defined task gets executed.
- ShowToastEvent(): This plays a very important role because after successfully saving the updated data, this method displays a success message. It is beneficial to show a message that lets us know about the updated record.
Fig : Represents ShowToastEvent() Method.
Fig: showing use of refreshApex and DraftValues Property.
- refreshApex(): This displays the fresh data into a datatable just like entering the new data and saving it. After refreshing the page, the updated data will appear.
- draftValues: The updated record is saved here.
- this.draft.Values=[]; – Clear all the draftValues in the datatable. To hide the datatable footer, clear the draftValues property.
Note: Datatable footbar is something that is important because after every new update, we need to save updates.
- If the data is not fetched correctly, or not able to refresh the data, it will go inside the catch method and show an error message.
Fig : Showing Catch method
Subscribe to our blog for more technical information and industry news.
