4

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.)

5

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"));
4
  • I edited your answer slightly to also fetch the correct ID. Besides that, it totally works! Thank you!
    – Diamundo
    Jan 2 '17 at 14:03
  • @Diamundo The original value I used in my answer was more of a placeholder, but the edit is okay, too. Glad I could help!
    – sfdcfox
    Jan 2 '17 at 14:09
  • True, and it would also be possible to split it into two lines: one fetches the ID and stores it in a variable, and the other line being your (original) answer. However since I stated that the Campaign is a lookup field of my sObject, I felt this would better answer the question. I guess we're both right :)
    – Diamundo
    Jan 2 '17 at 14:11
  • @sfdcfox I'm trying to trigger click to the select box to toggle the same. So, I manually set the value again(as in your answer) inside $(window).resize(function() , but it didn't work. (That is, in short my requirement is to hide the select dropdown when a user has clicked the select box and then without selecting an option if he changes the orientation of the device). Can you please tell me why setting the previously selected value is not working(ie. it doesn't hide the dropdown) in this case?
    – SE_User
    Mar 30 '17 at 10:42
1

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.

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.