Hi, Here we have shown, Based on picklist value you have selected, selected picklist value will be displayed in the child component using events.
Here, we have shown the connection between 2 components.
Data will be modified in 2 component based on 1st component picklist value.
Apex Controller
public class BasedOnPicklistValueChangeValueinAnother {
@AuraEnabled
public static List < String > getselectOptions(sObject objObject, string fld) {
List <String> allOpts = new list <String> ();
// Get the object type of the SObject.
Schema.sObjectType objType = objObject.getSObjectType();
// Describe the SObject using its object type.
Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
// Get a map of fields for the SObject
map <String, Schema.SObjectField> fieldMap = objDescribe.fields.getMap();
// Get the list of picklist values for this field.
list <Schema.PicklistEntry> values =
fieldMap.get(fld).getDescribe().getPickListValues();
// Add these values to the selectoption list.
for (Schema.PicklistEntry a: values) {
allOpts.add(a.getValue());
}
allOpts.sort();
return allOpts;
}
}
Lightning Event : component level event
<aura:event type="COMPONENT" description="Event template" >
<aura:attribute name="Changevalue" type="string"/>
</aura:event>
Lightning Component (Parent) : BasedOnPicklistValueChangeValueinAnotherComp
<aura:component controller="BasedOnPicklistValueChangeValueinAnother" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="objInfo" type="account" default="{sobjectType : 'Account'}" />
<aura:registerEvent name="sampleEvent" type="c:BasedOnPicklistValueChangeValue" />
<div class="slds-form-element">
<label class="slds-form-element__label" for="select-01">Select Label</label>
<div class="slds-select_container">
<ui:inputSelect aura:id="accIndustry" class="slds-select" change="{!c.onPicklistChange}"/>
</div>
</div>
</aura:component>
Controller js
({
doInit: function(component, event, helper) {
helper.fetchPickListVal(component, 'Industry', 'accIndustry');
},
onPicklistChange: function(component, event, helper) {
// get the value of select option
var Codes = event.getSource().get("v.value");
alert(Codes);
var cmpEvent=component.getEvent("sampleEvent");
cmpEvent.setParams({"Changevalue" : Codes});
cmpEvent.fire();
},
})
Helper js
({
fetchPickListVal: function(component, fieldName, elementId) {
var action = component.get("c.getselectOptions");
action.setParams({
"objObject": component.get("v.objInfo"),
"fld": fieldName
});
var opts = [];
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);
},
})
Lightning Compnent (Child) : BasedOnPicklistValueChangeVal
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="sampleEvent" event="BasedOnPicklistValueChangeValue" action="{!c.parent}" />
<aura:attribute name="eventMessage" type="String" />
<aura:attribute name="Show" type="boolean" default="false" />
<c:BasedOnPicklistValueChangeValueinAnotherComp/>
<aura:if isTrue="{!v.Show}">
<lightning:card footer="Salesforcecodes.com" title="">
<div class="Codes">{!v.eventMessage}</div>
</lightning:card>
</aura:if>
</aura:component>
Controller js
({
parent : function(component, event) {
var text = event.getParam("Changevalue");
if(text == 'Entertainment'){
component.set("v.eventMessage", text);
component.set("v.Show", true);
}
else{
alert("Message displays for Entertainment Only");
component.set("v.Show", false);
}
}
})
Styles Css
.THIS .Codes{
background:cyan;
font-size:22px;
font-family:Monotype Corsiva;
font-weight: bold;
}
Application
<aura:application Extends="force:slds">
<c:BasedOnPicklistValueChangeVal/>
</aura:application>
Output
May i know how will i control 2 picklist field which are in different components