How to create extended functionality case accept quick actions
The standard Accept button for case list views and individual records changes the case ownership to the user who pressed the button. But what if you want to run additional actions like changing the case status?
This blog post covers creating alternative accept buttons that can achieve this. One for the case list view (mass accept) and one for the case record page (single accept).
Case List View – Mass Accept
First, create an apex controller that reads which cases were selected in the list view. In the acceptCases() method, you assign ownership to the user and make any other updates (e.g. updating the case status).
public class CaseAcceptOwnershipExtension {
// mass accept
PageReference cancel;
Case[] cases;
public CaseAcceptOwnershipExtension(ApexPages.StandardSetController ctrl) {
cases = (Case[])ctrl.getSelected();
cancel = ctrl.cancel();
}
public PageReference acceptCases() {
for(Case c : cases) {
c.OwnerId = UserInfo.getUserId();
c.Status = 'Working';
}
update cases;
return cancel.setRedirect(true);
}
// single accept
@AuraEnabled
public static void acceptCase(Id caseId){
Case c = [SELECT Id, OwnerId, Status FROM Case WHERE Id =: caseId];
c.OwnerId = UserInfo.getUserId();
c.Status = 'Working';
update c;
}
}
Then, create a super simple Visualforce Page that uses the controller and calls the acceptCases() method.
<apex:page standardController="Case" recordSetVar="cases" extensions="CaseAcceptOwnershipExtension" action="{!acceptCases}" />
In Setup > Object Manager > Case > Buttons, Links and Actions, click “New Button or Link”. Give it a name and description, then select Display Type : List Button and Content Source : Visualforce Page. Now, select the Visualforce Page above in the Content dropdown.
In Setup > Object Manager > Case > List View Button Layout you can add the custom button to your list view layout(s).
Case Record Page – Single Accept
To accept a single case from the record page, you can build an aura component button. The component uses the same Apex controller as above. The acceptCase() method is setting the owner and status value.
A web component button always opens a UI dialogue window. In other use cases, this is where a user might enter information or make selections. In the accept button use case, we are just displaying a loading spinner while the operation is in progress.
Aura CMP
<aura:component controller="CaseAcceptOwnershipExtension" implements="force:lightningQuickAction,force:hasRecordId">
<lightning:workspaceAPI aura:id="singlecaseaccept"/>
<aura:attribute name="isLoading" type="Boolean" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- Loading -->
<aura:renderIf isTrue="{!v.isLoading}">
<div class="loadingContainer">
<lightning:spinner alternativeText="Loading" size="medium" />
</div>
</aura:renderIf>
</aura:component>
Aura CSS
.THIS.loadingContainer{
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
}
The aura controller:
- starts the loading spinner
- calls the
acceptCase()method from the Apex controller - in the callback function, we fire a toast to show the user “Success” or any errors (documentation)
- the loading spinner is stopped
- the dialogue window is automatically dismissed / closed (documentation)
- lastly, the record page is refreshed to show the updated owner and status
The ability to refresh the entire record page is the main reason I would choose an aura component button over a lightning web component button in this use case. You can read more here.
Aura Controller
({
doInit: function(cmp) {
// show loading spinner
cmp.set("v.isLoading", true);
// call apex method for accepting the case & set parameters
var acceptCase= cmp.get("c.acceptCase");
acceptCase.setParams({caseId: cmp.get("v.recordId")});
acceptCase.setCallback(this,function(response){
// show the success / error message
var toastEvent = $A.get("e.force:showToast");
if(response.getState()==="SUCCESS"){
toastEvent.setParams({
"message": "Case Accepted",
"type" : "success"
});
}
else{
toastEvent.setParams({
"message": "Oops, something went wrong",
"type" : "error"
});
}
toastEvent.fire();
// stop loading spinner & close the quick action pop up
cmp.set("v.isLoading", false);
var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();
// refresh the tab to show changes
var refreshTab = cmp.get('c.refresh');
$A.enqueueAction(refreshTab);
});
$A.enqueueAction(acceptCase);
},
refresh: function (cmp){
let workspaceAPI = cmp.find("singlecaseaccept");
workspaceAPI.getFocusedTabInfo().then(function(response){
let focusedTabId = response.tabId;
workspaceAPI.refreshTab({
tabId: focusedTabId,
includeAllSubTabs: false
});
})
.catch(function(error){
console.log(error);
});
}
})
In Setup > Object Manager > Case > Buttons, Links and Actions, click “New Action”. Give it a name and description, then select Action Type: Lightning Component & pick your component in the dropdown menu. Finally, you can add this new Lightning quick action to page layouts and lightning record pages.
Want to read more blog entries about Salesforce development? Follow me.
