[SalesForce] Populate a SLDS picklist dynamically with SelectOptions

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?

Best Answer

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>

This is when applied to SelectionOption. Same code given above.

Related Solutions

[SalesForce] Lightning component with SLDS

Any action you define in your component is going to pass (component, event, helper) to the controller action. In your case, the <a> elements that you've linked to the changerTab method are going to do the exact same thing. Your elmnt argument is going to contain a reference to the component that you pasted in here, not to the tab you want to switch to.

One easy fix would be to make 3 different controller actions, one for each <a> element. Have each of those 3 controller actions call a helper method that passes in the aura:id of the tab you want to show, and utilize component.find() to locate and hide/show the appropriate tabs.

[SalesForce] Dynamically Render Toast Message With Icon

This isn't a Lightning problem, but a generic element namespace problem. You have to create the element in the correct "namespace" for this to work. Credit to this question for pointing out the problem.

Basically, the SVG and USE elements need to be created in the SVG namespace using the createElementNS methods. Also, some of the attributes had to be set via setAttributeNS in order for it to work correctly. I may have slightly overkilled, but the version below appears to be identical.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false"
           applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html lang="en">
        <head>
            <title>Demo Toast</title>
            <apex:slds />
        </head>
        <body>
            <div class="slds-scope">
                <div id="target" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <div id="messageOnPageLoad" class="slds-notify slds-notify--alert slds-theme--alert-texture slds-theme--warning" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" role="alert">
                        <span class="slds-icon_container">
                            <svg class="slds-icon slds-icon-text-default slds-icon--small slds-m-right--x-small" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
                            </svg>
                        </span>
                        <h2><span>Here is a toast message!</span></h2>
                    </div>
                </div>
            </div>
        </body>
    </html>
    <script>
        (function (D, w) {
            "use strict";
            var targetDiv = document.getElementById("target");
            w.buildToast = function (message) {
                var toast = targetDiv.appendChild(D.createElement("div"));
                toast.className = "slds-notify slds-notify--alert slds-theme--alert-texture slds-theme--warning";
                toast.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
                toast.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                toast.setAttribute("role", "alert");

                var icon = toast.appendChild(D.createElement("span"));
                icon.className = "slds-icon_container";

                var svg = icon.appendChild(document.createElementNS("http://www.w3.org/2000/svg","svg"));
                svg.setAttribute("class","slds-icon slds-icon-text-default slds-icon--small slds-m-right--x-small");
                svg.setAttribute("aria-hidden", true);

                var use = svg.appendChild(D.createElementNS("http://www.w3.org/2000/svg","use"));
                use.setAttributeNS("http://www.w3.org/1999/xlink", "href", "/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#info");

                toast.appendChild(D.createElement("h2"))
                    .appendChild(D.createElement("span"))
                    .appendChild(D.createTextNode("Here is a toast message!"));
            };
            D.addEventListener("DOMContentLoaded", w.buildToast);
        }(document, window));
    </script>
</apex:page>

Best Answer

Related Solutions

[SalesForce] Lightning component with SLDS

[SalesForce] Dynamically Render Toast Message With Icon

Related Topic