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>
----------
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>
Nice article, very helpful for newbies....Thank for sharing that great information.
ReplyDeleteSalesforce Development Services
Salesforce Products