I have been working on Aura (Lightning) components for last 2 years and the common issue with the Dependent picklist which I found while developing an Aura (lightning( component is how to render them on the basis of the record’s recordType. Salesforce has provided an amazing User Interface API, which Lightning Experience uses to get data and metadata from Salesforce in a single response. We can also leverage UI API to solve the dependent pick list problem.

UI API has provided this batch resource to get the values for all the picklist fields of a specific record type: GET /ui-api/object-info/${objectApiName}/picklist-values/${recordTypeId}
OR
To get the values for a single picklist, make a request to :GET /ui-api/object-info/{objectApiName}/picklist-values/{recordTypeId}/{fieldApiName}

As per my experience adding a picklist element in lightning component is complicated part in the development, and it’s tricky to build a user interface for dependent picklist fields, but User Interface API makes it easier. The values of a dependent picklist field are filtered based on a selection in another picklist or checkbox (called the controlling field) specific to the record types.

Dependent picklists exist in a field dependency tree that shows a hierarchy of controlling and dependent fields. Each node in the tree can have any number of child nodes. To build UI, you need to know the complete hierarchy.



Independent Picklist Values or Controlling Picklist : To determine whether a picklist is independent, If the {Field}.controllingFields property is empty, the picklist is independent.

NOTE: If the controlling field is protected by field-level security (FLS), it doesn’t appear in the controllerValues property.

Dependent picklists : If a picklist is dependent, its controllerValues property lists the values and indexes of its controlling field (except when the immediate controlling field is protected by FLS). The indexes are used in the validFor property to indicate which controlling field values map to which picklist value.
For example, in controllerValues, Italy has index 5. In the values.validFor property, you see that Rome is valid for index 5. To populate a picklist in the UI, use the field’s label and value properties.

Get Values for a Picklist Field

If a field’s dataType property is equal to Picklist or MultiPicklist, use this resource to get its values.Resource

• objectApiName—The API name of a supported object.
• recordTypeId—The ID of the record type.
• fieldApiName—The API name of the picklist field on the object.

Independent Picklist Values or Controlling Picklist : To determine whether a picklist is independent, If the {Field}.controllingFields property is empty, the picklist is independent.

NOTE: If the controlling field is protected by field-level security (FLS), it doesn’t appear in the controllerValues property.

Dependent picklists : If a picklist is dependent, its controllerValues property lists the values and indexes of its controlling field (except when the immediate controlling field is protected by FLS). The indexes are used in the validFor property to indicate which controlling field values map to which picklist value.
For example, in controllerValues, Italy has index 5. In the values.validFor property, you see that Rome is valid for index 5. To populate a picklist in the UI, use the field’s label and value properties.

"Cities__c" : {
      "controllerValues" : {
        "Australia" : 0,
        "Brazil" : 1,
        "China" : 2,
        "Colombia" : 3,
        "France" : 4,
        "Italy" : 5,
        "Mexico" : 6,
        "New Zealand" : 7,
        "Nigeria" : 8,
        "Senegal" : 9,
        "South Korea" : 10,
        "US" : 11
      },
      "defaultValue" : null,
      "url" : "/services/data/v45.0/ui-api/object-info/account/picklist-values/012000000000000AAA/Cities__c",
      "values" : [ {
        "attributes" : null,
        "label" : "Cali",
        "validFor" : [ 3 ],
        "value" : "Cali"
      }, {
        "attributes" : null,
        "label" : "Chicago",
        "validFor" : [ 11 ],
        "value" : "Chicago"
      }, {
        "attributes" : null,
        "label" : "Dakar",
        "validFor" : [ 9 ],
        "value" : "Dakar"
      }, {
        "attributes" : null,
        "label" : "Lagos",
        "validFor" : [ 8 ],
        "value" : "Lagos"
      }
}

I have created a sample lightning component which will help you to understand the underlaying process. In the lightning component I used the UI API and for passing the user’s session in the API call, I used a VF page approach. You can go through another post which explains the concept of using session Id through a VF page and which is here. Session Id in lightning component using a Visualforce Page

If you go through the whole code base you will found that we are passing the record type in the UI API call and the dependent field API Name. Based on the response, we are a creating a map of controlling value and dependent values.

Preview

I hope this article will help you to speed up your development.

Resources :

https://trailhead.salesforce.com/en/content/learn/modules/user-interface-api/get-started-with-user-interface-api

https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_features_records_dependent_picklist.htm?search_text=dependent