trailhead

Create a Service Component

Typically when we think of Lightning 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 Lightning 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 Lightning 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.

Create the Lightning 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:

    @AuraEnabled        
    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){
            pickListValuesList.add(pickListVal.getLabel());
        }     
        return pickListValuesList;
    }
    

    As we call this Apex method from a Lightning 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");
            action.setParams({
                objectType: component.get("v.sObjectName"),
                selectedField: component.get("v.fieldName")
            });
            action.setCallback(this, function(response) {
                var list = response.getReturnValue();
                component.set("v.picklistValues", list);
            })
            $A.enqueueAction(action);
        }
    })
    

    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 Lightning 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">
        <option value="{!item}">{!item}</option>
    </aura:iteration>
    

    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.

retargeting