0

I am using the Parent-child concept. I am calling one component from another component.

Component(Parent):

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
            access="global"
            controller="P2EcdependentPicklist_NewRFI">
<!-- call doInit function on component load -->  
<aura:handler name="init" value="this" action="{!c.doInit}"/>

   <aura:attribute name="recordId" type="Id" />


<!-- aura attributes-->  
<aura:attribute name="listControllingValues" type="list" default="[]" description="to store controller field values"/>
<aura:attribute name="listDependingValues" type="list" default="['--- None ---']" description="to store dependent field values"/>
<aura:attribute name="depnedentFieldMap" type="map" description="map to store dependent values with controlling value"/>
<aura:attribute name="bDisabledDependentFld" type="boolean" default="true"/> 

<aura:attribute name="objDetail" type="contact" default="{'sobjectType' : 'case'}"/>
<aura:attribute name="controllingFieldAPI" type="string" default="RFI_Type__c" description="store field API name of Controller field"/>
<aura:attribute name="dependingFieldAPI" type="string" default="RFI_SubType__c" description="store field API name of dependent field"/>

<!--Controller Field-->
<lightning:layoutItem size="12" padding="around-small">    
    <lightning:select name="controllerFld"
                      value="{!v.objDetail.Country__c}"
                      label="RFI Type"
                      onchange="{!c.onControllerFieldChange}" aura:id="RFITypeValue">
        <aura:iteration items="{!v.listControllingValues}" var="val">
            <option value="{!val}">{!val}</option>
        </aura:iteration>
    </lightning:select>
</lightning:layoutItem>

<!--Dependent Field-->
<lightning:layoutItem size="12" padding="around-small">
    <lightning:select name="dependentFld"
                      value="{!v.objDetail.City__c}"
                      label="RFI SubType"
                      disabled="{!v.bDisabledDependentFld}">
        <aura:iteration items="{!v.listDependingValues}" var="val">
            <option value="{!val}">{!val}</option>
        </aura:iteration>
    </lightning:select>
</lightning:layoutItem>
<c:liu_NewRFIOnOpportunity aura:id="childCmp"/>
    <lightning:button variant="brand" label="Submit" onclick="{! c.handleClick }" />

Controller:

({
    doInit : function(component, event, helper) { 
        // get the fields API name and pass it to helper function  
        var controllingFieldAPI = component.get("v.controllingFieldAPI");
        var dependingFieldAPI = component.get("v.dependingFieldAPI");
        var objDetails = component.get("v.objDetail");
        var ListOfDependentFields = component.get("v.controllingFieldAPI");
        helper.fetchPickListVal(component, controllerValueKey, 'RFITypeValue');

        // call the helper function 
        helper.fetchPicklistValues(component,objDetails,controllingFieldAPI, dependingFieldAPI);

    },

    onControllerFieldChange: function(component, event, helper) {     
        var controllerValueKey = event.getSource().get("v.value"); // get selected controller field value
        var depnedentFieldMap = component.get("v.depnedentFieldMap");
         console.log(' First recortype value is:'+controllerValueKey);
        if (controllerValueKey != '--- None ---') {
            var ListOfDependentFields = depnedentFieldMap[controllerValueKey];

            if(ListOfDependentFields.length > 0){
                component.set("v.bDisabledDependentFld" , false);  
                helper.fetchDepValues(component, ListOfDependentFields);

            }else{
                component.set("v.bDisabledDependentFld" , true); 
                component.set("v.listDependingValues", ['--- None ---']);
            }  

        } else {
            component.set("v.listDependingValues", ['--- None ---']);
            component.set("v.bDisabledDependentFld" , true);
        }
    },
    handleClick : function(component, event, helper){

        // Find the child component using the aura:id that we have given while creating the parent component and store the same into a variable.
        var recordId = component.get("v.recordId");
        var childCmp = component.find('childCmp');
     //   var RFItypeVal = component.find("RFITypeValue");
                  console.log('recortype value is:'+event.getSource().get("v.value"));
        var controllerValueKey = event.getSource().get("v.value"); // get selected controller field value


        console.log('final recortype value is:'+controllerValueKey);

        // Call the Child Controller method using childCmp variable dot method name defined into the child component
       // childCmp.sampleMethod(recordId, recordtype);
        childCmp.sampleMethod(recordId,'Disruption Analysis'); // Pass the parameters here

    },

})

Helper:

({
    fetchPicklistValues: function(component,objDetails,controllerField, 
    dependentField) {
    // call the server side function  
    var action = component.get("c.getDependentMap");
  //   var action1 = component.get("c.getselectOptions");
    // pass paramerters [object definition , contrller field name ,dependent field name] -
    // to server side function 
    action.setParams({
        'objDetail' : objDetails,
        'contrfieldApiName': controllerField,
        'depfieldApiName': dependentField,

    });
  /**   action1.setParams({
        "objObject": component.get("v.objInfo"),
        "fld": fieldName
    });  **/
   //  var opts = [];
    //set callback   
    action.setCallback(this, function(response) {
        if (response.getState() == "SUCCESS") {
            //store the return response from server (map<string,List<string>>)  
            var StoreResponse = response.getReturnValue();

     /***       
            if (allValues != undefined && allValues.length > 0) {
                opts.push({
                    class: "optionClass",
                    label: "--- None ---",
                    value: ""
                });
            }
            for (var i = 0; i < allValues.length; i++) {
                opts.push({
                    class: "optionClass",
                    label: allValues[i],
                    value: allValues[i]
                });
            }
            component.find(RFITypeValue).set("v.options", opts);   ***/

            // once set #StoreResponse to depnedentFieldMap attribute 
            component.set("v.depnedentFieldMap",StoreResponse);

            // create a empty array for store map keys(@@--->which is controller picklist values) 
            var listOfkeys = []; // for store all map keys (controller picklist values)
            var ControllerField = []; // for store controller picklist value to set on lightning:select. 

            // play a for loop on Return map 
            // and fill the all map key on listOfkeys variable.
            for (var singlekey in StoreResponse) {
                listOfkeys.push(singlekey);
            }

            //set the controller field value for lightning:select
            if (listOfkeys != undefined && listOfkeys.length > 0) {
                ControllerField.push('--- None ---');
            }

            for (var i = 0; i < listOfkeys.length; i++) {
                ControllerField.push(listOfkeys[i]);
            }  
            // set the ControllerField variable values to country(controller picklist field)
            component.set("v.listControllingValues", ControllerField);
        }else{
            alert('Something went wrong..');
        }
    });
    $A.enqueueAction(action);
},

fetchDepValues: function(component, ListOfDependentFields) {
    // create a empty array var for store dependent picklist values for controller field  
    var dependentFields = [];
    dependentFields.push('--- None ---');
    for (var i = 0; i < ListOfDependentFields.length; i++) {
        dependentFields.push(ListOfDependentFields[i]);
    }
    // set the dependentFields variable values to store(dependent picklist field) on lightning:select
    component.set("v.listDependingValues", dependentFields);
            console.log('dependentFields value is:'+dependentFields);

},

fetchPickListVal: function(component, controllerValueKey,elementId) {
    var action = component.get("c.getselectOptions");
    action.setParams({
        "objObject": component.get("v.objDetail"),
        "fld": component.get("v.controllingFieldAPI")
    });
    var opts = [];
    var controllerFields = [];
    controllerFields.push(controllerValueKey);
            component.set("v.v.listControllingValues", controllerFields.push(controllerValueKey));

    action.setCallback(this, function(response) {
        if (response.getState() == "SUCCESS") {
            var allValues = response.getReturnValue();

            if (allValues != undefined && allValues.length > 0) {
                opts.push({
                    class: "optionClass",
                    label: "--- None ---",
                    value: ""
                });
            }
            for (var i = 0; i < allValues.length; i++) {
                opts.push({
                    class: "optionClass",
                    label: allValues[i],
                    value: allValues[i]
                });
            }
            component.find(elementId).set("v.options", opts);
        }
    });
    $A.enqueueAction(action);
     },

})

In JS controller I am getting the Picklist value from onControllerFieldChange: function(component, event, helper) Method.

var depnedentFieldMap = component.get("v.depnedentFieldMap");
    console.log(' First recortype value is:'+controllerValueKey);

From the above line, I am able to get values. I need to use the same value in handleClick: function(component, event, helper){ Method of the same controller.

Because I need to pass the same value in

childCmp.sampleMethod(recordId,'here i have to pass value');

I tried with

var controllerValueKey = event.getSource().get("v.value"); 

console.log('final recortype value is:'+controllerValueKey);

But final record type value is: Undefined It is showing.

I need the same value in the 2nd method also to pass as a parameter.

Can anyone please help me with any suggestions?

2

Your method c.handleClick is not an event handler for your picklist, but for your submission button. The button is therefore the event's source, and doesn't contain the data that you are looking for. You need to go and get the data where it lives.

If we look at your component:

<lightning:select name="controllerFld"
                  value="{!v.objDetail.Country__c}"
                  label="RFI Type"
                  onchange="{!c.onControllerFieldChange}" aura:id="RFITypeValue">

We find that the value of your lightning:select is bound to v.objDetail.Country__c. Therefore, to obtain the currently selected value, you would ask your component for it:

component.get('v.objDetail.Country__c');
| improve this answer | |

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.