Using optgroup in lightning:select

IMG_2170.PNG

Grouped Options in Salesforce Mobile

Every coding framework/toolset has strengths and weaknesses. There are some incredibly powerful things that you can do very simply, but often times there are incredibly simple things that require more brainpower (and a lot more coding) than should really be necessary.

Unfortunately, grouping options read from force.com in a Salesforce lightning:select control falls into the latter category.

In order to achieve the grouping effect, as seen in the screenshot at right, I needed to pull data using Apex, group it client-side into an array of objects, and then loop through that array of objects in the lightning component.

In this use-case, we’re working with a custom object named Beer__c with a field named Type__c that holds our types of beer, e.g. Ale, Lager, Stout, etc.

Why beer? Because beer is both the cause and solution to all of our problems. Clearly.

Step 1: Ordering Apex Results

public with sharing class BeerContacts {

   @AuraEnabled    
   public static List<Beer__c> getBeers() {
     return [ 
       select Id,Name,Type__c,Country__c
       from Beer__c
       order by Type__c,Name
     ];
   }
}

Step 2: Group the Results into an Array of Objects

    doInit : function(component, event, helper) {
        helper.runApex(
            component,
            "c.getBeers",
            function(response) {
             
                // transform into object array
                var result = [];
                var groupName = "";
                var thisGroup = {items : []};
                for (var i=0; i<response.length; i++) {
                    if (groupName != response[i].Type__c) {
                        if (thisGroup.items.length > 0) {
                            result.push(thisGroup);
                        }
                        groupName = response[i].Type__c;
                        thisGroup = {
                            Name: response[i].Type__c,
                            items : []
                        };
                    } 
                    thisGroup.items.push({
                        Id: response[i].Id,
                        Name: response[i].Name
                    });
                    
                }
                component.set('v.beers',result);
            }
        );
    }

Step 3: Output the Array of Objects into a lightning:select

<lightning:select name="beerId"
             label="Select Beer"
             variant="label-hidden">              
  <option value="">Select Beer</option>    
  <aura:iteration items="{!v.beers}" var="thisBeerGroup">
     <optgroup label="{!thisBeerGroup.Name}">
     <aura:iteration items="{!thisBeerGroup.items}" var="thisBeer">
         <option value="{!thisBeer.Id}">{!thisBeer.Name}</option>
     </aura:iteration>
     </optgroup>
   </aura:iteration>
</lightning:select>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s