function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SFDC Forum 9SFDC Forum 9 

Calling lightning component from VF page

Hi I got to migrate call center app to lightning.So   there are two vf pages.

1) In Home page, Click on "Request " button --> enter request ID --> click on Search
It connects to web service and get the result back in list view.
Click on any record in that list.
New workspace tab will get opened  which is  Customized Case detailed page (VF page) and it contains customized details at end of the page and detailed pages at Top panel.


Now as part of migration, I have migrated customized Home page(VF1) to lightning, created new Lightning Application and placed  this VF1 as Home page in lightning App.
 Then I am able to get the records from webservice and display in list view.So far so good.

While migrating second page ,I got to recreate VF2 as lightning Component as it has  java script which is not supporting in lightning.

I have done the same , able to view as expected in lightning component.

Now all i have to do is, connect these two i.e   Lightning migrated VF1
and Lightning component..

Please anyoneof suggest as early as possible.

 
Best Answer chosen by SFDC Forum 9
{tushar-sharma}{tushar-sharma}
When you click on record and want to open second page, at that time render this section and display the component.

All Answers

{tushar-sharma}{tushar-sharma}
You can include your lightning component in visualforce,  
<apex:page >
    <apex:includeLightning />
    <div id="lightning" />
	<script>
		$Lightning.use("c:lwcVfDemoApp", function() {
        	 $Lightning.createComponent("c:lwcVFDemo", {
            	   objectName: "Contact"
                 },
              "lightning",
              function(cmp) {
                console.log("LWC component was created");
                // do some stuff
              }
          );
        });
    </script>
</apex:page>

Reference:https://newstechnologystuff.com/2019/05/27/use-lightning-web-components-in-visualforce/
Although it uses LWC, steps are the same.

​​​​​​​If this answer helps you, please mark it as accepted.

Regards,
Tushar Sharma
https://newstechnologystuff.com/
SFDC Forum 9SFDC Forum 9
Thank You Tushar.I get it.

But  I am new to the development, my query is ,at what part of vf page code, i should place this.Hope my main requirement is clear, i will go again anyway,

When i click on any of the row in classic, it will redirect to the 'Record page' of the contact.

I should get the same functionality in lightning.I dont know where should i keep this.And everytime, vf  page gets called, creates component?
{tushar-sharma}{tushar-sharma}
When you click on record and want to open second page, at that time render this section and display the component.
This was selected as the best answer