1

I wanted to create a picklist for my form using SLDS. There's probably no difference between SLDS select and SLDS picklist but I wanted to use picklist this time. I found the example here: https://www.lightningdesignsystem.com/components/picklist/ but for a picklist with 3 options, should the code be that long? I'm new to salesforce. Can someone give a very basic code for SLDS picklist that I can play around with? Some tutorials where I can select more than 1 option.

By the way, select has 2 triangle pointing up and down on its rightmost part while picklist has 1 triangle pointing down.

2
  • Is your purpose to put this in to a lightning component, Visualforce page, something else? What's the context for what you're trying to do?
    – sfdcfox
    Oct 9 '18 at 2:04
  • @sfdcfox I'm trying to use it to a lightning component. Like this one screencast.com/t/hRwBJRligg
    – cookie
    Oct 9 '18 at 2:07
2

Answer for both question and comment on @glis answer:

As other explained: SLDS is used only for styling. There are already ready to use components that are styled with SLDS and you only need to add markup and eventually some logic.

Currently you have (or at least I found only those) 3 ready to use options:

lightning:select

Component:

<aura:component>
    <lightning:select aura:id="select" name="select" label="Select a pie" onchange="{! c.onChange }">
        <option value="">choose one...</option>
        <option value="apple">apple</option>
        <option value="pumpkin">pumpkin</option>
        <option value="cherry">cherry</option>
        <option value="blueberry">blueberry</option>
        <option value="pickle">pickle</option>
    </lightning:select>
</aura:component>

Controller:

({
    onChange: function (cmp, evt, helper) {
        alert(cmp.find('select').get('v.value') + ' pie is good.');
    }
})

lightning:combobox (which SHOULD have already ready to use multiselect functionality and I don't have a clue why SFDC released that component without implementing such functionality).

Component:

<aura:component>
    <aura:attribute name="options" type="List" default="[
    {'label': 'New', 'value': 'new'},
    {'label': 'In Progress', 'value': 'inProgress'},
    {'label': 'Finished', 'value': 'finished'},
    ]"/>

    <lightning:combobox name="progress" label="Status" value="inProgress" placeholder="Select Progress" options="{! v.options }" onchange="{! c.handleChange }"/>

</aura:component>

Controller:

({
    handleChange: function (cmp, event) {
        // This will contain the string of the "value" attribute of the selected option
        var selectedOptionValue = event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue + "'");
    }
})

lightning:dualListbox (with this you can fulfill requirement of multiselecting options)

Component:

<aura:component>
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]"/>

    <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           onchange="{! c.handleChange }"/>

</aura:component>

Controller:

({
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue.toString() + "'");
    }
})

Finally I found this blogpost which shows how to create multiselect picklist. But if you're only starting with lightning components I would recommend to use something that already ready to use and do not need any maintenance.

Also I would recommend Lightning Component Library from which I took those examples. Using this documentation you can learn a lot. It have list of all ready to use component with documentation and examples.

And last but not least as in previous answer you can use ui:inputSelect with multiple="true" parameter which will allow you to use multiselect picklist but it's not styled as you want.

2
  • If someone is downvoting, can this person explain why? So my answers would be higher quality in future Oct 9 '18 at 13:17
  • Upvote from me since you linked my blog post :) Oct 12 '18 at 3:57
0

Other than the SLDS Blueprints (which is actually a good place to start or get code of components with slds styling) there is also the lightning component reference guide which has code snippets, here is the lightning:Select which in its most basic form, looks something like this:

<aura:component>
<lightning:select name="select1" label="How many tickets?" required="true">
    <option value="">choose one...</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</lightning:select>
</aura:component>

note that components in the lightning namespace lightning:* automatically apply SLDS styling to the component it renders.

if you need multiple selection functionality, the SLDS blueprints have all the necessary explanation for achieving the functionality:

Multiple selections

3
  • is it possible to transform that piece of code to allow multiple selection?
    – cookie
    Oct 9 '18 at 3:10
  • 1
    multiple select isn't available for lightning:select
    – cookie
    Oct 10 '18 at 0:49
  • closest thing is the lighninig:combobox functionality wise, styling wise, its not even close to what you want
    – glls
    Oct 10 '18 at 0:58
0

You can use lightning:select or ui:inputSelect tags. SLDS is just styling and HTML. Use the Lightning framework tags where you can.

Component:

<aura:attribute name="contactLevel" type="String[]" default="Primary Contact, Secondary Contact, Other"/>
<ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
    <aura:iteration items="{!v.contactLevel}" var="level">
         <ui:inputSelectOption text="{!level}" label="{!level}"/>
    </aura:iteration>
</ui:inputSelect>

Controller:

onSelectChange : function(component, event, helper) {
    var selected = component.find("levels").get("v.value");
    //do something else
}

The code sample is from https://developer.salesforce.com/docs/component-library/bundle/ui:inputSelect/documentation. It's a good place to find samples and documentation for the aura framework.

For multiple selection you can use

<ui:inputSelect multiple="true">

The ui tags in my example don't have the Lightning styling, but the equivilent lightning tags do.

1

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.