ui:inputSelect -> select value dynamically

Question

I have a list of options, with a hardcoded standard message option (disabled), which will show if there is nothing selected. Upon clicking the list, you can manually select any option that is not the hardcoded one.

If however, after loading in the data from SalesForce, I have an ID corresponding to the option list, then I want to select that one automatically instead of the hardcoded (disabled) message option.

How do I do this?

Markup:

<aura:attribute name="item" type="CustomItem__c" />
<aura:attribute name="campaigns" type="Campaign[]" />
<ui:inputSelect aura:id="campaignID" class="slds-select">
    <ui:inputSelectOption text="" label="Select a campaign:" disabled="true" />
    <aura:iteration items="{!v.campaigns}" var="campaign">
        <ui:inputSelectOption text="{!campaign.Id}" label="{!campaign.Name}" />
    </aura:iteration>
</ui:inputSelect>

Controller code:

loadCustomItem : function(component, event, helper) {
    var action = component.get("c.getItem");
    var itemID = event.getParam("item");
    action.setParams({"itemID" : itemID});

    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            component.set("v.item", response.getReturnValue());

            //select the right campaign

        } else {
            console.log("Failed with state: " + state);
        }
    });

    $A.enqueueAction(action);
},

CustomItem__c is an sObject with a bunch of custom fields, among which a lookup to Campaign (called campaignID__c). How do I, inside the callback function, tell the inputSelect to display the option with the given ID instead of the disabled one? (I'm keeping the question generalized, as I also have to do this for other sObjects.)

Answer 1

You can set the attribute value ("v.value") to specify which option should be selected, as follows:

//select the right campaign
component.find("campaignID").set("v.value", component.get("v.item.CampaignID__c"));

Answer 2

You have to handle the logic for input select options only through JS controller. Something like this: I am assuming loadCustomItem function is called on init of the component.

Reform your setCallback to this:

var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
    component.set("v.item", response.getReturnValue());
    var itemLocal = component.get('v.item'); //have the current item locally
    var ops = []; // this will hold your inputSelectOptions
    var matched = false;
    for(var indexCampaign in campaigns) //loop through you available options
    {
        if(campaigns[indexCampaign].id == itemLocal.campaign__c) // if current record matches any of the available option
        {
            ops.push({ class: "optionClass", label: campaigns[indexCampaign].name, value: campaigns[indexCampaign].Id, selected: "true"}); //add the item with selected:true.
            matched = true;
        }
        else
        {
            ops.push({ class: "optionClass", label: campaigns[indexCampaign].name, value: campaigns[indexCampaign].Id}); //add the other ones without selected:true
        }
    }
    if(!matched) // if none was matched, add the default option.
    {
        ops.push({ class: "optionClass", label: "Select a campaign:", value: "", selected: "true"});
    }
    component.find("campaignID").set("v.options", opts);//bind the options.

} else {
    console.log("Failed with state: " + state);
}

In your component, change the inputSelect tag to this:

<ui:inputSelect label="Select me:" class="slds-select" aura:id="campaignID"/>

This is not a compiled code but will give you a rough idea how you need to proceed.