1

I'm working on a lightning app with variety of questions that the user answers by selecting an option from a ui:inputSelect component and then saves their answers to a field on my object. I have save working just fine, but when someone opens up the app again, the picklist defaults to the first value in the list instead of the selected value.

In my init function, I have a line where I find the value of the field that I want to retrieve, store it in a variable called 'test' and am able to log the value into my console. I just don't quite understand how to then pre-select my picklist with the value from this field.

I followed this tutorial in the documentation to get the general functionality of the list working and saving, but am not sure what steps to take to pick the selected value from the picklist on load. Here is the code I have so far:

edit I adjusted my init function to set the value instead of the text attribute on my component, but it's still defaulting to the first value in the drop-down instead of the correct value.

sparkAssessment.cmp

 <ui:inputSelect aura:id="inputAudiencePersona01" change="{!c.onAudiencePersona01Change}">
                    <ui:inputSelectOption text="0" label="N/A"/>
                    <ui:inputSelectOption text="1" label="Strongly Disagree"/>
                    <ui:inputSelectOption text="2" label="Disagree"/>
                    <ui:inputSelectOption text="3" label="Neutral"/>
                    <ui:inputSelectOption text="4" label="Agree"/>
                    <ui:inputSelectOption text="5" label="Strongly Agree"/>
    </ui:inputSelect>

 <ui:outputText class="result" aura:id="resultAudiencePersona01" value="{!v.assessments.Maturity_Audience_Persona_01__c}" />

 <ui:button class="form-control slds-m-bottom--x-large" aura:id="button" label="Save My Answers" press="{!c.save}"/>

sparkAssessmentController.js

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

         action.setParams({
             "assessmentId": component.get("v.recordId")
         });

    // Register the callback function
    action.setCallback(this, function(data) {
        component.set("v.assessments", data.getReturnValue());

        //Get the value of the object field
        var test = component.get("v.assessments.Maturity_Audience_Persona_01__c");

        component.find("inputAudiencePersona01").set("v.value", test);

        console.log(test);
        console.log("Init ran");
    });

    // Invoke the service
    $A.enqueueAction(action);

}, 
save : function(component, event, helper) {

    var action = component.get("c.saveAssessment");
    var assessments = component.get("v.assessments");  
    var toastEvent = $A.get("e.force:showToast");

    action.setParams({"assessment": assessments});
    $A.enqueueAction(action);

    toastEvent.setParams({
        "title": "Success!",
        "message": "The record has been updated successfully."
    });
    toastEvent.fire();

},  

     onAudiencePersona01Change: function(cmp) {
          var selectCmp = cmp.find("inputAudiencePersona01");
          var resultCmp = cmp.find("resultAudiencePersona01");
          resultCmp.set("v.value", selectCmp.get("v.value"));
})
  • I'm wondering if I should be loading the values for the list dynamically instead of doing it manually. Pretty new to lightning and I've been digging through documentation but it's unclear at times the best route to take. Thanks in advance for the help. – Lindsay Lee Siovaila Jun 27 '16 at 16:56
  • can you put this code : console.log(typeof test == 'string'), below the init ran log and check whether it returns true or false? – Praveen Jun 27 '16 at 17:14
  • @Praveen logging that out returns a statement of false – Lindsay Lee Siovaila Jun 27 '16 at 17:16
  • ok,i found the issue.I'll update my answer – Praveen Jun 27 '16 at 17:16
  • Lindsay Lee, i have updated the answer.Let me know whether, it solves your issue or not. – Praveen Jun 27 '16 at 17:24
2

you need to set the component's value instead of text attribute,like this:

component.find("inputAudiencePersona01").set("v.value", test);

-Update-

Looks, like the variable test is a Number instead of String datatype, but ui:inputSelect expects the value attribute to be of String type. So all you need to do is, convert the value to String type:

component.find("inputAudiencePersona01").set("v.value", test.toString());
  • Thanks for the quick reply @Praveen. I edited my controller to set the component's value instead of the text attribute, but it still defaults to the first value when the drop-down loads. – Lindsay Lee Siovaila Jun 27 '16 at 17:03
  • thanks for the help. That worked perfectly! Didn't realize ui:inputSelect expects the value attribute to be a String. That makes so much more sense why my value wasn't being selected on load. Thanks! – Lindsay Lee Siovaila Jun 27 '16 at 18:35
1

You can set the value in the ui:input tag itself, like this:

<ui:inputSelect aura:id="inputAudiencePersona01" change="{!c.onAudiencePersona01Change}" value="{!v.test}">
  • Thanks for the help. This seems like a good route to take, although when I tried this it didn't result in the drop-down loading with the selected value. The value is available and I can render it on my page, but I'm unable to make the list select the correct option. – Lindsay Lee Siovaila Jun 27 '16 at 17:13

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.