[SalesForce] How retrive the value from ui::inputSelect

I have a Lightning component with a list of the Account from Salesforce:

    <ui:inputSelect label="Account" class="form-control" aura:id="selectAccount"  onSelectChange="{!c.onSelectChange}">
        <aura:iteration items="{!v.accounts}" var="account">
            <ui:inputSelectOption value="{!account.Id}" label="{!account.Name}" />
        </aura:iteration>
    </ui:inputSelect>

It works right. How to retrive the Id of the selected account option?
I'm expecting on the onSelectChange callback to see the params, but with:

onSelectChange: function(component, event, helper) {
    console.log(event);
    console.log(event.getParams());
}

I get this output:

app.js:14666 Event {source: Component, $eventDef$: EventDef, $eventDispatcher$: undefined, $eventName$: "change", $params$: Object…}
app.js:14667 Object {}

While I'm expecting to see at least the name of the Account..

Any advice?

Best Answer

I see a few potential errors in the code. onSelectChange should be change, and value should be text.

Please try this:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="contacts" type="Contact[]"/>

<ui:inputSelect aura:id="o" label="Contacts" change="{!c.onSelectChange}">
    <aura:iteration items="{!v.contacts}" var="contact">
        <ui:inputSelectOption text="{!contact.Id}" label="{!contact.Name}" />
   </aura:iteration>
</ui:inputSelect>

And then you can use the component.find().get() pattern to retrieve the Id.

onSelectChange : function(component, event, helper) {
    var selected = component.find("o").get("v.value");
    console.log(selected);
},

doInit : function(component, event, helper) {
    // Your own implementation for loading records
    helper.getContacts(component); 
}

Here are a few docs related to ui:inputSelect:

Related Solutions

[SalesForce] Dynamic inputSelect options not showing first value

Your issue could be related to the problem mentioned here

What I did to get around this was to define all my lists in the Apex controller, like this:

First, make an inner Apex object:

public  class SelectItem {
  @AuraEnabled
  public String label {get; set;}
  @AuraEnabled
  public String value {get; set;}
  @AuraEnabled
  public String class {get; set;}
  @AuraEnabled
  public Boolean selected {get; set;}
}

Using this object, you'd run all the logic you have above in the Apex controller, outputting a list of this custom inner object.

Then, define an attribute of this type in the component:

<aura:attribute name="stageNameValues" type="CustomController.SelectItem[]" />

Then, use an iteration to define the inputselect:

<ui:inputSelect class="slds-select " value="{!v.opportunity.StageName}" updateOn="change" label="Stage" labelClass="slds-form-element__label " requiredIndicatorClass="slds-required" required="true" >
  <aura:iteration items="{!v.stageNameValues}" var="source">
    <ui:inputSelectOption text="{!source.value}" label="{!source.label}" />
  </aura:iteration>
</ui:inputSelect>

Finally, set the attribute when your getter from the Apex class returns:

cmp.set("v.stageNameValues", response.getReturnValue());

This is verified to work. Kind of a pain, I know.

[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] Dynamic inputSelect options not showing first value

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

Related Topic