1
<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
    <meta content="initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, minimal-ui" name="viewport" />
    <apex:includeLightning />   
    <div id="LightningComponentid" />   
    <script>
    $Lightning.use("c:ApplicationApp", function() {
        $Lightning.createComponent("c:applicationPortalContainer",
          {
          },
          "LightningComponentid",
          function(cmp) {
             console.log('LWC Componenet added in VF page');
          });
    },
    'https://some-community.cs123.force.com/application'
    );
    
    function invokeFromLWC() {
       // some code to execute   
    }
    </script>
</apex:page>

I want to invoke the function invokeFromLWC from the lightning web component that is embedded in this visual force page

1
  • Can you share the code from your component? Invoking a method on it should be possible but it needs to be written in a way that makes the method publicly accessible (using @api) – nbrown Jul 7 '20 at 13:21
0

COMMUNICATE FROM VISUALFORCE TO LWC:

The way to communicate info up in LWC is using events. The same mechanism can be used when using Lightning Components for Visualforce.

First, fire an event from the LWC and configure it as composed and bubbles:

this.dispatchEvent(new CustomEvent('myevent', {bubbles: true, composed: true}));

Then, in your visualforce page, attach a handler for that event:

document.addEventListener('myevent', invokeFromLWC);

COMMUNICATE FROM LWC TO VISUALFORCE:

The way to communicate information down in LWC, is via public (@api) properties and methods. The same mechanism applies when using Lightning Components for Visualforce. Eg: you could have a public method in your LWC called doWhatever, and call it from the parent vf page doing:

cmp.doWhatever();.
2
  • Thank you very much @Alba Rivas.This helps a lot. Is there anyway by which we can do the reverse too. That is, Can we send some events back to the lightning web component on completion of some operation, from the parent visual force page ? – AdityaHM Jul 7 '20 at 11:01
  • The way to communicate info up, in LWC is using events. In contrast, the way to communicate information down, is via public (@api) properties and methods. The same mechanisms applies when using lightning out. Eg: you could have a public method in your LWC called 'doWhatever', and call it from the parent vf page doing cmp.doWhatever();. Lightning Message Service is another option to consider, as @sfdcfox suggests. It's a messaging service that allows you to send messages to / from different entities, using a global bus. – Alba Rivas Jul 7 '20 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.