+ Start a Discussion
Ken Koellner 7Ken Koellner 7 

lookup apex:inputField in Visualforce page in Lightning with Lightning Design System SLDS

I have a VF page that uses Lightning Design System (SLDS) to get a Lightning look-and-feel.  It works fine in Classic and it's also totally fine that it looks like Lightning in Classic.  But I have an issue with an apex:inputField tag for an sObect field that is lookup(Account).  When in Classic, the lookup icon appears next to the field and it works fine.  But when in Lightning, the icon doesn't appear and the field just acts like a text entry field and doesn't work correctly.

Anyone know if there's a way to get the regular lookup dialog from an apex:inputField tag in a VF page using SLDS when in Lighting?

I did some searching and found some public code with examples for doing lookups (and also native Lightning aura code which I do not need).  But I'd had to take what could be a single tag in Classic and have to replace it with 150 lines of custom code to get it to work in Lightning.

Anyone know the easiest solution to get it to work?

 
Alain CabonAlain Cabon

Hi Ken,

1) Effortless​:

Style Existing Visualforce Pages with Lightning Experience Stylesheets:  <apex:page lightningStylesheets="true">
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm

2) Risky and complicated: 

2.1) "Official" Salesforce (open source) Cumulus

   UTIL_FormField.component

https://github.com/SalesforceFoundation/Cumulus/blob/master/src/components/UTIL_FormField.component

   UTIL_InputField.component​
https://github.com/SalesforceFoundation/Cumulus/blob/master/src/components/UTIL_InputField.component

2.2) LexForce​: easy but some bugs.
https://github.com/Justin1108/sfdc-lexforce

2.3) SF1?
https://github.com/lkatney/SLDS-Dynamic-Lookup-Component


 

Ken Koellner 7Ken Koellner 7
Obviously using option 1 seems the easiest.  One issue I have though is I'm already using the SLDS tags and also, it's fine if the page looks like Lightning even in Classic.  I wouldn't mind having it look like classic in classic but I'm making use of Veritical Tabs provided in SLDS.   Native VF tags don't support veritical tabs.  So if I abandon SLDS, I need to figure out a different way to structure my page.

I'll take a look at some of the other suggestions later today.
Alain CabonAlain Cabon
Hi Ken,

Your question was about "lookup apex:inputField" not about Veritical Tabs?

If you want an answer for Veritical Tabs, you should create a new question.
I spent a lot of time with the lookup inputfield in Classics and Lex.
A common bug with these complicated alternatives is when you use more than one component in the same form (only the first component often just works).

These alternatives use a lot of "hacks" in JS (very risky). Even the components of Cumulus had some problems with the different versions of SF and the recent locker service. At least using the Cumulus alternative, you are sure that the problems will be solved by the Cumulus team. 

When you use LexForce or any other open source project, it is risky if you don't have the total control over the complete code (when the test code is sometimes totally missing, so that is more work for you).

With <apex:page lightningStylesheets="true">, the new problems will fall under the responsibilty of the Salesforce teams for a  "quick" fix nevertheless this option is not G.A. but Beta currently.
 
Alain CabonAlain Cabon
The native SLDS coding of VFP as you are doing is great for problems of responsive design ( <apex:page lightningStylesheets="true"> should do it also and your users are very demanding) and custom "looking" for static pages without dynamic components like lookups, multi-picklists and so on.
Craig White 17Craig White 17

Using <apex:slds/>, there is a CSS selector included that looks like

.slds-scope .slds-input-has-icon .slds-input__icon:not(button) {
    pointer-events: none;
}

Combined with the markup added by <apex:apex:inputField> for lookup fields, this CSS supresses the events on the SVG icon, resulting in the behavior you see. You can overcome this by adding a more specific selector to override the above selector and reinstate the events:

span.lookupInput div.slds-input-has-icon svg.slds-input__icon {
    pointer-events: auto;
}