+ Start a Discussion
Michael Degn JensenMichael Degn Jensen 

Aura component set status on recond when checkbox is marked

Hi,

I am fairly new to working with Aura Components but have managed to build a component which shows all non-completed tasks on the user Home Page.
I have added a checkbox next to each Task and this is where I am stuck. I would like the Task Status to be updatet to 'Completed' when the checkbox i marked (true). How to accomplish this?

Any help is appreciated, thanks!

ApexController:
public class ALTaskController {
    @AuraEnabled
    public static List<Task> getTasks(){
        List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,WhoId,Priority,Status,Type FROM Task WHERE ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed' ORDER BY ActivityDate ASC];
        return taskList;
    }
}
Component:
<aura:component controller="ALTaskController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
	<aura:attribute name="tasks" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />


        <lightning:card class="accountCard" variant="Narrow" iconName="standard:task" footer="Card Footer">
            <aura:set attribute="title">
                Mine opgaver
            </aura:set>
            <aura:set attribute="actions">
                <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
            </aura:set>
            <aura:set attribute="body">
                <p class="slds-p-horizontal_small">
                    <aura:iteration items="{!v.tasks}" var="task"> <!-- Use the Apex model and controller to fetch server side data -->
                    <lightning:tile label="{!task.Subject}" href="{!'/one/one.app?#/sObject/'+ task.Id + '/view'}">
                        <aura:set attribute="media">
							<lightning:input type="checkbox" name="input1" title="Fuldført"/>
                            <!--<lightning:icon iconName="standard:task"/>-->
                        </aura:set>
                        <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Forfaldsdato:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate"><lightning:formattedDateTime value="{!task.ActivityDate}" year="numeric" month="numeric" day="numeric"/></p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Status:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate">{!task.Status}</p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Kommentar:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class="" title="{!task.Description}"><p class="slds-truncate">{!task.Description}</p></div>
                            </div>
                        </div>
                    </lightning:tile>
                    </aura:iteration>
                </p>
            </aura:set>
            <aura:set attribute="footer">
            </aura:set>
        </lightning:card>
</aura:component>
Controller:
({
	doInit: function(component, event, helper) {
        // Fetch the task list from the Apex controller
        helper.getTaskLists(component);
    }
})
Helper:
({
	// Fetch the accounts from the Apex controller
    getTaskLists: function(component) {
        var action = component.get('c.getTasks');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.tasks', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})
Best Answer chosen by Michael Degn Jensen
Khan AnasKhan Anas (Salesforce Developers) 
Hi Michael,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Apex:
public class ALTaskController {
    
    @AuraEnabled
    public static List<Task> getTasks(){
        List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,WhoId,Priority,Status,Type FROM Task WHERE ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed' ORDER BY ActivityDate ASC];
        return taskList;
    }
    
    @AuraEnabled
    public static void updateDetails(List<String> lstRecordId) {
        List<Task> lstUpdate = new List<Task>();
        for(Task t : [SELECT Id, Status FROM Task WHERE Id IN : lstRecordId]){
            t.Status = 'Completed'; // Add fields which you want to update
            lstUpdate.add(t);
        }
        
        if(lstUpdate.size() > 0){
            update lstUpdate;
        }
        
    }
}

Component:
<aura:component controller="ALTaskController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <aura:attribute name="tasks" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    
    <lightning:card class="accountCard" variant="Narrow" iconName="standard:task" footer="Card Footer">
        <aura:set attribute="title">
            Mine opgaver
        </aura:set>
        <aura:set attribute="actions">
            <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
        </aura:set>
        <aura:set attribute="body">
            <p class="slds-p-horizontal_small">
                <aura:iteration items="{!v.tasks}" var="task"> <!-- Use the Apex model and controller to fetch server side data -->
                    <lightning:tile label="{!task.Subject}" href="{!'/one/one.app?#/sObject/'+ task.Id + '/view'}">
                        <aura:set attribute="media">
                            <lightning:input type="checkbox" 
                                             name="input1" 
                                             title="Fuldført"
                                             value="{!task}"
                                             onchange="{!c.updateStatus}"/>
                            <!--<lightning:icon iconName="standard:task"/>-->
                        </aura:set>
                        <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Forfaldsdato:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate"><lightning:formattedDateTime value="{!task.ActivityDate}" year="numeric" month="numeric" day="numeric"/></p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Status:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate">{!task.Status}</p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Kommentar:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class="" title="{!task.Description}"><p class="slds-truncate">{!task.Description}</p></div>
                            </div>
                        </div>
                    </lightning:tile>
                </aura:iteration>
            </p>
        </aura:set>
        <aura:set attribute="footer">
        </aura:set>
    </lightning:card>
</aura:component>

Controller:
({
	doInit: function(component, event, helper) {
        // Fetch the task list from the Apex controller
        helper.getTaskLists(component);
    },
    
    updateStatus: function(component, event, helper) {
        helper.updateTaskStatus(component, event);
    }
})

Helper:
({
    // Fetch the accounts from the Apex controller
    getTaskLists: function(component) {
        var action = component.get('c.getTasks');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.tasks', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    
    updateTaskStatus: function(component, event) {
        var rowRecord = event.getSource().get('v.value');
        console.log('rowRecord--->>> ' + JSON.stringify(rowRecord));
        var tid = rowRecord.Id;
        console.log('tid-> ' + tid);
        
        var action = component.get('c.updateDetails');
        action.setParams({
            "lstRecordId": tid
        });
        action.setCallback(this, function(response) {
            
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(state);
                $A.get('e.force:refreshView').fire();
            }
        });
        $A.enqueueAction(action);
    }
})

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Parth ThakkarParth Thakkar

Hello Michael Degn Jensen, 

1. Create New Aura Method in the controller for Update then Task
2. Create a Helper method to pass the task to the controller. 
3. Create JavaScript function in Controller on Change of your every checkbox it will get the task and set then Status to complete. and Call the Helper Method. 

ref: https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_server

Khan AnasKhan Anas (Salesforce Developers) 
Hi Michael,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Apex:
public class ALTaskController {
    
    @AuraEnabled
    public static List<Task> getTasks(){
        List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,WhoId,Priority,Status,Type FROM Task WHERE ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed' ORDER BY ActivityDate ASC];
        return taskList;
    }
    
    @AuraEnabled
    public static void updateDetails(List<String> lstRecordId) {
        List<Task> lstUpdate = new List<Task>();
        for(Task t : [SELECT Id, Status FROM Task WHERE Id IN : lstRecordId]){
            t.Status = 'Completed'; // Add fields which you want to update
            lstUpdate.add(t);
        }
        
        if(lstUpdate.size() > 0){
            update lstUpdate;
        }
        
    }
}

Component:
<aura:component controller="ALTaskController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <aura:attribute name="tasks" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    
    <lightning:card class="accountCard" variant="Narrow" iconName="standard:task" footer="Card Footer">
        <aura:set attribute="title">
            Mine opgaver
        </aura:set>
        <aura:set attribute="actions">
            <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
        </aura:set>
        <aura:set attribute="body">
            <p class="slds-p-horizontal_small">
                <aura:iteration items="{!v.tasks}" var="task"> <!-- Use the Apex model and controller to fetch server side data -->
                    <lightning:tile label="{!task.Subject}" href="{!'/one/one.app?#/sObject/'+ task.Id + '/view'}">
                        <aura:set attribute="media">
                            <lightning:input type="checkbox" 
                                             name="input1" 
                                             title="Fuldført"
                                             value="{!task}"
                                             onchange="{!c.updateStatus}"/>
                            <!--<lightning:icon iconName="standard:task"/>-->
                        </aura:set>
                        <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Forfaldsdato:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate"><lightning:formattedDateTime value="{!task.ActivityDate}" year="numeric" month="numeric" day="numeric"/></p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Status:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate">{!task.Status}</p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Kommentar:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class="" title="{!task.Description}"><p class="slds-truncate">{!task.Description}</p></div>
                            </div>
                        </div>
                    </lightning:tile>
                </aura:iteration>
            </p>
        </aura:set>
        <aura:set attribute="footer">
        </aura:set>
    </lightning:card>
</aura:component>

Controller:
({
	doInit: function(component, event, helper) {
        // Fetch the task list from the Apex controller
        helper.getTaskLists(component);
    },
    
    updateStatus: function(component, event, helper) {
        helper.updateTaskStatus(component, event);
    }
})

Helper:
({
    // Fetch the accounts from the Apex controller
    getTaskLists: function(component) {
        var action = component.get('c.getTasks');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.tasks', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    
    updateTaskStatus: function(component, event) {
        var rowRecord = event.getSource().get('v.value');
        console.log('rowRecord--->>> ' + JSON.stringify(rowRecord));
        var tid = rowRecord.Id;
        console.log('tid-> ' + tid);
        
        var action = component.get('c.updateDetails');
        action.setParams({
            "lstRecordId": tid
        });
        action.setCallback(this, function(response) {
            
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(state);
                $A.get('e.force:refreshView').fire();
            }
        });
        $A.enqueueAction(action);
    }
})

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Michael Degn JensenMichael Degn Jensen
You are the man Khan! Thanks a million :)