Apex Code Development You need to sign in to do that
Don't have an account?
Ken Koellner @ Engageware 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?
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?
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
I'll take a look at some of the other suggestions later today.
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.
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; }