[SalesForce] Problem in a picklist – inputSelect – Lightning component

I have a picklist in a lightning component. This picklist is displaying 12 values (from 1 to 12)

Here is the picklist :

<aura:attribute name="mois_exp" type="Integer" />
<aura:attribute name="mois_values" type="Integer[]"/>

<ui:inputSelect aura:id="mois_exp" class="slds-input" value="{!v.mois_exp}">
   <aura:iteration items="{!v.mois_values}" var="val">
       <ui:inputSelectOption text="{!val}" />
   </aura:iteration>
</ui:inputSelect>

The javascript controller :

doInit : function(component, event, helper) {
    var action = component.get("c.getListOfMonths");

    //get the values of the month picklist
    action.setCallback(this, function(a) {
        var result = a.getReturnValue();
        component.set('v.mois_values', result);
    });

    $A.enqueueAction(action);
},

And the apex class getListOfMonths :

@AuraEnabled
public static List<Integer> getListOfMonths(){
    List<Integer> months = new List<Integer>();

    for(Integer i = 1; i < 13; i++){
        months.add(i);
    }
    return months;
}

The problem is that when I click the picklist to show the values, I can see the 12 value but not select one. The only value I can "select" is the first value.

How can I make the other value availables to be selected ?

Best Answer

I resolve my problem by using lightning:select tag :

<lightning:select aura:id="mois_exp" class="slds-form-element__control" name="mois_exp" label="Mois d'expiration" onchange="{!c.changeMonth}">
    <option value="" text=""></option>
    <aura:iteration items="{!v.mois_values}" var="val">
              <option value="{!val}" text="{!val}"></option>
    </aura:iteration>
</lightning:select>

Related Solutions

[SalesForce] save two records in two objects with a single save button with lightning components

Here are my recommendation:

QuestionLi Attribute is defined as simple object but when it's passed to server, you are assuming it's list of object. Update this attribute as List of object.
As a best practice, your apex method should return some value to identify, possibly String. Keep your DML in try catch block and return exception if any occurs so that you can debug properly.

public static String saveQuestions (....){
```
   try{

      insert ...

      return 'SUCCESS';

   catch(Excpetion e){ return e.getMessage();}
}
```

[SalesForce] In the dynamic table, how do you dynamically set the value for each row’s inputSelect

you have to take current row Item and then Update it then rebind to PackTag list with same Place by index, i just use Classify and field columns in below code snippet. and in your AddNewRow function, you pushing normal JSobject it shouldn't , you need to push 'sobjectType': 'GroupLabel__c' type let me know if you find any issue.

cmp

<aura:component controller="SeTesting" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes" 
        access="global" >
<aura:attribute name="pickListMap" type="map" default="{'Option1':['Child Option1','Grand Child option1'],'Option2':['Child Option1','Grand Child option1','Grand Child option2']}"/>
<aura:attribute name="parentList" type="list" default="['Option1','Option2']" />
<aura:attribute name="childList" type="list" default=""/>
 <aura:attribute name="PackTag" type="List"/>

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

<div class="slds-box">
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                    <div class="slds-truncate">S.No</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Classify">Classify</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Field">Field</div>
                </th>                    
            </tr>
        </thead>
        <tbody>               
                <aura:iteration items="{!v.PackTag}" var="item" indexVar="index">
                    <tr class="slds-text-title_caps" id="{!index}">
                        <td>
                            {!index}
                        </td>
                        <td>
                            <lightning:select aura:id="select"  name="{!index}" Class="slds-col slds-size_1-of-2 slds-p-horizontal_x-small" onchange="{! c.classifyChange }" value="{!item.ParentPicklist__c}">
                                <option value="-None-">-None-</option>
                                <aura:iteration items="{!v.parentList}" var="value">
                                    <option value="{!value}">{!value}</option>
                                </aura:iteration>
                            </lightning:select>
                        </td>
                        <td>
                            <lightning:select aura:id="select"  name="{!index}" Class="slds-col slds-size_1-of-2 slds-p-horizontal_x-small" onchange="{! c.onSelectChange }" value="{!item.ChildPicklist__c}">
                                <option value="-None-">-None-</option>
                                <aura:iteration items="{!v.childList}" var="value">
                                    <option value="{!value}">{!value}</option>
                                </aura:iteration>
                            </lightning:select>
                        </td>
                        <td>
                            {!v.body}
                        </td>
                        <td>
                            <!-- conditionally Display Add or Delete Icons if rowIndex is 0 then show Add New Row Icon else show delete Icon -->
                            <aura:if isTrue="{!index == 0}">
                                <a onclick="{!c.AddNewRow}">
                                    <lightning:icon iconName="utility:add" class="slds-icon slds-icon_small" size="small" alternativeText="add"/>
                                    <span class="slds-assistive-text">Add Icon</span>
                                </a>
                                <aura:set attribute="else">
                                    <a onclick="{!c.removeRow}" id="{!index}">
                                        <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
                                        <span class="slds-assistive-text">Delete Icon</span>
                                    </a>
                                </aura:set>
                            </aura:if>
                        </td>
                    </tr>
                </aura:iteration>

        </tbody>
    </table>
</div>
<div>
    <aura:iteration items="{!v.PackTag}" var="item" indexVar="index">
        {!item.ParentPicklist__c} --- {!item.ChildPicklist__c}
    </aura:iteration>
</div>

cmpController

({
doInit: function (component,event,helper) {       
  helper.AddgetnewObject(component);
},
AddNewRow : function(component, event, helper){
     helper.AddgetnewObject(component);
    //['Child Option1','Grand Child option1','Grand Child option2']
},
classifyChange : function(component, event, helper) {
     var pickListMap = component.get("v.pickListMap"),
         index = event.getSource().get("v.name"),
         RowItemList = component.get("v.PackTag"),
         currentrow = RowItemList[index],
         controllerValue = event.getSource().get("v.value");
    if (controllerValue != '-None-') {
         //get child picklist value
        var childValues = pickListMap[controllerValue];
        var childValueList = [];
        childValueList.push('-None-');
        for (var i = 0; i < childValues.length; i++) {
            childValueList.push(childValues[i]);
        }
        // set the child list
        currentrow.childList = childValueList;
        //component.set("v.childList", childValueList); 


    } else {
       currentrow.childList = ['-None-'];
        //component.set("v.childList", ['-None-']);

    }
    currentrow.ParentPicklist__c = controllerValue;
    RowItemList.splice(index, 1, currentrow);
    component.set("v.PackTag",RowItemList);
},
 onSelectChange : function(component, event, helper) {
     var index = event.getSource().get("v.name"),
         RowItemList = component.get("v.PackTag"),
         currentrow = RowItemList[index],
         selected = event.getSource().get("v.value");
     if(selected !== '-None-'){
         currentrow.ChildPicklist__c = selected;
         RowItemList.splice(index, 1, currentrow);
         component.set("v.PackTag",RowItemList);
     }
}

})

cmphelper

({
AddgetnewObject : function(component){
     var RowItemList = component.get("v.PackTag");
    RowItemList.push({
        'sobjectType': 'GroupLabel__c',
        'ParentPicklist__c':'',
        'ChildPicklist__c': ''
    });
    component.set("v.PackTag", RowItemList);
}
})

Best Answer

Related Solutions

[SalesForce] save two records in two objects with a single save button with lightning components

[SalesForce] In the dynamic table, how do you dynamically set the value for each row’s inputSelect

Related Topic