0

I am trying to display 3 different picklist field values in a input form using lightning component. I am able to display the values for any one of the picklist field only. If I try to display the values for 3 picklist fields, the values are not getting displayed. Here is my code:

component:

<aura:component controller="SubscriptionCenterController" 
        implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
                    force:lightningQuickAction,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
                    lightning:isUrlAddressable,lightning:actionOverride,force:hasRecordId"
                     access="global" >
            <!-- Include Static Resource-->
            <ltng:require styles="/resource/bootstrap/css/bootstrap.min.css" 
        scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>
            <aura:attribute name="ObjectName" type="String" default="Contact" access="global"/>
          <aura:attribute name="FirstName" type="String" default="" />
            <aura:attribute name="LastName" type="String" default="" />
            <aura:attribute name="StoreList" type="List" />
            <aura:attribute name="SelectedStore" type="String" />
            <aura:attribute name="SizeList" type="List" />
            <aura:attribute name="SelectedSize" type="String" />
            <aura:attribute name="CountryList" type="List" />
            <aura:attribute name="SelectedCountry" type="String" />
            <div class="slds-page-header">
                <div class="slds-align_absolute-center">
                    <div class="slds-text-heading_large">
                        <div class="slds-m-top_xx-large">
                            Customer Subscription Center
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <aura:handler name="init" action="{!c.doinIt}" value="{!this}"/> 
              <div class="slds-size_3-of-12">
            <div class="slds-form-element__control">

                 <lightning:input label="First Name" name="firstname" type="text" required="true" value="{!v.FirstName}" />
                <br/>
                <lightning:input label="Last Name" name="lastname" type="text" required="true" value="{!v.LastName}" />
                <br/>
                <lightning:select label="Store" name="store" value="{!v.SelectedStore}">
                    <aura:iteration items="{!v.StoreList}" var="Store">
                        <option value="{!Store}" text="{!Store}"></option>
                    </aura:iteration>
                </lightning:select>
                <br/> 
                <lightning:select label="Size" name="Size" value="{!v.SelectedSize}">
                    <aura:iteration items="{!v.SizeList}" var="Size">
                        <option value="{!Size}" text="{!Size}"></option>
                    </aura:iteration>
                </lightning:select>
                <br/>
                <lightning:select label="Country" name="Country" value="{!v.SelectedCountry}">
                    <aura:iteration items="{!v.CountryList}" var="Country">
                        <option value="{!Country}" text="{!Country}"></option>
                    </aura:iteration>
                </lightning:select>
                <br/>
           <lightning:button  label="Save" onclick="{!c.savecustomerForm}" /> 
                  </div>   </div>
        </aura:component>

JS Controller:

({
    doinIt: function(component, event, helper){ 
        action.setParams({ "entityType" : component.get('v.componentString') });         
            action.setCallback(this, function(a){             
            var state = a.getState(); // get the response state             
           if(state == 'SUCCESS') {
            component.set('v.StoreList',a.getReturnValue()); 
            component.set('v.SizeList',a.getReturnValue()); 
            component.set('v.CountrtyList',a.getReturnValue()); 
            }        
           });       
            $A.enqueueAction(action); 
    },

     savecustomerForm: function(component, event, helper) {
        console.log('Create record');
        // var action = component.get("c.createRecord");
        //var contact = component.get("v.newcontact");
         var action = component.get("c.save");
        //Setting the Apex Parameter
         action.setParams({"FirstName":component.get("v.FirstName"), "LastName":component.get("v.LastName"),
                           "Store":component.get("v.Store"), "Size":component.get("v.Size"),
                           "Country":component.get("v.Country")
            });
        //Setting the Callback
        action.setCallback(this,function(response){
            var isContactexists = response.getReturnValue();
            var resultsToast = $A.get("e.force:showToast");
            //alert(a.getReturnValue());
            if(response.getState() === "SUCCESS"){
                    component.set("v.FirstName", "");
                    component.set("v.LastName", "");
                    component.set("v.Store", "");
                    component.set("v.Size", "");
                    component.set("v.Country",  "");
                    alert("The record was saved.");
            }
            else {
                resultsToast.fire();
            alert('There is an error in saving the record'); 
            }
        });
            $A.enqueueAction(action);
    }
})

Apex Controller:

   public class SubscriptionCenterController {
     @AuraEnabled
     public static List<String> getPickListValuesIntoList()
     {
       List<String> pickListValuesList= new List<String>();
        Schema.DescribeFieldResult fieldResult = Contact.Store__c.getDescribe();
         List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
         for( Schema.PicklistEntry pickListVal : ple){
            pickListValuesList.add(pickListVal.getLabel());
        }    
        return pickListValuesList;
        Schema.DescribeFieldResult fieldResult1 = Contact.Size__c.getDescribe();
                 List<Schema.PicklistEntry> ple1 = fieldResult1.getPicklistValues();
          for( Schema.PicklistEntry pickListVal : ple1){
            pickListValuesList.add(pickListVal.getLabel());
        }    
        return pickListValuesList;
        Schema.DescribeFieldResult fieldResult2 = Contact.Country__c.getDescribe();
        List<Schema.PicklistEntry> ple2 = fieldResult.getPicklistValues();
         for( Schema.PicklistEntry pickListVal : ple2){
            pickListValuesList.add(pickListVal.getLabel());
        }    
        return pickListValuesList;
    }

    @AuraEnabled   
    public static Boolean save(String Name, String FirstName, String LastName, 
                               String Store, String Size, String Country)
    {

            Contact con=new Contact();
            con.FirstName = FirstName;
            con.LastName = LastName;
            con.Store__c = Store;
            con.Size__c = Size;
            con.Country__c = Country;
            insert con;
            return true;

    }
}

Can somebody help me where I got wrong and how can I be able to display my 3 picklist fields values.

0

Your component is written to use the same values for all of your picklists:

        component.set('v.StoreList',a.getReturnValue()); 
        component.set('v.SizeList',a.getReturnValue()); 
        component.set('v.CountrtyList',a.getReturnValue()); 

while your Apex server controller accumulates all of the values into a single, flat List<String> for all three picklists.

You need to implement logic that handles the three picklists separately. That could take the form of three independent server calls (one for each picklist), or it could take the form of changing your current Apex code to return a Map<String, List<String>> that places the list of values for each picklist in a separate list, keyed on the name of the field.

Alternately, consider using <lightning:recordEditForm>, which will save you the trouble of pulling and rendering the picklists yourself along with a lot of other boilerplate code.

  • hey can you please tell me how can I implement logic that handles the three picklists separately. Can you please post some sample code if possible. I am trying to implement the logic but don't know how to do it. – satya Mar 27 '19 at 13:32
  • 1
    @satya You've basically already written the code. You just need to structure the logic a little differently. I can't implement it for you, but you're most of the way there. – David Reed Mar 27 '19 at 13:33
  • Thanks for the help. – satya Mar 28 '19 at 9:19
0

Your API Name and the Label value must be identical. So for example, if I have one value in my multi-select picklist labelled as 'Example' but the API name was 'ExampleTest' and anytime it was selected it was the only value displaying in Lightning. So once we changed the API name to match the label (now both 'Example') all of the values selected in that field will become visible.

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.