[SalesForce] Unable to display the multiple picklist field values in lightning component

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.

Best Answer

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.

Related Solutions

[SalesForce] Visualforce dynamic sObject table column value formatting

So I made a Map fieldTypeMap and a component to handle the date/datetime format

Here is what I did, maybe it will be usefull for someone else.

Controller

I added the map as an attribute of my inner class into the controller:

// header/type mapping
public Map<String,String> headerTypeMap {get;set;}

I initialize it at the end of the constructor, thanks to this.headers (array of string header/field name), after the queries, like this:

        // calculation :
        runQueries();

        // mapping
        this.headerTypeMap = new Map<String,String>();
        for(String field : this.headers){
            this.headerTypeMap.put(
                field,
                Schema.getGlobalDescribe().get(objType).getDescribe().fields.getMap().get(field).getDescribe().getType()+''
            );
        }

Visualforce component

Because I often need to format date and datetime I thought it could be a good idea to create a formating component So I made a quick and dirty one:

<apex:component controller="FormatedValueController">
<apex:attribute name="dateValue" 
    type="Date" 
    assignTo="{!inputDateValue}"
    description="input value to formatTodoBlock__c record that contains data" 
/>
<apex:attribute name="datetimeValue" 
    type="Date" 
    assignTo="{!inputDateTimeValue}"
    description="input value to formatTodoBlock__c record that contains data" 
/>

{!formatedvalue}

Controller:

public class FormatedValueController {
    public Date     inputDateValue {get;set;}
    public Datetime inputDateTimeValue {get;set;}

    public String getFormatedValue(){
        String formatedValue = '';
        formatedValue += inputDateValue == null ? '' : inputDateValue.format();
        formatedValue += inputDateTimeValue == null ? '' : inputDateTimeValue.format();
        return formatedValue;
    }
}

And a quick&dirty test class too (for code coverage only):

@isTest
global class FormatedValueController_test{
    static testMethod void FormatedValueController() {
        FormatedValueController c = new FormatedValueController();
        Test.startTest ();
        c.getFormatedValue();
        Test.stopTest();
    }
}

100% you-hou ;)

And finally ...

Main Component

Oddly I need to use "{!todoBlock.headerTypeMap[header]}" everywhere, where todoBlock is the instance of my innerclass and header the var of repeat on headers attribute (table with a dynamic number of columns).

I wanted to use an apex variable for each header, kind of:

<apex:variable var="type" value="{!todoBlock.headerTypeMap[header]}" />

but for an unknown reason it just display the last header value in every loop. For example if I have DATE, DATETIME, STRING, it displays STRING, STRING, STRING. Not a big deal to use the full code, it is just less readable.

So here it is :

<apex:outputLabel rendered="{!todoBlock.headerTypeMap[header]=='DATETIME'}">
    <c:FormatedValue datetimeValue="{!rec[header]}"/>
</apex:outputLabel>

<apex:outputLabel rendered="{!todoBlock.headerTypeMap[header]=='DATE'}">
    <c:FormatedValue dateValue="{!rec[header]}"/>
</apex:outputLabel>

<apex:outputLabel rendered="{!NOT(AND(todoBlock.headerTypeMap[header]=='DATETIME',todoBlock.headerTypeMap[header]=='DATE'))}">
    {!rec[header]}
</apex:outputLabel>

[SalesForce] get values in lightning:input with $A.createComponents

In order to bind to something dynamically, you need a reference. Here is a very basic, no-frills, slightly buggy implementation that demonstrates that this basically works.

Notice how I use component.getReference to dynamically link to a field. Also notice how I can bind to the same field twice, which literally lets me modify the same field more than once in real-time, just to prove that they are real references.

With a little more error checking and fact-gathering, this could indeed be a dynamic form with some basic describe data, etc. Notice how I do not use aura:id at all. I simply bound all the fields to a common object, and I could get and retrieve the values at will (in this case, demonstrated through Object.keys). I could also bind this object to, say, a force:recordData to dynamically save the data back to the server, or send it through a server action in Apex.

<aura:application extends="force:slds">
    <aura:attribute name="accountRecord" type="Account" default="{ 'sobjectType': 'Account' }" />
    <aura:attribute name="edits" type="Aura.Component[]" />
    <aura:attribute name="fieldName" type="String" />
    <aura:attribute name="output" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    {!v.output}

    <hr />

    {!v.edits}

    <ui:inputText value="{!v.fieldName}" />
    <ui:button press="{!c.addField}" label="Add" />
    <br/>
    <ui:button press="{!c.display}" label="Show Data" />
</aura:application>

({
    init: function(component, event, helper) {
        component.set("v.edits", []);
    },
    addField: function(component, event, helper) {
        var field = component.get("v.fieldName"), 
            obj = component.get("v.accountRecord");
        obj[field] = "";
        component.set("v.accountRecord", obj);
        $A.createComponent(
            "lightning:input", {
                value: component.getReference("v.accountRecord."+component.get("v.fieldName")),
                label: component.get("v.fieldName"),
                type: "Text"
            },
            $A.getCallback(function(newCmp, status, error) {
                var edits = component.get("v.edits");
                edits.push(newCmp);
                component.set("v.edits", edits);
            })
        );
    },
    display: function(component, event, helper) {
        var obj = component.get("v.accountRecord");
        var results = [];
        Object.keys(obj).forEach(function(key) { results.push(key+":"+obj[key])});
        component.set("v.output", results.join('\n'));
    }
})

Here's a demo of me dynamically binding stuff:

Best Answer

Related Solutions

[SalesForce] Visualforce dynamic sObject table column value formatting

[SalesForce] get values in lightning:input with $A.createComponents

Related Topic