+ Start a Discussion
san5augsan5aug 

How to call lightning javascript controller function from canvas

Hi All,

We want to support a lightning component for a salesforce1 application on QuckAction . We have done below steps.
  • Created a lightning component 
  • <aura:component controller="SampleApexController"  implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
    	<aura:attribute name="recordId" type="Id" />
        <div class="slds">      
    		<div class="slds-m-around--medium">
    			<div class="slds-form-element">
    				 <div class="slds-form-element__control">
    					<input id="" class="slds-input" type="text" placeholder="" required="" />                    
    				</div>
                     <div class="slds-form-element__control" style="text-align:right;">					
                        <ui:button label="Submit" 
    					class="slds-button slds-button--brand"					
    					press="{!c.JSFunction}"/>							
    				</div>
                </div>
            </div>
        </div>
    </aura:component>
    JS Controller
    ({  
        JSFunction : function(component, event, helper){
            var recordId = component.get("v.recordId"); 
            var action = component.get("c.myApexcontroller");        
            action.setParams({"recordId":recordId});
    		action.setCallback(this, function(response) {
    		   var state = response.getState();
    			if (component.isValid()  && state == "SUCCESS") {
                    var message = response.getReturnValue();                 
                    // Do your stuff with result
    			}
    		});
            if(!isValError){
                $A.enqueueAction(action);
            }
        }
    })
  • Created a lightning app and embadded above LC
  • <aura:application access="GLOBAL" extends="ltng:outApp">	
        <aura:dependency resource="c:LightningComponent" type="COMPONENT"/>
    </aura:application>
    Created a VF page and initialize above lightning app.
  • <apex:page standardStylesheets="false" sidebar="false" standardController="CustomObject">  
    
       <apex:includeScript value="/lightning/lightning.out.js"/>
       <apex:includeScript value="/canvas/sdk/js/29.0/publisher-min.js"/>
        <div id="lightning"/>
        <div>
            <script>
                var recordId = "{!$CurrentPage.parameters.id}";
                $Lightning.use("c:LightningApp", function() {
                    $Lightning.createComponent("c:LightningComponent",
                      { "recordId" : recordId },
                      "lightning",
                      function(cmp) {                      
                          console.log("Component created!");
                          console.log(cmp);
                      });
                });
                
                Sfdc.canvas.publisher.subscribe({name: "publisher.showPanel",
                    onData:function(e) {
                        Sfdc.canvas.publisher.publish({name:"publisher.setValidForSubmit", payload:"true"});
                }});
                Sfdc.canvas.publisher.subscribe({ name: "publisher.post",
                    onData: function(e) {
                        //alert("call some remote action here");
                        Sfdc.canvas.publisher.publish({ name: "publisher.close",
                            payload:{ refresh:"true" }});
                }}); 
            </script>
        </div>
    </apex:page>

     
  • Created an action (Custom Visualforce) for a custom object and assigned above VF page.
  • When we open this VF page, there is two standrd button "Cancel" and "Save".
  • Screen shot of VF page with Lightning Component
  • On click of "Save" button we want to call lightning JS controller function (JSFunction) so that I can do my backend process and close this popup window.
Please help and thanks in advance. 

Regards,
Sandeep 
Rushikesh R.Rushikesh R.

Hi Sandip,

Did you found answer/workaround to your question ? I got stuck at same point.