1

As an exercise I have developed a lightning app which replicates the standard related list functionality in a lightning page. I had put this app in an iframe in a visual force page so it looked like a standard related list. It worked quite well until Winter 16 has been released. I saw that there is a recommendation for embedding lightning on vf pages since winter 16. - "Add Lightning Components to Visualforce Pages"

This is how the page looked like with the iFrame: enter image description here

This is how it looks like now using the Lightning.Use function: enter image description here

MY VF Code is:

<script>
    $Lightning.use("c:AssetList", function() {
        $Lightning.createComponent("c:ListView"
        ,{}
        ,"lightning"
        ,function(component){console.log("create comp");});
    });
</script>

My lightning app code is:

The problem is that the css and the references to custom labels has been broken. Is there any special css consideration I need to care for when using this functionality or is anything wrong with my code?

1
  • The lightning app code is : <aura:application access="GLOBAL" extends="ltng:outApp" > <aura:dependency resource="c:ListView"/> <c:ListView /> </aura:application> Oct 20, 2015 at 12:14

2 Answers 2

3

This is because you do not have either;

<apex:includeScript value="/lightning/lightning.out.js" />

OR

<apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css">

Include these imports in your VF page.

Also please make sure you have the correct SLDS resources are configured and referred accurately.

1
  • Hi ahtnasah.li, thanks for your reply. I have included <apex:includeScript value="/lightning/lightning.out.js" /> in the page as it was written in the instructions. I have also tried the stlyesheet you have suggested, without success. I have raised a case with SF since 2 months now still no progress. Jan 8, 2016 at 8:49
-1

. Remove the vf, it should work fine I was trying to say that I had a similar issue when I was using a sales path lightning component in a visualforce page and I solved it by removing the vf on the apex stylesheet value, I hope it helps

1
  • Can you expand on this to provide a complete example?
    – Matt Lacey
    Jun 21, 2016 at 0:18

You must log in to answer this question.

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