I am developing a VF page using both apex and lightning tags where possible. I have been trying to create a lookup field using the code sample on the link https://www.lightningdesignsystem.com/components/lookups for the base lookup. I replaced the "for" element in label with the field name " {!sEventRequest.EventLevel__c}". The search icon isnt appearing and instead a big grey box is being displayed.

I have already add the xmlnS and xmlns:xlink to my tag, as suggested on the website (in the Getting Started - Visualforce page). My tag now looks like:

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Please advise how I can fix this issue. Ta!

  • my html tag looks like <html xmlns="w3.org/2000/svg" xmlns:xlink="w3.org/1999/xlink"> – TWA Feb 6 '16 at 11:49
  • Are you saying that you're writing a Visualforce that renders using the Lightning Design System styles? Please include the markup for your lookup field. That's definitely not the right value for the label "for" attribute (it should be the generated ID of the input HTML element, and is for assistive technology) but that shouldn't cause the icon issue. – shannonsans Feb 6 '16 at 18:35

I'm sorry to say that the code hosted at http://lightningdesignsystem.com is html and css, but there is no Javascript or Backend to drive it. They expect you to write that yourself.

You could implement the lookup functionality using angular or jQuery or you could create a true lightning component and embed it in your Visualforce page.

This is the approach I took and I have a working lookup created using this system here. There are full instructions on how to implement it there. (I know that code samples are normally expected for something like this, but I don't feel that anything other than the full code would be useful here)

Good luck.

| improve this answer | |

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.