0

I'm developing lightning components inside visualforce pages using slds styling. My requirement is to display a input look-up field inside a dialog box.

Lightning Component:

<aura:component>
 <aura:attribute name="lookUpMe" type="contact" default="{sobjectType:'Contact'}"/>
    <div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 id="header43" class="slds-text-heading--medium">Modal Header</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <force:inputField value="{!v.lookUpMe.AccountId}"/>
            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button--neutral">Cancel</button>
                <button class="slds-button slds-button--brand">Save</button>
            </div>
        </div>
    </div>
    <div class="slds-backdrop slds-backdrop--open"></div>
</aura:component>

Lightning App

<aura:application extends="ltng:outApp" access="Global">
   <aura:dependency resource="c:LightningTest"/>
</aura:application>

Visualforce Page

<apex:page sidebar="false" showHeader="false" standardStylesheets="false">
    <apex:includeLightning />
    <div id="lightningComponent">
      <script>
        $Lightning.use("c:LightningTest2", function(){
            $Lightning.createComponent("c:LightningTest",
                                        {},
                                        "lightningComponent",
                                         function(cmp, status, errorMessage)
                                         {
                                            if(status == "SUCCESS")
                                            {
                                                console.log('component Created');
                                            }
                                            else if(status == "ERROR")
                                            {
                                                console.log("Error: "+ errorMessage);
                                            }
                                         }
                                      );    
        });
        </script>


    </div>
</apex:page>
  • does it work if you display it outside of a slds modal? does it work if you display it outside of a VF Out container? please help us narrow down the problem with a minimal reproduction. – Christian Carter Feb 21 '17 at 0:17
1

All other things (code not shown) being equal and working

You are forgetting the value provider

<force:inputField value="{!v.lookUpMe.AccountId}"/> 

Notice the v.

  • Oh, that's my bad Eric. Sorry, I'll update the question. But it still isn't working inside a modal dialog though. Are you able to get it inside a modal? – sam_s Feb 21 '17 at 0:57
  • Are you using lightning out? Do you have an app that defines the component? We need a lot more information. I do not use force.inputField but it is not in beta so it should work just fine. ui and lightning work just fine for me though – Eric Feb 21 '17 at 1:00
  • @sam_s - I just threw it in a VF modal I was using and it is not showing up for me either....but then again, it does not show up in the lightning component either so.... – Eric Feb 21 '17 at 1:05
  • Thanks for checking. If you look at the HTML markup inside your browser dev console, you don't see anything. Do you think that's a bug? Probably I should go with custom look-up component, which will be adding lot of development effort. – sam_s Feb 21 '17 at 1:09
  • @sam_s - Correct, no markup at all....Sorry I could not be of any more help except confirmation I can replicate your scenario – Eric Feb 21 '17 at 1:10

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.