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>

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

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


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

  • can you add details on some error mentioned in your post. What is not working?
    – Raul
    Dec 20, 2017 at 12:08
  • Could you rephrase your question? It is not clear what you want to achieve or what is causing the problems.
    – Stijn
    Dec 21, 2017 at 9:49
  • I have done. Is it more clear for you?
    – YesPapa
    Dec 21, 2017 at 10:21
  • I am not seeing lightning:actionOverride in your component above. Are you able to override standard action button with lightning component without using lightning:actionOverride??
    – AshSFcloud
    Jul 30, 2019 at 5:20

1 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"
        <aura:iteration items="{!v.picklistValues}" var="item">
            <option value="{!item}">{!item}</option>

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

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 {

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .