You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Passing Huge Data from One Console Tab to Another Console Tab Using Salesforce Console Integration Toolkit


By: Radha

Salesforce Console Integration Toolkit

Salesforce provides a toolkit for processing huge data in Service Cloud Console. The toolkit is a browser based Java Script API and uses browsers as clients to display pages as tabs in the Console. It helps developers to implement custom functionality for the Salesforce console. For example, by using the Console Integration Toolkit, we can display Visualforce pages or third-party contents in the Salesforce console.

In this article, I have explained the steps I used to pass huge data (i.e. response from the external system) from one Console tab to another.

1. Create a Remote Site settings

URL ( https://raw.githubusercontent.com ).

2. Create a Wrapper class (ConsoleWrapper)

public class ConsoleWrapper {

   public String studentName{get;set;}

   public String isRegular{get;set;}

   public String status{get;set;}

   public String cleared{get;set;}

   public String clearedCurrent{get;set;}

   public String backLogs{get;set;}

   public String role{get;set;}

   public String studentNumber{get;set;}

   public String city{get;set;}

   public String prefferedLanguage{get;set;}

   public String university{get;set;}

   public String state{get;set;}

   public String isDeleted{get;set;}

   public String country{get;set;}

}

 

3. Create an Apex Class ( MainVFController_AC )

 

public class MainVFController_AC {

   public String ConsoleWrapperJson{get;set;}

   public List<ConsoleWrapper> ConsoleWrapperList{get;set;}

   public  void Performcallout(){

       HttpRequest req = new HttpRequest();

       HttpResponse res = new HttpResponse();

       Http http = new Http();

      req.setEndpoint('https://raw.githubusercontent.com/parthiban019/samplejson/master/Console');

       req.setMethod('GET');

       res = http.send(req);

       if(res.getstatusCode() == 200 && res.getbody() != null)

           ConsoleWrapperList = (List<ConsoleWrapper>)json.deserialize(res.getbody(),List<ConsoleWrapper>.class);

       if(ConsoleWrapperList != null && ConsoleWrapperList.size() > 0)

           ConsoleWrapperJson= json.serialize(ConsoleWrapperList);

   }

}

 

4. Create a Visualforce page (Main_VF)

This page is used for making callout and is the primary Visualforce page. Here, we are going to pass the data from this Visualforce page another Visualforce page

<apex:page Controller="MainVFController_AC" action="{!Performcallout}" title="JSON Table">

   <apex:includeScript value="/soap/ajax/30.0/connection.js"/>

   <apex:includeScript value="/support/console/30.0/integration.js"/>

   <apex:form >  

       <script type='text/javascript'>

       var jsonstr = '{!ConsoleWrapperJson}';

       var listener = function (result)

       {

           var childId = result.message;

           sforce.console.fireEvent('ParentDataResponse_'.concat(childId), jsonstr);

       };

       var parentId = Math.floor((Math.random() * 1000) + 500);

       sforce.console.addEventListener('RequestParentData_'.concat(parentId), listener);

       </script>

       <script type="text/javascript">

       var openSubtab = function openSubtab(result)

       {

           var primaryTabId = result.id;

           sforce.console.openSubtab(primaryTabId , '/apex/Child_VF?parentId='+parentId, true,

                                     'ChildPage', null, null);

       };

       

       function initiateChildVFPage() {

           sforce.console.getEnclosingPrimaryTabId(openSubtab);

       }

       </script>

       <br /><br /><br />

       <center> <apex:CommandButton value="Pass Data to the New console Tab" onclick="initiateChildVFPage();return false" /> </center>

       <br /><br /><br />

       <apex:pageBlock >

           <apex:variable var="i" value="{!1}"/>

           <apex:pageBlockTable value="{!ConsoleWrapperList}" var="wrap" width="100%">

               <apex:column headerValue="S.No" >

                   {!i}

                   <apex:variable var="i" value="{!i+1}"/>

               </apex:column>

               <apex:column headerValue="Student Name" value="{!wrap.studentName}"/>

               <apex:column headerValue="Regular Student" value="{!wrap.isRegular}"/>

               <apex:column headerValue="Student status" value="{!wrap.status}"/>

               <apex:column headerValue="Courses cleared" value="{!wrap.cleared}"/>

               <apex:column headerValue="Cleared Current" value="{!wrap.clearedCurrent}"/>

               <apex:column headerValue="Have backLogs" value="{!wrap.backLogs}"/>

               <apex:column headerValue="Role" value="{!wrap.role}"/>

               <apex:column headerValue="StudentNumber" value="{!wrap.studentNumber}"/>

               <apex:column headerValue="city" value="{!wrap.city}"/>

               <apex:column headerValue="Preffered Language" value="{!wrap.prefferedLanguage}"/>

               <apex:column headerValue="University" value="{!wrap.university}"/>

               <apex:column headerValue="State" value="{!wrap.state}"/>

               <apex:column headerValue="Old Student" value="{!wrap.isDeleted}"/>

               <apex:column headerValue="Country" value="{!wrap.country}"/>

           </apex:pageBlockTable>

       </apex:pageBlock>

   </apex:form>

</apex:page>

 

5. Create an Apex class ( ChildController_AC )

 

public class ChildController_AC {

    public List<ConsoleWrapper> consoleWrapperList{get;set;}

   public String response{get;set;}

   public void childconsolefunction(){

       consoleWrapperList =(List<ConsoleWrapper>)json.deserialize(response,List<ConsoleWrapper>.class);

       }

 }

 

6. Create a Visualforce page (Child_VF)

In this Visualforce page, we are going get the data from the Main_VF page and display it in a tabular format.

 

<apex:page controller="ChildController_AC" readOnly="true">

   <apex:form >

       <apex:includeScript value="/soap/ajax/30.0/connection.js"/>

       <apex:includeScript value="/support/console/30.0/integration.js"/>

       <script type='text/javascript'>

       function getUrlVars()

       {

           var vars = [], hash;

           var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

           for(var i = 0; i < hashes.length; i++)

           {

               hash = hashes[i].split('=');

               vars.push(hash[0]);

               vars[hash[0]] = hash[1];

           }

           return vars;

       }

       var childId = Math.floor((Math.random() * 500) + 1);

       var listener = function (result)

       {

           var jsonstr = result.message;

           childjsonfunction(jsonstr);

       };

       sforce.console.addEventListener('ParentDataResponse_'.concat(childId), listener);

       var parentId = getUrlVars()["parentId"];

       sforce.console.fireEvent('RequestParentData_'.concat(parentId), childId);

       </script>

       <apex:actionFunction name="childjsonfunction" action="{!childconsolefunction}" reRender="status1" status="status1">

           <apex:param value="" name="param1" assignTo="{!response}"/>

       </apex:actionFunction>

       <apex:actionStatus id="status1">

           <apex:facet name="start">

               <br /><br /><br /><br /><br /><br />

               <center> <img src="/img/loading32.gif"/>  </center>

           </apex:facet>

           <apex:facet name="stop">

               <apex:pageBlock >

                   <br /><br /><br />

                   <center><b>Data From the Primary console Tab</b></center>

                   <br /><br /><br />

                   <apex:variable var="i" value="{!1}"/>

                   <apex:pageBlockTable value="{!ConsoleWrapperList}" var="wrap" width="100%" rendered="{!ConsoleWrapperList != null}">

                       <apex:column headerValue="S.No" >

                           {!i}

                           <apex:variable var="i" value="{!i+1}"/>

                       </apex:column>

                       <apex:column headerValue="Student Name" value="{!wrap.studentName}"/>

                       <apex:column headerValue="Regular Student" value="{!wrap.isRegular}"/>

                       <apex:column headerValue="Student status" value="{!wrap.status}"/>

                       <apex:column headerValue="Courses cleared" value="{!wrap.cleared}"/>

                       <apex:column headerValue="Cleared Current" value="{!wrap.clearedCurrent}"/>

                       <apex:column headerValue="Have backLogs" value="{!wrap.backLogs}"/>

                       <apex:column headerValue="Role" value="{!wrap.role}"/>

                       <apex:column headerValue="StudentNumber" value="{!wrap.studentNumber}"/>

                      <apex:column headerValue="city" value="{!wrap.city}"/>

                       <apex:column headerValue="Preffered Language" value="{!wrap.prefferedLanguage}"/>

                       <apex:column headerValue="University" value="{!wrap.university}"/>

                       <apex:column headerValue="State" value="{!wrap.state}"/>

                       <apex:column headerValue="Old Student" value="{!wrap.isDeleted}"/>

                       <apex:column headerValue="Country" value="{!wrap.country}"/>

                   </apex:pageBlockTable>

               </apex:pageBlock>

           </apex:facet>

       </apex:actionStatus>

   </apex:form>

</apex:page>

7. Detail Page Link

Create a Detail page link as shown in the below image for any of the objects. In this article, I have created a custom link in a custom object.

8. Service Cloud Application

Create a Service Cloud application and add the object that has a detail page link. When you open any record of that custom object, you will see the Custom Links value.

9. Execute the Main Visualforce page

 

Click the Custom Link and it navigates to new Console tab with the data from the external System.

(I.e https://raw.githubusercontent.com/parthiban019/samplejson/master/Console )

10. Pass Data from one Console tab to another

Click the button “Pass Data to the New Console Tab” and the data shown in the current Visualforcepage are passed to the Child_VF page using the Console integration toolkit.

Reference: Salesforce Console Integration Toolkit