0

Attempting to get this example to work on my own visualforce page. The example is pulled from this link: https://www.lightningdesignsystem.com/components/lookups/. Is Salesforce using a JavaScript file on the backend here render this example? When I attempt to copy it in, I resolved the compile errors due to the xlink ref not being set up right, but trying to get it to render the way it does on the slds site is proving harder than a mere copy and paste. What am I missing?

<apex:page showHeader="false" docType="html-5.0" sidebar="false" standardStylesheets="false" lightningStylesheets="true">
    <!-- Begin Default Content REMOVE THIS -->
    <apex:slds/>
    <!-- <c:HB_BS_MenuItems/> -->

    <div class="slds-form-element">
        <label class="slds-form-element__label" for="combobox-id-12" id="combobox-label-id-130">Relate To</label>
        <div class="slds-form-element__control">
            <div class="slds-combobox_container">
                <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click">
                    <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                        <input type="text" class="slds-input slds-combobox__input" id="combobox-id-12" aria-autocomplete="list" aria-controls="listbox-id-9"
                            aria-expanded="false" aria-haspopup="listbox" autoComplete="off" role="combobox" placeholder="Search..."
                        />
                        <span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
                            <svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                                <!-- <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use> -->
                            </svg>
                        </span>
                    </div>
                    <div id="listbox-id-9" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox">
                        <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                            <li role="presentation" class="slds-listbox__item">
                                <div id="option1" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
                                    <span class="slds-media__figure slds-listbox__option-icon"></span>
                                    <span class="slds-media__body">
                                        <span class="slds-truncate" title="Burlington Textiles Corp of America">Burlington Textiles Corp of America</span>
                                    </span>
                                </div>
                            </li>
                            <li role="presentation" class="slds-listbox__item">
                                <div id="option2" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
                                    <span class="slds-media__figure slds-listbox__option-icon"></span>
                                    <span class="slds-media__body">
                                        <span class="slds-truncate" title="Dickenson plc">Dickenson plc</span>
                                    </span>
                                </div>
                            </li>
                            <li role="presentation" class="slds-listbox__item">
                                <div id="option3" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
                                    <span class="slds-media__figure slds-listbox__option-icon"></span>
                                    <span class="slds-media__body">
                                        <span class="slds-truncate" title="Edge Communications">Edge Communications</span>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</apex:page>
2

The SLDS examples are meant to be universally applicable, rather than being tied to a specific framework. This means that translations to a specific platform will be necessary. For Visualforce, this means you'll need some JavaScript, as applicable, and you also need to use HTML5. This is explained in the docs.

The Lightning Design System (SLDS) includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard, and utility icons.

To use SVG spritemap icons in your Visualforce page, add the attributes xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" to the <html> tag.

<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
  <svg aria-hidden="true" class="slds-icon">
>      
    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
  </svg>
   <span class="slds-assistive-text">Icon Assistive Text</span>

</span>

Since the icon is standalone and carries meaning, we placed it inside an outer span with the slds-icon_container class.

svg, use, xlink:href, etc are all standard web technologies. To get SVG to work, you need to start your page off like this:

<apex:page applyBodyTag="false" applyHtmlTag="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>...</head>
    <body>...</body>
  <html>
</apex:page>

Instead of using the svg versions, you can also just use a simple img tag. See this Q&A (and others) on accessing the png versions of the images. The Q&A linked here includes a full demo of what you're trying to do.

0

SLDS blueprint are non-functional wireframes. they are simply guidelines.

everything revolving around logic would have to be implemented with JS to make them actually work. this is obviously not provided in the SLDS blueprints.

as per the SVG components in the markup, I haven't used them in Visualforce, but, you can in lwc use them as follows:

<svg class="slds-icon" aria-hidden="true">
     <use xlink:href="/_slds/icons/standard-sprite/svg/symbols.svg#user"></use>
  </svg>

or use lighting-icon

fyi, just found: Use SLDS Icons in Visualforce

1
  • It's odd though that the picklist values examples they have do work. They seem to be identical. Obviously to make it dynamic you will need JS. Just trying to figure out how to get the drop down of accounts to display on a vf page the way their demo does without JS.
    – thinker
    Jan 14 at 21:46

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.