Lightning Component - Close Case Button not working

Question

I have began developing a button to automatically close the current case but I can't seem to get it working. I have tried a few different approaches but would someone be able to point me in the right direction.

As it stands the button does nothing, I feel like im on the right track, looking for someone who has done something similar with regards to updating fields from within a lightning component.

CMP

<aura:component controller="AmexComm_SecureMsgController" implements="forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global">
<aura:attribute name="record" type="Case"/>
<aura:attribute name="caseStatus" type="String"/>
<aura:attribute name="caseId" type="String" default="{!v.recordId}"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

 <button class="slds-button slds-button--neutral newsbutton" style="float:right"  onclick="{!c.closeCase}">Close Case</button>

AmexComm_SecureMsgController

 @AuraEnabled
    public static Case getCase(Id caseId){
        return([Select id, Atrium_Subject__c, Atrium_AmexSubject__c, Status, Atrium_Message_Status__c, Contact.Name, ContactId, CreatedDate, Message_Number__c, LastModifiedDate, Description__c,
                (SELECT id, Name From Attachments)
                                From Case Where id=:caseId]);
    }
    @AuraEnabled
    public static Case closeCase(Case caseA){
       update caseA;
       return caseA;
    }

Controller

{
doInit : function(component, event, helper) {
    component.set("v.isError", false)
    component.set("v.showEditView", false);
    component.set("v.errorMsg", "");

    var action = component.get("c.getCase");
    action.setParams({
        caseId : component.get("v.caseId")
    });

    action.setCallback(this, function(a) {
        if (a.getState() === "SUCCESS") {
            component.set("v.record", a.getReturnValue());
            helper.getStatusPickListValue(component);
        }
    });

    $A.enqueueAction(action);
},

closeCase : function (component, event, helper) {
    var action = component.get("c.closeCase");
    var Status = component.get("v.record.Status") //get value of field
    //console.log("Status: " Status);
    action.setParams({Status : Closed});

    $A.enqueueAction(action);
},

Helper

getStatusPickListValue : function(component) {

        var action = component.get("c.getCaseStausPickList");
        action.setCallback(this, function(response) {
            var state = response.getState();
            var hasImg = false;
            if (component.isValid() && state === "SUCCESS") {

                var statusPickList = response.getReturnValue();
                component.set("v.lstCaseStatus", statusPickList);

                console.log('status picklist ::', component.get("v.lstCaseStatus"));
            }
        });
        $A.enqueueAction(action);

    },

Answer 1

You have a common problem. Your lightning method and your apex method have the same name. Change one of them to something else (closeCaseApex, for example) and this should work).

Since you have no error handling, the only place to see that this error occurred is the console. I highly recommend adding some sort of error handling in your code.

You also didn't set a callback function for your closeCase methods. I recommend you add one as well.

Answer 2

Looks like you are not passing the case id, so the controller wouldn't know which case to close. Try:

var caseId = component.get("v.record").Id;
action.setParams({caseA: {Id: caseId, Status : "Closed"}});

... or modify the status on the component attribute and pass the attribute as the param:

var case = component.get("v.record");
case.Status = "Closed";
action.setParams({caseA: case});

You may also want to consider using the Lightning Data Service. In that case, you wouldn't need Apex code at all. Still in Developer Preview though.