Salesforce Lightning Console change Case Tab Icon dynamically
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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
|
1 2 3 4 5 6 7 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
({ 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.
