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 '17 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 '17 at 9:49
  • I have done. Is it more clear for you?
    – YesPapa
    Dec 21 '17 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 '19 at 5:20

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 {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.