Dependent picklist in Aura

-

 ....Component....

<aura:component controller="MinorAssignment" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <aura:attribute name="fName" type="string"/>

    <aura:attribute name="lName" type="string"/>

    <aura:attribute name="email" type="string"/>

    <aura:attribute name="phn" type="string"/>

    <aura:attribute name="selectedBusinessVertical" type="String"/>

    <aura:attribute name="selectedDivisionVertical" type="String"/>

    <aura:attribute name="selectedAreaOfDivision" type="String"/>

    <aura:attribute name="availableDivisionOfVertical" type="List"/>

    <aura:attribute name="availableAreaOfDivision" type="List"/>

    

    <div class="slds-box slds-box_small slds-theme_shade slds-theme_alert-texture slds-align_absolute-center" Style ="font-size:20px">General Information</div>

    <div class="slds-form slds-p-horizontal_large slds-p-vertical_small slds-m-top_medium" role="list">

        <div class="slds-form__row">

            <div class="slds-form__item" role="listitem">

                <div class="slds-form-element slds-form-element_horizontal slds-hint-parent">

                    <span class="slds-form-element__label">First Name</span>

                    <div class="slds-form-element__control" style="padding-left:70px;">

                        <lightning:input label="First Name" value="{!v.fName}" variant="label-hidden" required="true"/>

                    </div>

                </div>

            </div>

            <div class="slds-form__item" role="listitem">

                <div class="slds-form-element slds-form-element_horizontal slds-hint-parent">

                    <span class="slds-form-element__label">Last Name</span>

                    <div class="slds-form-element__control" style="padding-left:70px;">

                        <lightning:input label="Last Name" value="{!v.lName}" variant="label-hidden" required="true"/>

                    </div>

                </div>

            </div>

        </div>

    </div>

     <div class="slds-form slds-p-horizontal_large slds-p-vertical_small " role="list">

        <div class="slds-form__row">

            <div class="slds-form__item" role="listitem">

                <div class="slds-form-element slds-form-element_horizontal slds-hint-parent">

                    <span class="slds-form-element__label">Eamil</span>

                    <div class="slds-form-element__control" style="padding-left:60px;">

                        <lightning:input label="Eamil" value="{!v.email}" variant="label-hidden" required="true"/>

                    </div>

                </div>

            </div>

            <div class="slds-form__item" role="listitem">

                <div class="slds-form-element slds-form-element_horizontal slds-hint-parent">

                    <span class="slds-form-element__label">Phone</span>

                    <div class="slds-form-element__control" style="padding-left:60px;">

                        <lightning:input label="Phone" value="{!v.phn}" variant="label-hidden" required="true"/>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <br> </br>

    <div class="slds-box slds-box_small slds-theme_shade slds-theme_alert-texture slds-align_absolute-center" Style ="font-size:20px">Industry Information</div>

    <div class="slds-form-element slds-form-element_horizontal slds-hint-parent">

        <div class="slds-form-element__control slds-m-top_medium" style="padding-left:40px;">

            

            <lightning:select name="BusinessVertical" value="{!v.selectedBusinessVertical}" onchange="{!c.getDivisionOfVertical}" label="Business Vertical" required="true">

                <option value="">choose one...</option>

                <option value="Finance">Finance</option> 

                <option value="HealthCare">HealthCare</option>

                <option value="Automobile">Automobile</option>

                <option value="Education">Education</option>

                <option value="TeleCommunications">TeleCommunications</option>

            </lightning:select>

             </div>

    </div>

      <div class="slds-form-element slds-form-element_horizontal slds-hint-parent">

        <div class="slds-form-element__control slds-m-top_medium" style="padding-left:40px;">

            <lightning:select name="DivisionOfVertical" value="{!v.selectedDivisionVertical}" onchange="{!c.getAreaOfDivision}" label="Division Of Vertical" required="true">

                <option value="">choose one...</option>

                <aura:iteration items="{!v.availableDivisionOfVertical}" var="c">

                    <option value="{!c}">{!c}</option>

                </aura:iteration>

            </lightning:select>

        </div>

    </div>

    

    <div class="slds-form-element slds-form-element_horizontal slds-hint-parent">

        <div class="slds-form-element__control slds-m-top_medium" style="padding-left:40px;">

            <lightning:select name="AreaOfDivision" value="{!v.selectedAreaOfDivision}" label="Area of Division">

                <option value="">choose one...</option>

                <aura:iteration items="{!v.availableAreaOfDivision}" var="a">

                    <option value="{!a}">{!a}</option>

                </aura:iteration>

            </lightning:select>

        </div>

    </div>

    <div class="slds-m-left_small">

        <lightning:button aura:Id="SaveBtn" label="save" onclick="{!c.saveContact}" variant="Destructive" />

    </div>

</aura:component>


....Controller.js....


({

    getDivisionOfVertical: function(component, event, helper) {

        helper.getDivisionOfVerticalhelper(component, event, helper);

    },

    

    getAreaOfDivision: function(component, event, helper) {

        helper.getAreaOfDivisionhelper(component, event, helper);

    },

      saveContact : function(component, event, helper) {

        var fName = component.get("v.fName");

        var lName = component.get("v.lName");

        var email = component.get("v.email");

        var phn = component.get("v.phn");

        var BusinessVertical = component.get("v.selectedBusinessVertical");

        var DivisionOfVertical = component.get("v.selectedDivisionVertical");

        var AreaofDivision = component.get("v.selectedAreaOfDivision");

           console.log('fName : '+fName);

        console.log('lName : '+lName);

        console.log('email : '+email);

        console.log('phn : '+phn);

      var action = component.get("c.saveContacts");

        action.setParams({ fName : component.get("v.fName"),

                          lName : component.get("v.lName"),

                          email : component.get("v.email"),

                          phn : component.get("v.phn"),

                          BusinessVertical : component.get("v.selectedBusinessVertical"),

                          DivisionOfVertical : component.get("v.selectedDivisionVertical"),

                          AreaOfDivision : component.get("v.selectedAreaOfDivision")

                         });

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

             alert("Saved Sucessfully");

          } else {

                console.log(response.getError());

            }

        });

         $A.enqueueAction(action);  

    }

})


....Helper.js....


({

    getDivisionOfVerticalhelper : function(component, event, helper) {

        var action = component.get("c.getDivisionVerticalByBusinessVertical");

        action.setParams({  BusinessVertical : component.get("v.selectedBusinessVertical") });

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                component.set('v.availableDivisionOfVertical',response.getReturnValue());

            }

   });

            $A.enqueueAction(action);

    },

      getAreaOfDivisionhelper : function(component, event, helper) {

        var action = component.get("c.getAreaOfDivisionByDivisionVertical");

          action.setParams({  DivisionVertical : component.get("v.selectedDivisionVertical") });

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                component.set('v.availableAreaOfDivision',response.getReturnValue());

            } else{

                console.log(response.getError());

            }

              });

          $A.enqueueAction(action);

    }

})




Comments

Post a Comment

Popular posts from this blog

Write a trigger and it's Test class on Account when Account is update check all opportunity inside the account.

-
Update all Opportunities Stage to close lost if an opportunity created date is greater than 30 days from today and stage not equal to close won. ....Trigger.... trigger UpdateOpportunities on Account (after update) { Set<Id> accountIds = new Set<Id>(); for(Account a:Trigger.new){ accountIds.add(a.Id); } DateTime day30=system.now()-30; List<Opportunity> oppListToUpdate=new List<Opportunity>(); List<Opportunity> oppList = [Select Id, AccountId, StageName, CreatedDate, CloseDate from Opportunity where AccountId in :accountIds]; if(oppList.size()>0) { for(Opportunity opp : oppList) { if(opp.CreatedDate < day30 && opp.StageName!='Closed Won') { opp.CloseDate = system.today(); opp.StageName = 'Closed Lost'; oppListToUpdate.add(opp); update opp; } } }...
Read more