function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Juan GarcíaJuan García 

Lightning table - picklist field

I have a table for create expenses. The table shows 3columns (a picklist, a decimal, and a text). I create a ui:inputSelect for the picklist. The table load the values of picklist, and save the value, but not show the data of the data base (always show --None--). How can I load the data os records??
Thanks

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

<aura:attribute name="expenses" type="Expenses__c[]"/>
<aura:attribute name="options" type="String[]" />
<aura:attribute name="selectedValue" type="String"/>

<ltng:require styles="/resource/slds_resource/assets/styles/salesforce-lightning-design-system.css?v=1" />
<div class="slds">
    <div class="slds-page-header noborderbottom" role="banner"> 
        <div class="slds-grid">
            <div class="slds-col slds-has-flexi-truncate">
                <div class="slds-media slds-no-space slds-grow">
                    <div class="slds-media__figure">
                        <lightning:icon iconName="custom:custom17" size="large" alternativeText="Indicates approval"/>
                    </div>
                    <div class="slds-media__body">
                        <p class="slds-text-title_caps slds-line-height_reset">Expenses</p>
                        <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Expenses">My expenses</h1>
                    </div>
                    <lightning:button class="slds-float_right" iconName="utility:refresh" onclick="{!c.refreshTable}" label="Refresh"/>
                    <lightning:button class="slds-float_right" iconName="utility:add" onclick="{!c.addRow}" label="Create expense"/>
                    <lightning:button class="slds-float_right" iconName="utility:clear" onclick="{!c.removeRow}" label="Delete expense"/>
                </div>
            </div>
        </div>
    </div>   
</div>

<div class="slds" style="overflow-x:auto;">
    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal">
        <thead>
            <tr class="slds-text-heading--label">
                <th scope="col" class="nobordertop" title="Type">
                    <div>Type</div>
                </th>
                <th scope="col" class="nobordertop" title="Import">
                    <div>Import</div>
                </th>
                <th scope="col" class="{nobordertop'}" title="Description">
                    <div>Description</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.expenses}" var="expenses">
                <tr>
                    <td data-label="{!expenses.PL_Expenses__c}" title="{!expenses.PL_Expenses__c}">
                        <div>
                            <ui:inputSelect aura:id="acc" required="true" value="{!expenses.PL_Expenses__c}">
                                <ui:inputSelectOption text="" label="--None--" />
                                <aura:iteration items="{!v.options}" var="ac">
                                    <ui:inputSelectOption text="{!ac}" label="{!ac}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                        </div>
                    </td>
                    <td data-label="{!expenses.Import__c}" title="{!expenses.Import}">
                        <div><ui:inputNumber class="slds-input" value="{!expenses.Import__c}"/></div>
                    </td>
                    <td data-label="{!expenses.Description__c}" title="{!expenses.Description}">
                        <div><ui:inputText class="slds-input" value="{!expenses.Description}"/></div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table> 
    <lightning:button class="slds-align_absolute-center slds-button slds-button_brand slds-m-top_small" onclick="{!c.save}" label="Save"/>
</div>

Controller and helper
doInit : function(component, event, helper) {       
    helper.getExpenses(component, helper, event);
},

//Fetch the expenses from the Apex controller
getExpenses: function(component, helper, event) {
    var action = component.get("c.getAllDesgloseCoste");
    action.setParams({opportunityId: component.get('v.recordId')});   
    //Set up the callback
    action.setCallback(this, function(actionResult) {
        component.set("v.expenses", actionResult.getReturnValue());
        this.fetchPickListVal(component, helper, event);
    }); 
    $A.enqueueAction(action);  
},


Controller - apex
@AuraEnabled
public static list<Expenses__c> getAllDesgloseCoste(Id opportunityId){
    return [SELECT Name, PL_Expenses__c, Import__c , Description__c 
            FROM Expenses__c
            WHERE Opportunity__c =:opportunityId];
}

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

User-added image
Meghna Vijay 7Meghna Vijay 7
Hi Juan,
When you select any option in selectList then it gives value of that option and i don't see it in the selectOption.
<ui:inputSelectOption label="{!ac}" value="{!ac}"/>

Hope it helps.
Thanks
 
Juan GarcíaJuan García
Value is a boolean: https://developer.salesforce.com/docs/component-library/bundle/ui:inputSelectOption/specification
The value must be "text"
I found the issue. I change the order of the functions. first "fetchPickListVal" (obtain icklist values), and second "getExpenses" (return and set the records)
Thanks
Taylor Vanwinkle 7Taylor Vanwinkle 7

@Juan Garcia,

Do you mind sharing your updated code? I have been lookig for something similar to this solution for a related list that needs its values updated and have been stumped trying to use a dataTable element. This looks like it will work much better for my need though if i can adapt it. 
 

Thanks. 

Ajay K DubediAjay K Dubedi
Hi Juan,
It will not store your value in org because you have not set selected value to any variable.
Try this code-
<ui:inputSelectOption text="" label="--None--" />
    <aura:iteration items="{!v.options}" var="ac">
        <ui:inputSelectOption text="{!ac}" label="{!ac}" value={!ac}/>
    </aura:iteration>
</ui:inputSelect>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi