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?
