Home
Salesforce Lightning Console change Case Tab Icon dynamically

Salesforce Lightning Console change Case Tab Icon dynamically

By October 21, 2018 Lightning, Service Cloud 0 Comments

In this blog, I am going to show how to change the console case tab icon dynamically. standard salesforce case icon is Briefcase.In this post, i am going show how to change the case icon dynamilly based on the case Origin. If case origin is the phone we will show the case tab icon as phone .if the case origin is email then we will show the tab icon as email. here are the simple apex class and component

Apex Class

public class CaseIconChange {
    @AuraEnabled
    public  static string getIcon(Id caseId)
    {
        string source =caseId;    
        Case caseRec = [select Id, CaseNumber, Origin from Case where Id =: caseId];
        if(caseRec.Origin!=null && caseRec.Origin!='')
        {
            if(caseRec.Origin=='Phone'){
                source='call-'+caseRec.Origin;
            }
            if(caseRec.Origin=='Web'){
                source='live_chat-'+caseRec.Origin;
            }
            if(caseRec.Origin=='Email'){
                source='email-'+caseRec.Origin;
            }
        }   
        return source;
    }
}

The above apex class will return the case icon string to component based on the case origin.

Lightning Component 

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
                controller="CaseIconChange" >
    <lightning:workspaceAPI aura:id="workspace" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
    <aura:handler event="force:refreshView" action="{!c.doInit}" />  
</aura:component>
({
    doInit : function(cmp, event, helper) {
        var workspaceAPI = cmp.find("workspace");
        workspaceAPI.getFocusedTabInfo().then(function(response) {
            var focusedTabId = response.tabId; 
            var action = cmp.get("c.getIcon");
            action.setParams({ caseId: response.recordId});
            action.setCallback(this,
                               $A.getCallback(function(response1)
                                              {
                                                  var state = response1.getState();    
                                                  console.log('state'+state);
                                                  if (state == "SUCCESS")  
                                                  {
                                                      var result= response1.getReturnValue();
                                                      var finalString=result.split("-");
                                                      workspaceAPI.setTabIcon({tabId: focusedTabId, icon: "standard:"+ finalString[0], iconAlt: finalString[1]});   
                                                  }
                                              }
                                             ));
            $A.enqueueAction(action);       
            
        })
        
    }
})

Adding a component to Record Page 

Now add the above component into the lightning record page as shown below.T o change the case icon indicator you need to invoke the above create component. So I add this component to the record page.

Testing 

Now go to the case and change the origin. based on the origin it will change the icon . in the example I am changing the origin phone which changes the case tab icon to the phone

if we change the origin to the web then it will change the case icon to chat as shown below.

 

Related Posts