Create a Service Component


Typically when we think of Aura components, we think of an element on a page in Lightning Experience. In other words, we think of the front-end design—what the user interacts with on the page. But we can also build Aura components that don't have any front-end markup at all. But you're probably thinking, why would anyone do that? Because we can also use Aura components as reusable services—or service components.

By the end of this step you will:

  • Understand the concept of a service component.
  • Retrieve a list of picklist values.
  • Pass values between two components.

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 14:35 minute mark, in case you want to rewind and watch the beginning of the step again.)

Create the Aura component

  1. In the Developer Console, choose File > New > Lightning Component.
  2. For name, enter: PickListValues and click Submit. Notice that we didn't check any boxes because we are not going to use this component as a stand-alone component on a page. Instead, we use it as a child component of the PropertyDialog component, or as a child of any other component that needs picklist values.
  3. Add the following to the component inside the <aura:component>tags:
    <aura:attribute name="sObjectName" type="String" />
    <aura:attribute name="fieldName" type="String" />
    <aura:attribute name="picklistValues" type="Object" />
    Because this is a service component, the only thing it's going to do is store some values. In our case, we want to know the values for the Status picklist. We're going to store them as values in the <aura:attribute name="picklistValues"/>.
  4. Save the file.

Retrieve Picklist Values

  1. In the Developer Console, click File > New > Apex Class.
  2. Name the class: PickListController
  3. Add the following to the class:
    public static List<String> getPickListValuesIntoList(String objectType, String selectedField){
        List<String> pickListValuesList = new List<String>();
        Schema.SObjectType convertToObj = Schema.getGlobalDescribe().get(objectType);
        Schema.DescribeSObjectResult res = convertToObj.getDescribe();
        Schema.DescribeFieldResult fieldResult = res.fields.getMap().get(selectedField).getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        for( Schema.PicklistEntry pickListVal : ple){
        return pickListValuesList;
    As we call this Apex method from an Aura component, we need to use the @AuraEnabled and static signatures. The getPickListValuesIntoList method takes two parameters, objectType and selectedField. We pass the objectType variable as a String, so we convert the String into an Object, and then get its list of fields. Then we retrieve the list of picklist values, adding the label for each value and finally returning the list.
  4. Save the file.

Wire It Up

  1. In the Developer Console, switch back to the PickListValues component.
  2. Add controller="PickListController" access="global" to the <aura:component> tag.
  3. Add the following to the component on a new line after the aura attributes:
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  4. Save the file.
  5. Click Controller on the side navigation to add a controller to the component.
  6. Replace the code in the controller with:
        doInit : function(component) {
            var action = component.get("c.getPickListValuesIntoList");
                objectType: component.get("v.sObjectName"),
                selectedField: component.get("v.fieldName")
            action.setCallback(this, function(response) {
                var list = response.getReturnValue();
                component.set("v.picklistValues", list);
    This very simple function calls the getPickListValuesIntoList method of the Apex class that we just created, and then stores them in the picklistValues attribute.
  7. Save the file.

Add the Service Component

  1. In the Developer Console, switch to the PropertyDialog component.
  2. Add a reference to the PickListValues component following the opening <aura:component>tag:
    <aura:attribute name="picklistValues" type="Object" />
    <c:PicklistValues sObjectName="Property__c" fieldName="Status__c" picklistValues="{!v.picklistValues}" />
    When we add a child component to another Aura component, we can also set attributes contained within the child component. These values can either be explicitly defined, as we're doing here, or dynamically assigned, based on a binding to an attribute in the parent component. We set the picklistValues attribute in the child component when the values are returned by the Apex class. This value then bubbles up to attribute definition on <c:PicklistValues>, which is in turn set within the parent component. Ah, the beauty of data bindings!
  3. Replace the <option value="status">Status</option> in the <lightning:select>with:
    <aura:iteration items="{!v.picklistValues}" var="item"> 
            <aura:if isTrue="{!v.propertyRecord.Status__c == item }"> 
                <option value="{!item}" selected="selected">{!item}</option> 
                <aura:set attribute="else"> 
                    <option value="{!item}">{!item}</option> 
    Now the entries in the picklistValues attribute will be used to dynamically populate the <lightning:select>.
  4. Save the file and then refresh the property record page in your org. If all has gone well, instead of the word “Status,” the correct values show up in your Status picklist.

Well done! Now all we need to do is wire up the component to be able to save a new property record.

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities