Skip to main content

Update tab label on Salesforce Lightning Service.com Console

Records in Salesforce service console takes standard name or casenumber as default tab name.
update tab label in lightning salesforce service console

To override the default tab name , we can leverage console javascript tool kit by using getFocusedTabInfo() to rename the tab.

For that we need to create a lightning component and add it to the lightning page of record in service console by editing the page (Edit Page).

update tab label in lightning salesforce service console
Here is the code of the lightning component.

RenameTab.cmp (Component file)

<aura:component controller="TabLabel" implements="flexipage:availableForAllPageTypes" access="global" >    
    <lightning:workspaceAPI aura:id="workspace" />     
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="case" type="Case" />
</aura:component>

RenameTabContoller.js (Controller file)

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

RenameTabHelper.js (Helper file)

({
addDelay : function(component,event,helper) { 
        var i = 0;
var interval = window.setInterval(            
            $A.getCallback(function() {  
                var cs = component.get("v.case") ;                
                if (!component.isValid() || (i === 10)){                     
                    window.clearInterval(interval);                    
                    return;
            }                
                helper.setFocusedTabLabel(component, event, helper);
                i++;
            }), 100
        );   
},
    setFocusedTabLabel : function(component, event, helper) {
        var workspaceAPI = component.find("workspace");       
        workspaceAPI.getFocusedTabInfo().then(function(response) {
            var focusedTabId = response.tabId;
            var recordId = response.recordId ;
                        
            var action = component.get("c.getCase");
            action.setStorable();
            action.setParams({"caseId": recordId});
    
            // Configure response handler
            action.setCallback(this, function(response) {
                var state = response.getState();
                if(component.isValid() && state === "SUCCESS") {               
                    component.set("v.case", response.getReturnValue());
                } else {
                    console.log('Problem getting case, response state: ' + state);
                }
            }); 
            $A.enqueueAction(action);
            var caseObj = component.get("v.case") ; 
            
            if(caseObj !=null){
                workspaceAPI.setTabLabel({
                    tabId: focusedTabId,                
                    label: caseObj .casenumber             
                }); 
            }
            
        })
        .catch(function(error) {
            console.log(error);
        });
        
    }
})

TabLabel.cls (Controller class)

public with sharing class TabLabel {
@AuraEnabled
    public static Case getCase(Id caseId) {
        // Perform isAccessible() checks here
        if (Schema.sObjectType.Case.fields.casenumber.isAccessible() ) {
    return [SELECT id , casenumber FROM case WHERE Id = :caseId];
        }else{
            return null;
        }
    } 
}

Comments

Popular posts from this blog

Einstein Bot user authentication

Using Bot for data manipulation use case in your company requires need of implementing some extra security layer to make it spoof proof. One of exciting salesforce feature we have is the well known Einstein Bot which many companies have implemented. I am going to cover detail step-by-step implementation of User validation use case using encrypted token. STEP-1: Create a Site & Site User go to setup > Sites & Domains > Sites Create a Site and make your user as "Site Contact". This is a prerequisites for live agent or Embedded Service setup. STEP-2 : Create a Embedded Service(formerly snap-ins) go to Service setup > Embedded Service Create a new Embedded Service Deployment record and copy the embedded service code snipped generated in a notepad. STEP-3  : Create a Visualforce page to test the chatbot (it will simulate the actual web portal which is going to consume the embedded service snipped.) BotController.apxc public class BotControlle...

Dynamically populate lightning:combobox

In order to dynamically populate values in lightning:combobox using javascript we can create a list variable and push the values. We also require the values like ids associated to the particular option for back-end logic. For example  : If we want to show the list of contacts using lightning:combobox component where the option should display the contact name but the value should be the contact id which will be used for back-end logic For this we can create a temporary Map variable in our lightning component and set the value and label parameters of the lightning:combobox. Here is the code for this component Combo.app <aura:application extends="force:slds" access="global" description="Lightning Combo Demo"> <c:Combo_Cmpt/> </aura:application> Combo_Cmpt.cmp <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ComboController"> <!-- ...

Use of wrapper class in lightning:datatable

As you guys know the wrapper class concept in visualforce pages , we generally use it to create a data-table which fetches data from different objects or if we want to redirect user to some other page on click of a link as one of the column of data-table.        For example we want a column "Account Name" on the data-table which is a link and once user clicks it should redirect respective account record. Or , suppose we want to display a column with some images or icons as a visual indicator Or what not. These requirements require us to use a wrapper on the lighting data-table (lightning:datatable) I am going to use my previous account search example ( Account Search Lightning Component ) and explain the use of wrapper. AccountSearchWrapper.app <aura:application extends="force:slds" access="global" >     <c:AccountSearchWrapper /> </aura:application> AccountSearchWrapper.cmp <aura:component controller="...