Lightning Console Set Tab Label Dynamically

Salesforce console is one of the key areas for agents to boost service productivity.we will see how to set the console case tab label dynamically based on the case origin.we will append the case origin to the case number while setting the label.

Apex Class 

public class ChangeCaseLabel {
    public static ChangeCaseLabelService service = new ChangeCaseLabelService();
    @AuraEnabled 
    public static String getCaseOrigin(String caseId){
        return service.getCaseOrigin(caseId);
    }
    
    
}

Service Class 

public class ChangeCaseLabelService {
    
    public String getCaseOrigin(String caseId){
        Case c = [Select id ,CaseNumber , Origin from Case where Id = :caseId];
        return c.Origin+'-'+c.CaseNumber ; 
    }
}

Lightning Component 

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="ChangeCaseLabel">
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
    <aura:handler event="force:refreshView" action="{!c.doInit}" />  
    <lightning:workspaceAPI aura:id="workspace" />
</aura:component>

({
	doInit : function(component, event, helper) {
		helper.init(component, event, helper);
	}
})

({
    init : function(component, event, helper) {
        var action = component.get("c.getCaseOrigin");
        action.setParams({ caseId: component.get("v.recordId")});
        action.setCallback(this,$A.getCallback(function(response1)
         {
         var state = response1.getState();             
         if (state === "SUCCESS")  
         {
             var result= response1.getReturnValue();
         var workspaceAPI = component.find("workspace");
         workspaceAPI.getFocusedTabInfo().then(function(response) {
            var focusedTabId = response.tabId;
            workspaceAPI.setTabLabel({
                tabId: focusedTabId,
                label: result
            });
        })
        .catch(function(error) {
            console.log(error);
        });
         }
         }
        ));
        $A.enqueueAction(action);       
        
        
    }
})

The following line will return the workspace API library reference

 var workspaceAPI = component.find("workspace");

The following method of the workspace API will be used to set label.

workspaceAPI.setTabLabel({
                tabId: focusedTabId,
                label: result
            });

Now add this component to the Lightning record page as shown below.

Testing 

If the case is created form the web the case label is appended with the web and case number as shown below

If the case is created from the email, then case label will be changed to email – case number.

 

Using Background Utility Items on Lightning Console

In this blog, I am going to how to use the background utility items that the runs from the background of utility bar of a console. Utilities harness the power of Lightning components. When you set up a utility bar, you select which Lightning components to use as utilities. However, not all Lightning components can be utilities. To be added to a utility bar, a Lightning component must implement the flexipage:availableForAllPageTypes interface. To run the utility bar from the background we need to implement the lightning:backgroundUtilityItem interface. lightning: backgroundUtilityItem is used to create a component that fires and responds to events without rendering in the utility bar. Background utility items are added to an app the same way normal utility items are, but they don’t appear in the utility bar. In this example, the component implements lightning:backgroundUtilityItem and listens for lightning:tabCreated events when the app loads. The component prevents users not to open more than 3 cases tab. If the user is trying to open the more than 3 tabs then it will close the first open tab automatically.

Step 1: Create a component

Here is the simple component that will run background. this component will run at the background and close the tab automatically when user trying to open the fourth tab.

<aura:component implements="lightning:backgroundUtilityItem,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="limit" default="3" type="Integer" />
    <aura:handler event="lightning:tabCreated" action="{!c.onTabCreated}" />
    <lightning:workspaceAPI aura:id="workspace" />
</aura:component>

({
    onTabCreated: function(cmp) {
        var workspace = cmp.find("workspace");
        var limit = cmp.get("v.limit");
        workspace.getAllTabInfo().then(function (tabInfo) {
            console.log(tabInfo);
            if (tabInfo.length > limit) {
                workspace.closeTab({
                    tabId: tabInfo[1].tabId
                });
            }
        });
    }
})

Step 2: Add a Utility Bar to Lightning Apps

• From Setup, enter App in the Quick Find box, then select App Manager.
• To edit the existing app, click Edit in the drop-down menu next to your Lightning App.
• Click the Utility Items tab and add the above created component to utility bar

Select the component and save it

Testing

go to the console and try to open the more than three cases now it will close the first tab automatically.

Key Consideration  

When creating a utility bar for your app, keep these things in mind:

• Utility bars created using the Lightning App Wizard or in the Lightning App Builder can be assigned to only one Lightning app. However, utility bars created using the API can be assigned to multiple Lightning apps.
• The utility bar doesn’t support Visualforce pages or components.
• The utility bar doesn’t fully support the Chatter Publisher and Feed components.
• The History utility works in Lightning console apps only.
• The Omni-Channel utility works in the Lightning Service Console app only.

 

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

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.

 

Using Page Context in the Utility Bar API

In this blog, I am going to show how to use the utility bar API in page context which means we will be communicating the page records id to utility bar.In both Lightning console apps and standard navigation apps, utilities can respond to the context of the current page. Set implements=”force:hasRecordId” on a Lightning component used in the utility bar to access the recordId of the record a user is viewing.This simple component implements force:hasRecordId and listens for changes to the record being viewed. The following example we will be showing the key field on the case from the utility bay when the user opens the case from the console.

<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
                access="global">
    
    <aura:attribute name="cases" type="Case"/>
    <aura:attribute name="caseFields" type="String[]" default="Comments,Status,Subject,Priority,"/>
    <force:recordData aura:id="cases"
                      recordId="{!v.recordId}"
                      targetFields="{!v.caseFields}"
                      layoutType="FULL"/>
    <div class="slds-clearfix">
        <lightning:card iconName="standard:Case" title="{! 'Case Details for ' + v.recordId}">
            
            <lightning:recordForm aura:id="caseForm"
                                  recordId="{!v.recordId}"
                                  objectApiName="Case"
                                  fields="{!v.caseFields}"
                                  columns="1"
                                  mode="View"/>
            
        </lightning:card>
        
    </div>
</aura:component>

Now go to the App manager and all this utility bar to the console

• From Setup, enter App in the Quick Find box, then select App Manager.
• To edit the existing app, click Edit in the drop-down menu next to your Lightning App.
• Click the Utility Items tab and add the above  created component to utility bar

After adding the utility bar to console you can see the utility bar will open case details when the user is open the case as shown below