4

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>
    

    1. 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.

    2. 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.

1 Answer 1

3

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 .

4
  • Thanks for the thoughtful answer. I implemented the logic above and I am receiving the following error on the page once I click a link to fire the event, " Something has gone wrong. Action failed: c$RE_AccountReportSectionComp$controller$fireLinkClick [TypeError: m is not a function] Failing descriptor: {c$RE_AccountReportSectionComp$controller$fireLinkClick}. Please try again." Any idea what might be causing that? May 8, 2016 at 13:34
  • I need to see your code .The error clearly states it's something not with my code .Please try my example before wiring to your code May 8, 2016 at 13:38
  • Thanks. I was trying your example, but I had just accidentally added double quotes around the visualForceFunction call, but I have been able to successfully throw an alert to the page so it is working. I wasn't able to find the $A.eventService object in the Lightning Components Developer Guide. Could you explain what that object actually does for future reference? Does it just allow you to dynamically add an event handler for an application level custom Lightning event? May 8, 2016 at 18:53
  • So this is undocumented and if you are building an ISV app and its going through security review ,I would advise you to contact the Lightning component Product team to figure if this solution meets your needs .I was able to console.log and use some aura documentation to figure this .Check here documentation.auraframework.org/… May 8, 2016 at 20:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .