How to create Dependent Picklist Using lightning Component and change background Color

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

How To show picklist on Visualforce using Lightning Components and apex class

Hi Folks,

Lightning! Is it..

I have a requirement for you and that is very basic for new beginners who wants to learn lightning.

Requirement:-

To show picklist on visualforce using lightning component and also print the selected value. 

Lets start with creating the component . We need to have a component , a controller and lightning out app.
In component, we will be using two attributes to which one will contain the selected value and another attribute which will contain the picklist values.

Also we will have a client side controller that will be called on load of component and whenever there is change in picklist value selection.

Component code snippet below:-

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="mySelectedText" type="String" default="some string"/>
    <aura:attribute name="contactLevel" type="set" default="test" />
    <aura:handler name="init" value="{!this}" action="{!c.onSelectChange}"/>
  <div>
    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>
  </div>
    <div>
        Selected value is :----  {!v.mySelectedText}
    </div>
</aura:component>

Visualforce page code snippet

<apex:page controller="linkforLightning">
<apex:includeLightning />
<apex:outputPanel id="twest" rendered="true">

 <div style="width:100%;height:100px;" id="Containers" />

 <script>
 $Lightning.use("AnkushTest:onSelectChange", function() {
 $Lightning.createComponent("AnkushTest:onSelectPicklist",
 {  
     contactLevel:"{!listOfInteger}"
  
 },
 "Containers",
 function(cmp) {
 console.log('Component created');
 });
 });
 </script>
 </apex:outputPanel>
</apex:page>

Controller.js :-

({
 onSelectChange : function(component, event, helper) {
    var selected = component.find("levels").get("v.value");
        alert('Selected Value is '+selected);
        
      
    component.set("v.mySelectedText",selected);
        
}
})

Lightning App

<aura:application access="GLOBAL"  extends="ltng:outApp">
    <aura:dependency resource="AnkushTest:OnSelectPickList" />
</aura:application>

This how it will be rendered