0

I'm trying to create a datatable with some features like the inline edit. I've followed the documentation for creating this table, but the "handleSave" action is not working. Here's my code:

Component:

<aura:component description="Manage Task" controller="ManageTaskController"
            implements="flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,lightning:isUrlAddressable,lightning:hasPageReference,force:hasRecordId">
<!-- UI Controlling Attributes -->
<aura:attribute access="private" name="showErrorMessage" type="Boolean" default="false"/>
<aura:attribute name="isModalDisplayed" type="Boolean" default="false"/>
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="data" type="Object"/>
<aura:attribute name="draftValues" type="Object" default="[]"/>
<aura:attribute name="columns" type="Object"/>
<aura:attribute name="filter" type="String" />
<aura:attribute name="errors" type="Object" default="[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:html tag="style">
    .slds-modal__title{
    font-size: 30px !important;
    }
    .slds-modal__container {
    width : 95% !important;
    max-width : 100% !important;
    }
    .myModal{
    height: 85%;
    }
    .offerIdDiv{
    padding-top: 30px;
    }
    .offerLinkDiv{
    padding-bottom: 10px;
    }
    .button{
    margin-top: 15px;
    }
    .myIcon{
    padding-top: 30px;
    }
    #modalContDiv{
    font-size: 16px;
    }
</aura:html>
<!-- Error Message -->
<aura:if isTrue="{!v.showErrorMessage}">Errore</aura:if>
<!-- Component Modal -->
<lightning:button class="slds-align_absolute-center button" variant="brand" label="Manage Task" title="Manage Task"
                  onclick="{! c.openModal }"/>
<aura:if isTrue="{!v.isModalDisplayed}">
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox"
         class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                <!--{!v.recordId}-->
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-brand" title="Close"
                        onclick="{!c.closeModal}">
                    <lightning:icon iconName="utility:close" size="small" variant="inverse"
                                    alternativeText="Close"/>
                    <span class="slds-assistive-text">Close</span>
                </button>
                <div class="slds-col slds-size_2-of-3 slds-align_absolute-center">
                        <span>
                            <h1 id="modal-heading-01" class="slds-modal__title">Manage Task</h1>
                        </span>
                </div>
            </header>
            <div id="modalContDiv" class="slds-modal__content slds-p-around__medium no_scrollbar myModal">
                <lightning:input type="text" onchange="{!c.filter}" value="{!v.filter}" label="Filter" />
                <div>
                    <lightning:datatable aura:id="taskTable"
                                keyField="Id"
                                data ="{!v.data}"
                                columns = "{!v.columns}"
                                hideCheckboxColumn="false"
                                onrowselection="{!c.doSelectRecord}"
                                onrowaction = "{!c.handleRowAction}"
                                draftValues = "{!v.draftValues}"
                                onsave = "{!c.handleSave}"
                    />
                </div>
            </div>
        </div>
    </div>
    <div class="slds-backdrop slds-backdrop__open" aura:id="Modalbackdrop"></div>
</aura:if>

</aura:component>

JS Controller:

({
    doInit : function(component, event, helper) {
        var actions = [{
            label: 'Show Details',
            name:  'show_details',
            iconName: 'action:preview'
            },
            {
                label: 'Delete',
                name: 'delete',
                iconName: 'action:delete'
        }]
        component.set('v.columns',[
            {label: 'Subject', fieldName: 'Subject', type: 'text'},
            {label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},
            {label: 'Status', fieldName: 'Status', type: 'text'},
            {label: 'Created Date', fieldName: 'CreatedDate', type: 'datetime'},
            {label: 'Supervisor', fieldName: 'Supervisor__r', type: 'text'},
            {label: 'Priority', fieldName: 'Priority', type: 'text', editable: true},
            {label: 'Level', fieldName: 'Level__c', type: 'text', editable: true},
            {label: 'Calcola Supervisore', fieldName: 'Calcola_Supervisore__c', type: 'checkbox', editable: true},
            {type: 'action', typeAttributes:{ rowActions : actions}}
        ])
       helper.getData(component, event, helper);
   },

   doSelectRecord : function(component, event, helper) {
       var selectedRows = event.getParam('selectedRows');
       console.log('selectedRows', selectedRows);
   },

   handleRowAction : function(component, event, helper){
       var action = event.getParam('action');
       var row = event.getParam('row');
       switch(action.name){
           case 'show_details' :
                alert('Case ID: ' + row.Id + ' \nCase Number: ' + row.CaseNumber + '\nCase Subject: ' + row.Subject + '\nCase Status: ' + row.Status +
                '\nCreated on: ' + row.CreatedDate + '\nGot Supervisor?' + row.Calcola_Supervisore__c + '\nThe Supervisor is: ' + row.Supervisor__r +
                 '\nCase Priority: ' + row.Priority + '\nCase Level: ' + row.Level__c);
                break;
           case 'delete' :
                var data = component.get('v.data');
                var index = data.indexOf(row);
                data.splice(index, 1);
                component.set('v.data', data);
                break;
       }
   },

 handleSave : function(component, event, helper){
     var draftValues = event.getParam('draftValues');
     var action = component.get("c.updateRelatedCaseList");
     action.setParams({"CaseList" : draftValues});
     action.setCallback(this, function(response){
         var state = response.getState();
         if(state === 'SUCCESS'){
             component.set('v.draftValues', []);
             helper.getData(component, helper);
             $A.get('e.force:refreshView').fire();
         }
     });
     $A.enqueueAction(action);
 }

    closeModal: function(component,event,helper){
        component.set("v.isModalDisplayed", false);
    },

    openModal: function(component,event,helper) {
        component.set("v.isModalDisplayed", true);
        helper.manageCaseLogic(component);
    },

})

JS Helper:

({
 toastMsg : function( strType, strMessage ) {
        var showToast = $A.get( "e.force:showToast" );
        showToast.setParams({
            message : strMessage,
            type : strType,
            mode : 'sticky'
        });
        showToast.fire();
    },

 getData : function(component, event, helper){
      var action = component.get('c.fetchCases');
     action.setCallback(this, function(response){
         var state = response.getState();
         if(state === 'SUCCESS' || state === 'DRAFT'){
             var responseValue = response.getReturnValue();
             console.log('responseValue', responseValue);
             component.set('v.data', responseValue);
         }
     });
     $A.enqueueAction(action);
 }

})

Apex Controller:

public with sharing class ManageTaskController {
@AuraEnabled
public static void updateRelatedCaseList(List<Case> CaseList) {
    if (CaseList != null && CaseList.size() > 0) {
        update CaseList;
    }
}
@AuraEnabled
public static List<Case> fetchCases() {
    try{
        return [SELECT CaseNumber, Level__c, Calcola_Supervisore__c, Supervisor__r.Name, Subject, Status, Priority, CreatedDate FROM Case];
    } catch(Exception e){
        //this allows lightning components to see the exception message
        System.AuraHandledException err = new System.AuraHandledException(e.getMessage());
        //this makes it so the exception is still readable in the debug logs
        err.setMessage(e.getMessage());
        throw err;
    }
}
@AuraEnabled
public static List<Case> findByName(String searchKey) {
    String name =  + searchKey + '%';
        return [SELECT CaseNumber, Level__c, Calcola_Supervisore__c, Supervisor__r.Name, Subject, Status, Priority, CreatedDate
        FROM Case
        WHERE Priority LIKE :name OR Supervisor__r.Name LIKE :name OR Level__c LIKE :name
        ];
    }

}

Can someone help me understand where I am wrong? Thanks in advance.

1 Answer 1

0

Nothing jumps right out to me. I would start with ensuring I have ways to report issues to the console.

Try changing your Apex Class for updating cases to include a try/catch block that throws an AuraHandledException response to the client dev console to see if you get a meaningful error. I would also add some console logging to the handleSave method to capture the response and parse out any errors.

Apex Class

public static void updateDraftValues(List<Case> draftValues)
{
    if(!draftValues.isEmpty())
    {
        try
        {
            update draftValues;
        }
        catch(Exception ex)
        {
            throw new AuraHandledException('Something went wrong...' + '\n' + 
                                            'Message: ' + ex.getMessage() + '\n' + 
                                            'Type: ' + ex.getTypeName() + '\n' +
                                            'Cause: ' + ex.getCause() + '\n' + 
                                            'Trace: ' + ex.getStackTraceString());
        }
    }
}

Add this to your handleSave method in the component controller

else if(state === 'ERROR'){
                var errors = response.getError();
                component.set('v.errors',errors);
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log('ERROR: ' + errors[0].message);
                    } else{
                        console.log('ERROR: Unknown ' + response.getError());
                    }
                } else{
                    console.log('Something went wrong.  Please try again');
                }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.