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?

  • The lightning app code is : <aura:application access="GLOBAL" extends="ltng:outApp" > <aura:dependency resource="c:ListView"/> <c:ListView /> </aura:application> – Balazs Rubicsek Oct 20 '15 at 12:14
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.

| improve this answer | |
  • 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. – Balazs Rubicsek Jan 8 '16 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

| improve this answer | |
  • Can you expand on this to provide a complete example? – Matt Lacey Jun 21 '16 at 0:18

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.