1

So I am looking to populate a picklist with values from a controller. Currently I can pass it to visualforce by passing a simple list. However, I suspect, with the SLDS it requires an iterator of sorts.

https://www.lightningdesignsystem.com/components/menus/#flavor-picklist

Controller method to return list of select option

public List<selectOption> getDates(){
  List<date> dates = new List<date>();
  dates.add(new selectoption('1/1/2016'));
  dates.add(new selectoption('1/2/2016'));
  dates.add(new selectoption('1/3/2016'));
  return dates;
}

Visualforce to consume dates

<apex:selectList size="1" id="type">
  <apex:selectOptions value="{!dates}" />
</apex:selectList>

The SLDS examples only show hard-coding

<div class="slds-dropdown slds-dropdown--left">
    <ul class="dropdown__list slds-dropdown--length-5" role="menu">
      <li class="slds-dropdown__item">
        <a href="javascript:void(0);" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option A</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="javascript:void(0);" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option B</p>
        </a>
      </li>

How can I iterate through to create these dynamic options?

5

If you want the select option to look like SLDS picklist then just use the css class on SelectOption component. Like this:

<div class="slds-form-element">
    <label class="slds-form-element__label">Countries</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <apex:selectList size="1" value="{!selectedCountry}" styleClass="slds-select">
                <apex:selectOptions value="{!countrieLst}" />
            </apex:selectList>
        </div>
    </div>
</div>

Class:

public List<SelectOption> countrieLst {get;set;}
countrieLst = new List<SelectOption>();
countrieLst.add(new SelectOption('','--None--'));
countrieLst.add(new SelectOption('India','India'));
countrieLst.add(new SelectOption('China','China'));
countrieLst.add(new SelectOption('US','US'));

Adding Images:

This is when applied to inputField:

<div class="slds-form-element">
    <label class="slds-form-element__label">Account Type</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <apex:inputField value="{!account.Type}" styleClass="slds-select slds-input slds-input--small" />
        </div>
    </div>
</div>

enter image description here

This is when applied to SelectionOption. Same code given above. enter image description here

  • The SLDS doesn't apply the correct CSS to apex:controls. I'll post a screenshot later. It only applies to standard HTML entry controls. – tjcinnamon Jul 7 '16 at 13:37
  • It get applied to apex components also. Check the reply, i edited and added the screen shots. Thanks – Jai Chaturvedi Jul 7 '16 at 22:35
  • Sorry I forgot the styleClass="slds-select". Totally worked! – tjcinnamon Jul 8 '16 at 16:19
  • although applying it to the selection option really only looks nice when with width is at 100% otherwise it keeps the arrows on the far left. – tjcinnamon Jul 8 '16 at 16:20

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.