How to display the records based on selected picklist value in Lightning

Apex Class
 ----------
 public class FetchPicklistOptsController
 {
    @AuraEnabled
    public static List < String > getselectOptions(sObject objObject, string fld) {
        system.debug('objObject --->' + objObject);
        system.debug('fld --->' + 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());
        }
        system.debug('allOpts ---->' + allOpts);
        allOpts.sort();
        return allOpts;
    }
    @AuraEnabled
    public static List<Account> getDisplayData(string searchKeyWord)
    {
        System.debug('searchKeyWord :::' + searchKeyWord);
        String searchWord='%'+searchKeyWord+'%';
        List<Account> returnList=new List<Account>();
        List<Account> displayData=[select Id,Name,Industry from Account where Industry like :searchWord];
        for(Account acc:displayData)
        {
            returnList.add(acc);
       
        }
        System.debug('****Data in the List :::'+returnList);
        return returnList;
    }
}

searchData.cmp
--------------
 <aura:component implements="force:appHostable,
                    flexipage:availableForAllPageTypes,
                    flexipage:availableForRecordHome,
                    force:hasRecordId,
                    forceCommunity:availableForAllPageTypes"
                 access="global" controller="FetchPicklistOptsController" >
    <aura:attribute name="AccData" type="list"/>
    <aura:attribute name="selectedpicklist" type="string"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>



    <aura:attribute name="objInfo" type="account" default="{sobjectType : 'Account'}" />
    <aura:registerEvent name="PickListCarry" type="c:PickListCarryEvent" />
    <div class="slds-form-element">
     <label class="slds-form-element__label" for="select-01">Select</label>
     <div class="slds-select_container" style="width:15%;">



      <ui:inputSelect  aura:id="accIndustry" class="slds-select" value="{!v.selectedpicklist}"  change="{!c.onPicklistChange}" />
     </div>
    </div>
 </aura:component>


searchDatacontroller
--------------------
 ({
  doInit: function(component, event, helper)
  {
   helper.fetchPickListVal(component, 'Industry', 'accIndustry');
  },
  onPicklistChange: function(component, event, helper)
  {
   helper.displayData(component,event,helper);
 
  },
 })

searchDataHelper
----------------
({
 displayData:function(component,event,helper)
    {
   
        var pickListEvent = component.getEvent("PickListCarry");
   
        pickListEvent.setParams({
            "picklistValue" : component.get("v.selectedpicklist")
        });
        pickListEvent.fire();
   
   
    },
     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);
    }
})


PickListCarryEvent.evt
-----------------------
<aura:event type="COMPONENT" description="Event template" >
 <aura:attribute name="picklistValue" type="string"/>
</aura:event>



AccountList.cmp
----------------
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
                access="global" controller="FetchPicklistOptsController" >



    <aura:handler name="PickListCarry" event="c:PickListCarryEvent" action="{!c.reloadData}"/>
    <aura:attribute name="AccData" type="List"/>
    <aura:attribute name="selectedpicklist" type="string"/>
    <c:searchData />
    <br/><br/><br/>
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer">
        <thead>     
            <tr class="slds-text-heading--small">
                <th scope="col"><span class="slds-truncate">Name  </span></th>
                <th scope="col"><span class="slds-truncate">Industry</span></th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.AccData}" var="item">
                <tr>
                    <th scope="row">{!item.Name}</th>
                    <td> {!item.Industry}</td>                 
                </tr>
            </aura:iteration>
        </tbody>
    </table>

</aura:component>


AccountListController
---------------------
({
 reloadData : function(component, event, helper)
 {
        helper.reloadData(component, event, helper);
    }
})


AccountListHelper
-----------------
({
 reloadData : function(component, event, helper)
 {
  var action=component.get("c.getDisplayData");
        action.setParams({
            'searchKeyWord':event.getParam("picklistValue")
        });
        action.setCallback(this,function(response){
       
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS")
   {
              component.set("v.recordCount", response.getReturnValue());
                component.set("v.AccData", response.getReturnValue());
            }   
            else
   {
                alert('Error in fetching the result from data base');           
            }

        });
        $A.enqueueAction(action);
 }
})

Lightning Application
---------------------
<aura:application  extends="force:slds">
    <c:AccountList/>
</aura:application>

Comments

Post a Comment