I have created a lightning lookup component using below link
ReUsable custom Lightning component
But I need to be placed this into PageBlock section of VF Page.
<apex:pageBlockSection title="Contact Role" id="pbs" collapsible="false">
<apex:inputField styleClass="slds-lookup__search-input" value="{!contactRole.Account__c}" />
<apex:inputField styleClass="slds-lookup__search-input" value="{!contactRole.Contact__c}" />
<apex:inputField value="{!contactRole.Role__c}" required="true" />
<apex:inputField value="{!contactRole.ActiveStatus__c}" />
<apex:inputField value="{!contactRole.Start_Date__c}" />
<apex:inputField value="{!contactRole.End_Date__c}" />
<apex:inputField value="{!contactRole.Primary__c}" />
</apex:pageBlockSection>
In above VF Page, we need I need the created lightning component in the place of
<apex:inputField styleClass="slds-lookup__search-input" value="{!contactRole.Contact__c}" />
I am not sure How to use the Custom lookup component as Input Field of PageBlock section
1) Created Child Component customLookupResult.cmp
For Display the Search Result List
2) Created Lightning Custom Lookup Component [Parent]customLookup.cmp
3) created one app Lookuptestapp.app
and again I created App as said with extends="ltng:outApp" Lookupcmpapp.app
Now i confusing which App Name should I give at $Lightning.use("c:lcvfTest", function() {
which component name should I give at $Lightning.createComponent("ui:button",
Lookuptestapp.app:
<aura:application extends="force:slds" access="GLOBAL">
<aura:attribute name="selectedLookUpRecord" type="sObject" default="{}"/>
<c:customLookup objectAPIName="Contact" IconName="standard:Contact"
selectedRecord="{!v.selectedLookUpRecord}" label="Contact Name"/>
</aura:application>
Lookupcmpapp.app:
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="ui:button"/>
</aura:application>
What should I give at resource attribute and How to use it?
Best Answer
Instead of using lighting component I would suggest to use : apex:inputField
But if you are wondering how to use lightning comonents in VF page below information should work for you.
You cannot use lightning components directly on the vf page, you need to create a lightning out app, and then you can add that app on VF page, in that app you can add any lighting component that you want.
Sample lightining out app code below,
extends="ltng:outApp"
enables lighting out to the app.Sample code for VF page
Your component will be rendered in the div with
id="lightning"
.Above line creates component, and sets attribute with name 'label', you can add your own component here.
Reference