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>

Improve this question
2
  • 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
    Commented Jul 21, 2018 at 1:31
  • Your VF page doesn't really look like a VF page since there's not an <apex:page> tag.
    – John Thompson
    Commented Jul 21, 2018 at 1:34

1 Answer 1

Reset to default
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.

Improve this answer
3
  • 3
    newBike is using <apex:includeLightning/> which is the recommended way to include the lightning out runtime.
    – Caspar Harmer
    Commented Jul 21, 2018 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
    Commented Jul 26, 2018 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
    Commented Jul 27, 2018 at 14:43

You must log in to answer this question.

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