0

I could not show the lightning app in a visual force page.

However, if I include weiParent2 component in the community lightning builder the component will show up.

What's the issue to use the lightning in a VF page?

Lightning Login App

<aura:application extends="ltng:outApp"
                  implements="forceCommunity:availableForAllPageTypes"
                  access="GLOBAL"
>
    <aura:dependency resource="c:weiParent2"/>
    <c:weiParent2 />
</aura:application>

VF page

<html>
<head>
    <apex:includeLightning/>
</head>
<body>

<h1>
    Hello World Wei
</h1>

<div id="lightning"/>

<script>
    $Lightning.use("c:lightningLoginApp", function () {
        $Lightning.createComponent("c:weiParent2",
            {label: "This is the lightning button!"},
            "lightning",
            function (cmp) {
            debugger

            });
    });
</script>



</body>
</html>

  • 1
    you dont need to add <c:weiParent2 /> in your app, only declare it as a dependency and create it as you already are inthe vf pags script – glls Jul 21 '18 at 1:31
  • Your VF page doesn't really look like a VF page since there's not an <apex:page> tag. – John Thompson Jul 21 '18 at 1:34
2

Here's a pattern that I've been pretty successful with.

<apex:page sidebar="false">
  <apex:includeLightning/>
  <script>
    $Lightning.use("c:lightningLoginApp", function() {
      $Lightning.createComponent(
          "c:weiParent2",
          {label: "This is the lightning button!"},
          "lightning",
          function(cmp) {
              console.log("Component created!");
              //debugger ?? what's this for?
          });
      });
  </script>
  <div id="lightning"></div>
</apex:page> 
  • You need to include the lightning/lightning.out.js script
  • I think you want to have the div after your script.
  • Also glls' comment is, I think, relevant. The component you create dynamically probably shouldn't be in you app

Maybe refactoring to this pattern is worth a try.

  • 3
    newBike is using <apex:includeLightning/> which is the recommended way to include the lightning out runtime. – Caspar Harmer Jul 21 '18 at 7:45
  • Hi @John if I want to re-render the component and the re-render event should be controlled by a parent container Visualforce page. How could I do that? – newBike Jul 26 '18 at 0:50
  • Checked it out... there's actually a couple of outdated references in the documentation, but <apex:includeLightning/> is certainly valid. I edited my answer. – John Thompson Jul 27 '18 at 14:43

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.