0

I have created a lightning lookup component using below link

ReUsable custom Lightning component

enter image description here

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

enter image description here

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?
2

Instead of using lighting component I would suggest to use : apex:inputField

<apex:inputField value="{!object.fieldname}"/>

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.

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="ui:button"/>
</aura:application>

Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead

Sample code for VF page

<apex:page>
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:lcvfTest", function() {
          $Lightning.createComponent("ui:button",
          { label : "Press Me!" },
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>

Your component will be rendered in the div with id="lightning".

 $Lightning.createComponent("ui:button",
              { label : "Press Me!" },

Above line creates component, and sets attribute with name 'label', you can add your own component here.

Reference

| improve this answer | |
  • I have gone through this code but not sure where should place this code<aura:application access="GLOBAL" extends="ltng:outApp"> <aura:dependency resource="ui:button"/> </aura:application> . I placed this code in VF Page in Page block section but it is throwing error: Error: Unknown component aura:application – chris Jan 21 '19 at 7:52
  • You need to create new lightning app. In dev console, File -> New -> Lightning Application, and just paste the code for aura:application. – rahul gawale Jan 21 '19 at 7:54
  • @chris, I am not sure how you will get value for that lookup field from lightning component to vf page. But you have easy solution to use apex:inputField. Updated my answer, please check again. – rahul gawale Jan 21 '19 at 7:58
  • if you have created the app replace lcvfTest with your app name in vf page code, and to create component use c:yourComponentName instead of ui:button. – rahul gawale Jan 21 '19 at 11:00
  • Hi Rahul, I have added a few more comments in my question. Can you please place app and components how to use in VF page at contact lookup field? – chris Feb 1 '19 at 7:50

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.