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>
sam_s
  • 966
  • 3
  • 14
  • 30
  • 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 00:17

1 Answers1

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.

Eric
  • 54,152
  • 11
  • 100
  • 195
  • 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 00: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 01: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 01: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 01: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 01:10
  • @sam_s - maybe this? http://salesforce.stackexchange.com/questions/64580/lightning-how-to-use-forceinputfield – Eric Feb 21 '17 at 01:10