+ Start a Discussion
Colin KenworthyColin Kenworthy 

Lightning Component in Visualforce

I have made a lightning component (that uses the lightning:tree) that works fine when I place it in the lightning page layout, however when I place it in a legacy VF page (the VF page is a tab on the record detail page) using Lightning Out the down/right chevrons do not render.  Then if I place my component on a VF page inside an apex : tabPanel the component does not render at all.

Is there still ongoing work in the Lightning dev team to integrate Lightning and Visualforce together?  Perhaps the lightning:tree component itself has a few bugs?
Best Answer chosen by Colin Kenworthy
sfdcMonkey.comsfdcMonkey.com
hi colin , yes lightning:tree not working properly with vf page, i also have try this in my dev org, and it seems like a standard bug. if you inspect the icon button in vf page you can see the undefined in SVG url :

<svg focusable="false" data-key="chevronright" aria-hidden="true" class="slds-button__icon slds-button__icon--small"><use xlink:href="undefined/_slds/icons/v7.31.0/utility-sprite/svg/symbols.svg#chevronright"></use></svg>

and in Lightning Component it's not shoing the undefined:

<svg focusable="false" data-key="chevronright" aria-hidden="true" class="slds-button__icon slds-button__icon--small"><use xlink:href="/_slds/icons/v7.31.0/utility-sprite/svg/symbols.svg#chevronright"></use></svg>

so it's seems like 'lightning:out' bug. as we know that lightning:tree came with those winter 18 recent release. hopefully they are fix this issue soon.

Thanks Let us know if it helps you
 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi colin , yes lightning:tree not working properly with vf page, i also have try this in my dev org, and it seems like a standard bug. if you inspect the icon button in vf page you can see the undefined in SVG url :

<svg focusable="false" data-key="chevronright" aria-hidden="true" class="slds-button__icon slds-button__icon--small"><use xlink:href="undefined/_slds/icons/v7.31.0/utility-sprite/svg/symbols.svg#chevronright"></use></svg>

and in Lightning Component it's not shoing the undefined:

<svg focusable="false" data-key="chevronright" aria-hidden="true" class="slds-button__icon slds-button__icon--small"><use xlink:href="/_slds/icons/v7.31.0/utility-sprite/svg/symbols.svg#chevronright"></use></svg>

so it's seems like 'lightning:out' bug. as we know that lightning:tree came with those winter 18 recent release. hopefully they are fix this issue soon.

Thanks Let us know if it helps you
 
This was selected as the best answer
Sunil02KumarSunil02Kumar
Hi Piyush/Colin,

Have you got any workaround to fix this issue. 

I am also facing this issue and need some solution for this. 

Thanks,
Sunil Kumar