How to override “New quote” standard action with lightning component

Question

I want to override New quote action with a Lightning component to create a record page with only fewer fields : - Two dependant picklists ; - One hidden field.

I have follow Trailhead Project - Build a Lightning Component to Override a Standard Action :

Here is the first step inspired from the trailhead module :

CMP quoteDialog

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" 
    access="global" >

    <aura:attribute name="picklistValues" type="Object" />
    <c:PicklistValues sObjectName="Quote" fieldName="Modele__c" 
    picklistValues="{!v.picklistValues}" />

<lightning:select aura:id="quoteModele" name="quoteModele" label="Modele">
        <aura:iteration items="{!v.picklistValues}" var="item">
            <option value="{!item}">{!item}</option>
        </aura:iteration>
</lightning:select>

    <lightning:select aura:id="quoteColor" name="quoteColor" label="Color">
        <option value="color">Color</option>
    </lightning:select>

    <lightning:button variant="neutral" label="Cancel" />
    <lightning:button variant="brand" label="Submit" />

</aura:component>

I want to create the second picklist with dependencies : the Color picklist depending of the choosen modele.

Answer 1

What I would do is create a change listener

<aura:attribute name="colors" type="String[]" /> 

<lightning:select aura:id="quoteModele" name="quoteModele" label="Modele"
  onchange="{!c.onChangeModele}">
        <aura:iteration items="{!v.picklistValues}" var="item">
            <option value="{!item}">{!item}</option>
        </aura:iteration>
</lightning:select>

<lightning:select aura:id="quoteColor" name="quoteColor" label="Color">
    <aura:iteration items="{!v.colors}" var="item">
        <option value="{!item}">{!item}</option>
    </aura:iteration>
</lightning:select>

And in your javascript controller:

onChangeModele : function(component, event, helper) {
    // function in your apex controller class
    var action = component.get("c.getColors");

    // params in your apex controller class
    action.setParams({ modele: component.find("quoteModele").get("v.value") }); 
    action.setCallback(this, function(result){
            if(result.getState() == 'SUCCESS') {
                var values = result.getReturnValue();
                component.set("v.colors", values);
            } else {
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
}