Hi Folks,
As it is rightly said "The more you share , the more you learn". With this thought I ll keep exploring and ll keep sharing some basic stuff for lightning beginners.
Lets jump to scenario first:-
We need to create Dependent Picklist using Lightning Component, Sounds very easy isn't it . Hold on there is a twist to it we need to change the background color based on selected value.
Lets get started:-
Firstly , we need to have attribute to hold parent picklist value i.e
<aura:attribute name="pOptions" type="List"/>
Step 2 :-
<lightning:select name="pPicklist" label="Alphabets" aura:id="pPicklistId" onchange="{!c.onPickchange}">
<option value="">None</option>
<aura:iteration items="{!v.pOptions}" var="p">
<option value="{!p.value}">{!p.text}</option>
</aura:iteration>
</lightning:select>
This actually is creating the parent picklist which is a list of alphabets. It has a onchange controller.
myAction : function(component, event, helper) {
var pVals = [
{text:"A", value:"A"},
{text:"B", value:"B"}
];
var pValsColor = [
{text:"White", value:"White"},
{text:"blue", value:"blue"}
];
var cVals = {
"A":[
{text:"A1", value:"A1"},
//{text:"Choose Color", value:"Choose Color"}
],
"B":[
{text:"B1", value:"B1"},
{text:"Choose Color", value:"Choose Color"}
]
};
component.set('v.pOptions',pVals);
component.set('v.DepenedentObject',cVals);
component.set('v.cColor',pValsColor)
},
This controller is called whenever the page is loaded and it sets the initial values to picklist.
Step 3:-
Now, we have to create child picklist values.
<div class="slds-form--stacked">
<lightning:select name="cPicklist" label="Childs" aura:id="cPicklist" disabled="{!v.disabledPick}" onchange="{!c.myColor}">
<option value="">None</option>
<aura:iteration items="{!v.cOptions}" var="k">
<option value="{!k.value}">{!k.text}</option>
</aura:iteration>
</lightning:select>
</div>
<div class="slds-form--stacked">
<lightning:select name="cPicklistColor" label="Color" aura:id="cPicklistColor" onchange="{!c.myColor}" disabled="{!v.disabledColorPick}">
<option value="">None</option>
<aura:iteration items="{!v.cColor}" var="k">
<option value="{!k.value}">{!k.text}</option>
</aura:iteration>
</lightning:select>
This above code is creating the child picklist and also has onchange.
Here is full code for you below to test and try:-
<aura:component >
<ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
<aura:attribute name="pOptions" type="List"/>
<aura:attribute name="cOptions" type="List"/>
<aura:attribute name="selectedRedColor" type="Boolean" default="false"/>
<aura:attribute name="cColor" type="List"/>
<aura:attribute name="DepenedentObject" type="object"/>
<aura:attribute name="disabledPick" type="Boolean" default="true"/>
<aura:attribute name="disabledColorPick" type="Boolean" default="true"/>
<aura:handler name="init" value="{!this}" action="{!c.myAction}"/>
<div class="slds-align_absolute-center">
<lightning:select name="pPicklist" label="Alphabets" aura:id="pPicklistId" onchange="{!c.onPickchange}">
<option value="">None</option>
<aura:iteration items="{!v.pOptions}" var="p">
<option value="{!p.value}">{!p.text}</option>
</aura:iteration>
</lightning:select>
<div class="slds-form--stacked">
<lightning:select name="cPicklist" label="Childs" aura:id="cPicklist" disabled="{!v.disabledPick}" onchange="{!c.myColor}">
<option value="">None</option>
<aura:iteration items="{!v.cOptions}" var="k">
<option value="{!k.value}">{!k.text}</option>
</aura:iteration>
</lightning:select>
</div>
<div class="slds-form--stacked">
<lightning:select name="cPicklistColor" label="Color" aura:id="cPicklistColor" onchange="{!c.myColor}" disabled="{!v.disabledColorPick}">
<option value="">None</option>
<aura:iteration items="{!v.cColor}" var="k">
<option value="{!k.value}">{!k.text}</option>
</aura:iteration>
</lightning:select>
</div>
<div class="slds-is-relatived" style="position: absolute; top: 1rem; left: 1rem;">
<aura:if isTrue="{!v.selectedRedColor}">
<style >
html{
background-color: blue ;
}
</style>
<p class="slds-text-color_default"> Show Color :- I am Blue </p>
</aura:if>
</div>
</div>
</aura:component>
Lets now take a look at controller :-
({
myAction : function(component, event, helper) {
var pVals = [
{text:"A", value:"A"},
{text:"B", value:"B"}
];
var pValsColor = [
{text:"White", value:"White"},
{text:"blue", value:"blue"}
];
var cVals = {
"A":[
{text:"A1", value:"A1"},
//{text:"Choose Color", value:"Choose Color"}
],
"B":[
{text:"B1", value:"B1"},
{text:"Choose Color", value:"Choose Color"}
]
};
component.set('v.pOptions',pVals);
component.set('v.DepenedentObject',cVals);
component.set('v.cColor',pValsColor)
},
onPickchange : function(component, event, helper) {
var cValues = component.find('pPicklistId').get('v.value');
component.set('v.cOptions',component.get('v.DepenedentObject')[cValues]);
//alert(cValues);
console.log(component.get('v.DepenedentObject')[cValues]);
if(cValues != '')
component.set('v.disabledPick',false);
else
component.set('v.disabledPick',true);
},
myColor : function(component, event, helper) {
//alert('function called');
var cValuesColor = component.find('cPicklist').get('v.value');
var sColor = component.find('cPicklistColor').get('v.value');
//alert(sColor);
if(sColor == 'blue'){
// alert(sColor);
component.set('v.selectedRedColor',true);
}
else{
//alert(sColor);
component.set('v.selectedRedColor',false);
}
if(cValuesColor == 'Choose Color')
component.set('v.disabledColorPick',false);
else if(cValuesColor != 'Choose Color'){
component.set('v.disabledColorPick',true);
}
}
})
Click below to see
Working demo on You tube
In case you find any issue just drop me a mail on ankushsalesforce@gmail.com
Happy Codding
Cheers !!
Thanks
Ankush
