+ Start a Discussion
louisa barrett 7louisa barrett 7 

Aura datatable to show error messages on inline edit

Hi All,

I am fairly new to lightning components and am struggling to get a datatbale to show any server side errors. I have looked at the documentation (Salesforce Documention (https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInlineEdit) )and tried to implement it to my scenario but cannot get it to work.
This is my code:

Component:
<aura:component controller="BuildUpChecklistController" implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId">
	<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler event="force:refreshView" action="{!c.doInit}"/>
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="errors" type="Object" default="[]"/>
    <aura:attribute name="draftValues" type="Object" default="[]"/>
    <aura:attribute name="listSize" type="Integer" default="0"/>
    
    <!--User List Table-->
    <div class="slds-m-top--none slds-box slds-theme_default" >
        <div class="slds-align_absolute--left">
            <div class="slds-text-heading_small slds-text-color_default">       
                Update build notes and on site fields
                <lightning:helptext content="Help!"/>
            </div>
        </div>
        <lightning:datatable data="{! v.mydata }" 
                             columns="{! v.mycolumns }"
                             showRowNumberColumn= "true"
                             wrapTextMaxLines="3"
                             keyField="Id" 
                             errors="{!v.errors}"
                             draftValues="{!v.draftValues}"
                             onsave="{!c.handleSaveEdition}"/>
    </div>
</aura:component>

Controller:
handleSaveEdition: function (component, event, helper) {
        var draftValues = event.getParam('draftValues');
        var action = component.get("c.updateOLIs");
        action.setParams({"OLIs" : draftValues});
        action.setCallback(this, function(result){
            var state = result.getState();
            if(state === "SUCCESS"){
                    component.set("v.errors", []);
                    component.set("v.draftValues", []);
                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                        "title": "Success",
                        "message": "The opportunity line items have been updated",
                        "type" : "success"
                    });
                    toastEvent.fire();
                    $A.get('e.force:refreshView').fire();
                //}              
            } else if(state === "ERROR"){
               //I don't know what to use here to display any server side errors 
               //on the relevant rows of the datatable
               //
            } else if (status === "INCOMPLETE"){
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Error!",
                    "message": "'No response from server or client'",
                    "type" : "error"
                });
                toastEvent.fire();
                $A.get('e.force:refreshView').fire();
            }
        });
        $A.enqueueAction(action);
    },

Apex Controller:
(I'm not doing any validation in this method at the moment, but I will)
 
@AuraEnabled
    public static void updateOLIs(List<OpportunityLineItem> OLIs)
    {
        update OLIs;
    }

Any help would be much appreciated,
Thank you​​​​​​​
ShirishaShirisha (Salesforce Developers) 
Hi Liousa,

Greetings!

Have you gone through the below thread which helps you in implementing the custom validation error for inline editing:

https://salesforce.stackexchange.com/questions/160160/show-custom-error-on-lightninginput

Please mark it as best answer if it helps you to fix the issue.

Thank you!

Regards,
Shirisha Pathuri
Malika Pathak 9Malika Pathak 9
Hi Liousa,

Greetings!

Inline editing in lightning:datatable in Salesforce Lightning Component

https://www.infallibletechie.com/2018/11/inline-editing-in-lightningdatatable-in.html

Please mark it as best answer if it helps you to fix the issue.

Thank you!


 
louisa barrett 7louisa barrett 7
Hi,

Thank you both for replying, unfotunately neither link has helped. The Infallible Techie link does not utilise the errors attribute and the Stack Exchange link is validating on the client side, not displaying the errors from a server side call. I've tried to adapt that method to mine with still no success. 
I am still stuck on where and how I set the 'v.errors' attribute and how do I display the error on the correct row of the data table.
I've tried setting it using the result.getError but that doesn't work. The result.getError has the correct array count and I can see the error message, but I cannot access it.
 
else if(state === "ERROR"){
                //I don't know what to use here to display any server side errors 
                //on the relevant rows of the datatable  
                component.set("v.errors", result.getError());
                var myErrors = event.getParam('errors');
                console.log('My errors');
                console.log(myErrors);
                console.log(result.getError());

Console output:

User-added image

Many thanks