0

Working on a form that needs to get an user's input on a picklist field. I am using the force:inputField tag to bind the input field. But the physical look of the picklist field is a little off. See the screenshot1 and screenshot2 and my code below:

 <div class="slds-form-element">              
     <label class="slds-form-element__label" for="showAs">Show Time As: </label>
     <div class="slds-form-element__control slds-combobox-picklist"> 
         <force:inputField value="{!v.newEvent.ShowAs}" required="true"/>                            
     </div>
 </div>

What I want the input field to look like is this. This example uses the select tag with the select class="slds-select" and the picklist values are specified in between the option tags. Here are the codes:

<div class="slds-form-element">
    <label class="slds-form-element__label" for="select-01">Select Label</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <select class="slds-select" id="select-01">
                <option value="">Please select</option>
                <option>Option One</option>
                <option>Option Two</option>
                <option>Option Three</option>
            </select>
        </div>
    </div>
</div>

I want to be able to see the dropdown arrow and click on it to select the picklist value. Anyone here know how this can be done using the force:inputField tag?

3
  • Does your use case allow using lighting:inputField instead? You can achieve this behavior by default if you use that. – Jayant Das Apr 17 '18 at 3:58
  • lightning:inputfield would not work as I am not editing the picklist value of an existing record. To use the lightning:inputfield would require using the <lightning:recordEditForm> tag, which requires you to specify the record ID. I don't have the record ID as I am just getting input from user to create the record later. – Jason Fung Apr 18 '18 at 17:10
  • You can use recordEditForm without record id. That facilitates a create operation instead of edit. – Jayant Das Apr 18 '18 at 17:19
2

You can use lightning:select to achieve this. lightning:select comes with in-build slds applied to it. Hence you don't need to worry about the css. And it's simple to use.

1
  • Thanks for your tips, Bhawna. I used the lightning:select to create the "picklist field" look. Then call the describe class to get the list of picklist values from the ShowAs field on Event object. Then iterate the list of picklist values as my option for my lightning:select element. – Jason Fung Apr 18 '18 at 17:19
0

This is the solution that I came up with by following Bhawna's suggestion. Just want to post it out so that people who are stuck on a similar problem can have a look. Below is the code for my lightning component:

<aura:component controller="CreateAppointmentController">
<aura:attribute name="options" type="String[]" />
<aura:attribute name="selectedValue" type="String" default="Busy"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-form-element"> 
    <lightning:select name="mySelect" label="Show Time As: " value="{!v.selectedValue}">
        <aura:iteration items="{!v.options}" var="item">
            <option text="{!item}" value="{!item}" />
        </aura:iteration>
    </lightning:select>                
</div>    

Here's the code for my apex controller:

@AuraEnabled
public static List<String> getPickListValuesFromShowAs(){
    List<String> pickListValuesList= new List<String>();
    Schema.DescribeFieldResult fieldResult = Event.ShowAs.getDescribe();
    List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
    for( Schema.PicklistEntry pickListVal : ple){
        pickListValuesList.add(pickListVal.getLabel());
    }    
    return pickListValuesList;
}

Here's the code for my javascript controller:

doInit : function(component, event, helper) {
    var action = component.get("c.getPickListValuesFromShowAs");
    action.setCallback(this, function(response) {            
        var state = response.getState();
        if (state === "SUCCESS") {
            var pickListValues = response.getReturnValue();
            component.set("v.options", pickListValues);
        } 
        else {
            console.log(state);
        }
    });     
    $A.enqueueAction(action);
}

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.