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

How to Build Alert! on visualforce Page Using Lightning Component Salesforce

Hi Folks,

Its the high time we get our hands dirty on LIGHTNING. We are getting lots of requirement on lightning day by day. In market there is a huge demand for Lightning Developers.

Obviously, every one is going mobile now a days and want one solution with better performance in salesforce. #LightningIsTheWayToGo. 

Today I ll be sharing some stuff i.e  most used component on internet among Developers that is 'ALERT !'

Lets get Started folks....


Requirement Analysis:-

I was asked to build, actually no one asked me it got boomed in my head ,  Alert! as Lightning Component. This lightning component should be such that we can use it in our visualforce pages wherever we want to show an alert.

our Component:-

First create a component named GlobalAlert.

Below is the code snippet for the same.

     <!--Global Alert-->
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="Title" type="String" default="You Encountered an Error!!  " />
    <aura:attribute name="Click" type="String" default="  Please Click Here" />
    <aura:attribute name="Link" type="String" default="  Please Click Here" />
    
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
                      <span class="slds-assistive-text"> </span>
                      <span class="slds-icon_container slds-icon-utility-ban slds-m-right_x-small" title="Description of icon when needed">
             
              <lightning:icon iconName="utility:error" variant="error" />
        
          </span>
          <h2>{!v.Title} <a href="{!v.Link}">{!v.Click}</a></h2>
          <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
              <lightning:icon iconName="utility:error" variant="error" />
              
            <span class="slds-assistive-text">Close</span>
          </button>
</div>
  
</aura:component>

Explanation of above Code line by line :-

Please visit this link. It is the Lightning Design System It has all the libraries for the component which are used mostly in development.

You can directly consume these CSS files into you Lightning App.

 <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>

Above line is a standard tag of lightning in its style attribute I have added my CSS from lds (Lightning Design System).

<aura:attribute name="Title" type="String" default="You Encountered an Error!!  " />
    <aura:attribute name="Click" type="String" default="  Please Click Here" />
    <aura:attribute name="Link" type="String" default="  Please Click Here" />

In this above Code , I have added Aura attribute to pass as a parameter from my VF page.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
                      <span class="slds-assistive-text"> </span>
                      <span class="slds-icon_container slds-icon-utility-ban slds-m-right_x-small" title="Description of icon when needed">
             
              <lightning:icon iconName="utility:error" variant="error" />
        
          </span>
          <h2>{!v.Title} <a href="{!v.Link}">{!v.Click}</a></h2>
          <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
              <lightning:icon iconName="utility:error" variant="error" />
              
            <span class="slds-assistive-text">Close</span>
          </button>
</div>

 In the above code, this copied from lightning css for alert. Just remember you need to use <lightning:icon> tag as it is a alternate tag for <svg>



Visualforce Page:-

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

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

 <script>
 $Lightning.use("AnkushTest:DemoLightningContApp", function() {
 $Lightning.createComponent("AnkushTest:GlobalAlert",
 { Link:"{!link}"
  
 },
 "Containers",
 function(cmp) {
 console.log('Component created');
 });
 });
 </script>
 </apex:outputPanel>
</apex:page>

To call Lighning Component I have to add a function in a script tag. 

$Lightning.use("AnkushTest:DemoLightningContApp", function() {
 $Lightning.createComponent("AnkushTest:GlobalAlert",
 { Link:"{!link}"

Above code creates and initializes the lightning component by using $lightning.use("You component name",function()).

link is my attribute through whoch I can dynamically create an alert .

This Way you can reuse your alert component in dfiferent visualforce pages.

Happy Lightning!!

😊