0

I am very new to Aura component and Salesforce, I am trying to have a drop down which allow the user to pick from the list. the values of the list come from sobject. I looked into many online examples on how to do the LIghtning:Select, but I always get undefined for the selected value. Can anyone help me to figure out how?

---- aura component code ---

<div>
    <lightning:select aura:id="lstProjectEpic" name="lstProjectEpic" label="Project Epics"    >
  <aura:iteration items="{!v.lstProjectEpic}" var="epic">
         <option value="{!epic.Name}" selected="{!epic.selectedValue}" > {!epic.Name}</option>
   </aura:iteration>
  </lightning:select>
</div>

---- in the controller i have this code to get the selected value, and then pass it as the parameter to the Apex code method ---

    var selectedEpic =component.find("lstProjectEpic").get("v.value"); 
     console.log("selected Project Epic " + selectedEpic);

Console log shows the value is always undefined. Do i need to do anything extra?

I also want to set the Select a default value when the page is first loaded and then when the value is selected, it calls the apex codes to retrieve and display the data based on the selected option and display the data back. I don't know how to set default value either. I put such action in the init handler. Please advise.

---- updated

I realized the lightning:select cannot be used for multi options. I changed to use DualListBox. I tried to reload the page with the list of projects based on the selected criteria, so i put it the handleChange event, and call the helper which will set the parameter of the apex code using the selected values from the duallistbox, and then page gets reloaded with new list of projects. I am not quite sure how to pass the selected values to the apex code and where to set the page reload. I got helper.getProjectAndTasks(component, event, helper) in the handleChange event.

---Aura Component code ---

  <aura:attribute name="options" type="List" default="[]"/>
<aura:attribute name="values" type="List" default="[]"/>



<lightning:dualListbox name="multipleOptions"  
                       label= "Departments" 
                       sourceLabel="Available" 
                       selectedLabel="Selected" 
                       options="{!v.options}" 
                       value="{!v.values}" 
                       onchange="{! c.handleChange }"/>

---- controller ---

({ doInit : function(component, event, helper) { helper.getProjectAndTasks(component, event, helper); // helper.getNotes (component, event, helper); // helper.getProjectEpics(component, event, helper);

 //  helper.getNewEpicValue (component,event,helper);
    helper.getUserProfile(component, event, helper);
    helper.getDepartments(component, event, helper); 
},

handleChange: function (cmp, event) {
    // This will contain an array of the "value" attribute of the selected options
    var selectedOptionValue = event.getParam("value");
   // alert("Option selected with value: '" + selectedOptionValue.toString() + "'");

    console.log("Option selected with value: '" + selectedOptionValue.toString() + "'"); 

    helper.getProjectAndTasks(component, event, helper);
}

})

--- helper ---

({ getProjectAndTasks : function(component, event, helper) {

            var selectedOptionValue = event.getParam("value");

      var   action = component.get('c.getProjectWithTaskAndNotesByEpic');
         action.setParams({ "Departments" : selectedOptionValue });


            action.setCallback(this,function(response)
                       {
                           var state= response.getState();
                           if(state == "SUCCESS")
                           {
                               console.log('reponse : ' + response.getReturnValue());
                               var proj = response.getReturnValue();



                               component.set('v.lstProject',response.getReturnValue());
                           }
                       });
                       $A.enqueueAction(action);
},
getDepartments : function  (component, event, helper){

                var action = component.get('c.getDepartments');
            action.setCallback(this,function(response)
                       {
                           var state= response.getState();
                           if(state == "SUCCESS")
                           {
                                var departments =response.getReturnValue();
                               console.log('Departments are : ' + departments);                         
                                var items =[];
                               for(var d in departments)
                               {
                                             var item = {
            "label":  departments[d] ,
            "value":  departments[d]   
        };
                                               items.push(item);
                               }
                               component.set('v.options',items);

                           }
                       });
                       $A.enqueueAction(action);    


}

})

--- apex controller ---

@AuraEnabled
public static List<String> getDepartments(){
           List<department__c> departments = new List<department__c>();
        departments = [select  name  from  department__c  ]; 
    System.debug(departments.size());
    List<String> deptName = new List<String>();
    for(department__c d : departments){
        deptName.add(d.Name);
    }
    return  deptName ;
}

public static List<ProjectWrapper> getProjectWithTaskAndNotesByEpic( ){

------logic to pull the proejct related coe }

0

you should consider using a change handler instead as pointed out in the documentation:

component.cmp

<aura:component>
    <aura:attribute name="status" type="String" default="open"/>
    <aura:handler name="change" value="{!v.status}" action="{!c.handleChange}"/>
    <lightning:select aura:id="select" name="select" label="Opportunity Status" value="{!v.status}">
        <option value="">choose one...</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
        <option value="closedwon">Closed Won</option>
    </lightning:select>
    <lightning:button name="selectChange" label="Change" onclick="{!c.changeSelect}"/>
</aura:component>

controller.js

handleChange: function (cmp, event, helper) {
    //Do something with the change handler
    alert(event.getParam('value'));
}

and for future reference, feel free to refer to the official documentation for examples and component usage. =)

  • I did refer to the document and the iteration part, there is no onchange handler. I have the init handler which initializes the list of the option from sobject. and i can select, but just the selected value is not being passed to the controller. – XL Zhang Jul 21 at 1:40
  • lighgtning:select has no value attribute, hence the undefined - consider using the documented approach – glls Jul 21 at 3:22
  • lighgtning:select does have value attribute – salesforce-sas Jul 21 at 3:31
  • not in the Op's code - in the sample snippet i posted it is there – glls Jul 21 at 3:47
0

As you didnt post the JS code to show how you are setting the array of epics, I can suggest below:

Use below attribute

<aura:attribute name="selectedEpic" type="String" />

Now use this as value in select

<lightning:select aura:id="lstProjectEpic" value="{!v.selectedEpic}" name="lstProjectEpic" label="Project Epics" >

You can get the selected value by:

console.log("selected Project Epic " + component.get("v.selectedEpic"));

For your understanding:
1. selected in option is a boolean, so whichever value u pass as true will be selected by default. For example, in below code option "asd" will be selected by default.

component.set("v.lstProjectEpic",[
            {Name:'qwe'},{Name:'asd',selectedValue:true},{Name:'zxc'}
        ]);

2. component.find("lstProjectEpic").get("v.value") should have worked. It might be the case that you are trying to get the value even before its selected - as you are not using change handler. You can post full code here for better understanding.

  • Thank you. Because i need to do multi select so I changed to use DualListBox instead. Now I can get to see the selected values in the controller, but i am not quite sure how to pass the selected values to Apex and then reload the page. I have Apex code to preload the page with a list of projects, based on the selected epics, the page should call that Apex code again with parameter (the selected epics) and reload the page with the new list of projects. Let me edit my original question to post the controller there. – XL Zhang Jul 26 at 14:23
0

I just realized that I missed the event parameter in my call to the Helper in handleChange.

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.