0

I've an appexchange app that puts a widget on Salesforce record using inline visualforce page. It works in both classic and lightning(under details tab).

However, I'm now considering to move away from the inline vf page to lightning component. My question is would I still need to keep the visualforce page to be used in classic? I need to keep supporting classic as some of our customers still use it.

The visualforce page uses AngularJS and the lightning components will be using lightning component framework as recommended. If I need to keep the vf page, do I need to keep and maintain two code bases?

1 Answer 1

5

You can use lightning component inside a VF page. In this way you can avoid maintaining the separate code base for VF Page. When VF Page will render it will display the lightning component.

Create a lightning Application

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:mycomponent"/>
</aura:application>

Create a VF Page

<apex:page standardController="Account">
    <apex:includeScript value="/lightning/lightning.out.js" />
    <apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css"/>
    <apex:includeLightning />
    <div class="slds" style="margin-top:10px;margin-left:10px;"> 
        <div id="lightning" />
    </div>

    <script>
        var recId = "{!$CurrentPage.parameters.id}";
        console.log(accountId);
        $Lightning.use("c:MyLightningApp", function() {
          $Lightning.createComponent("c:MyComponent",
                { "recordId" : recId },
                  "lightning",
                  function(cmp) {
                     // alert("{!$CurrentPage.parameters.id}");
                    // do some stuff
               });
        });
    </script>
</apex:page>

Create attribute in your lightning component and use that attribute value in init call of lightning component.

<aura:attribute name="recordId" type="String" />

Hope it answer your question!!

2
  • While this is technically a correct answer, it would be a lot better if you explained how this is done. Please edit your answer to explain how one goes about reusing a Lightning Component in a Visualforce Page.
    – sfdcfox
    Sep 6, 2019 at 7:26
  • Thanks for highlighting. I have updated my answer. Sep 6, 2019 at 7:35

You must log in to answer this question.

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