Salesforce Console Integration Toolkit – Give App Level Components Context

In this point, I will show how you can create an app level component for the service cloud console that know the context of the current case tab that is open. By default, the app level components load separately and because they exist for all the case that are open – they cant interact with or show any details from the case that is currently open.
Using the Console Integration Toolkit you identify the current tab that is open and the use some javascript to refresh the app component when a new tab is clicked by the user. In my example, I am displaying a simple lightning component in the visualforce page and every time a new tab is clicked – the component is refreshed with the current case id.

To do this, it uses the following functions from the Console Integration Toolkit:
sforce.console.onFocusedPrimaryTab()
sforce.console.getFocusedPrimaryTabObjectId()

There are two things that we need to do for this work without any errors. If it is the first time that it has loaded – just show the lightning component or if it has already loaded, I want to destroy it and reload the component with the new case id.
The first thing I want to do is declare variables that will be used by all of the javascript functions – one for the case id and one to determine if it is the first that the component has loaded.

        var currentCaseId;
    	var lightComponentLoaded = false;

I also want to use the console function to determine if the current primary tab has changed and then pass this information to my event handler.

        sforce.console.onFocusedPrimaryTab(eventHandler);

In my event handler, I check if the component has already loaded – if it has I use the destroy() method to remove it from the dom. If it hasn’t already been loaded, I simply set the case id.
After this happens and I have my case id, I call the function to load my lightning component (I have used lightning here but it could be using visualforce and controller either).

        var eventHandler = function (result) {
        
            // new tab clicked - destroy previous prediction component
            if (lightComponentLoaded === true){
          		sforce.console.getFocusedPrimaryTabObjectId();
            	currentCaseId = result.objectId; 
                vfcomponents.destroy();
            }
            // If the page has refreshed or just loaded
            else{
                currentCaseId = result.id; 
        	}
     
            loadLightiningComponent();
                   
        };

In here, I just use standard lightning out to display my component inside a visualforce page (See Peter Knolle’s blog for more info on this).
The only addition is that I set the lightComponentLoaded to true once the component has loaded. The component has the context of the current case tab that is open because I have passed it my javascript variable are a parameter.

       	function loadLightiningComponent() {
            // Replace this with your lightning component
            // Alternatively pass the parameter to your visuaforce controller if you are not using lightning
            // Code creates the component and passes the current case id to the component
            $Lightning.use(, function() {
               
                $Lightning.createComponent('MyLightningComponent',
                    {
                        recordId: currentCaseId
    		                     
                    },
                    'lightning',
                    function(cmp) {
                        lightComponentLoaded = true;
                    });
            });
            
  		}

If you add this visualforce page to the console footer and open it – everytime to open a new case tab in the console, the footer component will refresh and relative to the current tab that is open.
You can see the full implementation of the code on Githubhere

Leave a Reply