How do I Call Methods in the Console Integration Toolkit from a Lightning Component?

Question

The requirement I am working on is a little complex so I am going to break my question down into a few points for clarity sake.

1. The application I am working on will run in the Salesforce Service Console.

2. Multiple custom console components will be used.

3. The requirement is that each of these custom console components be a Lightning component.

4. Currently, the only way to add a Lightning component into the service console is to embed the Lightning component into a Visualforce page and then add that Visualforce page as a custom console component as mentioned here.

5. I have this part of the code working and the component loads successfully without error. When the console loads, I am calling a method to get the object record id of the enclosing primary tab and then using that method's callback to dynamically create the Lightning component and pass the case Id to the component as an attribute. The code for that is below:

   <div id="reportLinksDiv"></div>
   
   <!-- Use console integration toolkit to get the case record id from the open primary case tab -->
   <script type="text/javascript">
     (function() {
   
       // Get Case primary tab object Id
       sforce.console.getEnclosingPrimaryTabObjectId(function(result) {
         // In the integration toolkit callback, inject the Lightning component tha requires the case id
           var caseId = result.id;
           $Lightning.use("c:RE_AccountReportSectionApp", function() {
            $Lightning.createComponent("c:RE_AccountReportSectionComp",
             {
               "label" : "RE_AccountReportSection",
               "caseRecordId" : caseId
             },
             "reportLinksDiv",
             function(component) {
               if(componet.isValid()) {
                 // do more stuff - this is where I've stopped
               }
             });
           });
       });
     })();
   </script>
   

   6. The component itself contains a list of links. When one of those links is clicked, a sub-tab needs to open that is associated to the current primary tab, which will be a case record in this case.

   7. I know there are methods of doing this with the console integration toolkit, but I am not sure how to catch the click event on the link within the Lightning component and then bubble that event back out to the containing Visualforce page itself in order to use the integration toolkit methods.

I've really been wracking my brains on this one. If there is anymore clarity I can provide please let me know.

Thanks, everyone.

Answer 1

Here is a small experiment as a proof of concept to emit events from lightning component and handle in VF

<aura:component>
 <div> Hello World !!!! </div>
  <aura:registerEvent name="myevent" type="c:myEvent" />
  <ui:button label="fireEvent" press="{!c.fireevent}" />
</aura:component>

The JS controller file

({
 fireevent: function(component, event, helper) {
    var myEvent = $A.get("e.c:myEvent");
    myEvent.setParams({"data":"Test"});
    myEvent.fire();
  }
})

The Event file

<aura:event type="APPLICATION">
 <aura:attribute type="string" name="data" />
</aura:event>

The application file

<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="c:myComponent" />
</aura:application>

The visualforce where event is handled

<apex:page showHeader="false" sidebar="false">
<apex:includeLightning />
<div id="lightning"> Hello world VF ..!!! </div>
<script>

    $Lightning.use("c:myEventApp", function() {
        $Lightning.createComponent("c:myComponent", {}, "lightning", function(){
            $A.eventService.addHandler({ "event": "c:myEvent", "handler" : visualForceFunction});

        });
    }); 

</script>

<script>

var visualForceFunction = function(event){
        var myEventData = event.getParam("data");
        console.log(myEventData);
    };

</script>

DISCLAMIER : I have not tried inside service console but this should help you get started .For ISV apps since this is not documented anywhere ,consult SFDC security review team or salesforce lightning component product team to see if this is right way of doing this .