function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SFDC GuestSFDC Guest 

lightning component search records based picklist value

Hi All. I have written a lightning component to search records based on input given.

Please let me know to how to search records based on picklist value selected like if new cases picklist value selected then cases with new status should be displayed, if closed cases picklistvalue selected then closed cases should be displayed. Please help. Thanks in advance.
  
Controller:

public class caseList1 {
	@AuraEnabled
    public static List<sObject> fetchData() {
        //Query and return list of Contacts
        List<SObject> objRecords = [SELECT Status, Subject from Case LIMIT 10];
        return objRecords;
    }
}
  
Lightning component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" 
                controller="caseList1">
    <!-- attributes -->
    <aura:attribute name="data" type="Map"/>
    <aura:attribute name="filteredData" type="Map"/>
    <aura:attribute name="columns" type="List"/>


    <!-- handlers-->
    <aura:handler name="init" value="{!this }" action="{!c.init }"/>

    	<span>
        	<lightning:input onchange="{!c.searchTable}" type="search" label="Searh" variant="label-hidden" placeholder="Enter search term" aura:id="SearchBox"/>
        </span>
    	<br/>
               
                <lightning:datatable
            columns="{!v.columns}"
            data="{!v.filteredData}"
            keyField="id"
        />
    
</aura:component>

js 
({
    init: function (cmp, event, helper) {
        cmp.set('v.columns', [
            { label: 'Status', fieldName: 'Status', type: 'text' },
            { label: 'Subject', fieldName: 'Subject', type: 'text' }
        ]);
        var action = cmp.get("c.fetchData");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.data", response.getReturnValue());
                cmp.set("v.filteredData", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    searchTable : function(cmp,event,helper) {
        var allRecords = cmp.get("v.data");
        var searchFilter = event.getSource().get("v.value").toUpperCase();
        
        var tempArray = [];
        var i;

        for(i=0; i < allRecords.length; i++){
            if((allRecords[i].Status && allRecords[i].Status.toUpperCase().indexOf(searchFilter) != -1) ||
               (allRecords[i].Subject && allRecords[i].Subject.toUpperCase().indexOf(searchFilter) != -1 ))
            {
                tempArray.push(allRecords[i]);
            }
        }
        cmp.set("v.filteredData",tempArray);
    }
})

controller
Best Answer chosen by SFDC Guest
Khan AnasKhan Anas (Salesforce Developers) 
Please try the below code:

Apex: 
public class DisplayBasedOnPicklistC {
    
    @AuraEnabled
    public static List<String> getCaseStatus(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Case.Status.getDescribe();
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry p: pList) {
            options.add(p.getLabel());
        }
        return options;
    }
    
    @AuraEnabled
    public static List<Case> getCases(String cStatus) {
        List<Case> cases = [SELECT Id, CaseNumber, Type, Subject, Status FROM Case WHERE Status=:cStatus];
        return cases;
    }
    
    @AuraEnabled
    public static List<Case> getAllCases() {
        List<Case> allCases = [SELECT Id, CaseNumber, Type, Subject, Status FROM Case];
        return allCases;
    }
}

Component: 
<aura:component controller="DisplayBasedOnPicklistC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="PageHeading" type="String" default="Filter Cases based on Status"/>
    <aura:attribute name="pickName" type="List" />
    <aura:attribute name="picksel" type="String" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <div class="slds-m-top--xx-large">
        <div class="slds-page-header">
            <div class="slds-align--absolute-center">
                <div class="slds-text-heading--large">       
                    {!v.PageHeading}
                </div>
            </div>
        </div>
    </div>
    <br/> <br/>
    
    <div class = "slds-size--3-of-8">
        <lightning:select aura:id="PicklistId" label="Select Case Status" name="status" value="{!v.picksel}" onchange="{!c.onControllerFieldChange}">
            <option value="" text="- None -" /> 
            <aura:iteration items="{!v.pickName}" var="per">
                <option value="{!per}" text="{!per}" />  
            </aura:iteration>
        </lightning:select>
        <br/><br/>
    </div>
    <br/><br/>
    
    <div class="slds-p-left_large slds-p-right_medium">
        
        <lightning:datatable data="{! v.mydata }" 
                             columns="{! v.mycolumns }" 
                             keyField="Id" 
                             hideCheckboxColumn="true"/>
    </div>
</aura:component>

Controller: 
({
    doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Case Number', fieldName: 'CaseNumber', type: 'number', cellAttributes: {alignment: 'left'}},
            {label: 'Type', fieldName: 'Type', type: 'text'},
            {label: 'Subject', fieldName: 'Subject', type: 'text'},
            {label: 'Status', fieldName: 'Status', type: 'text'}
        ]);
        
        helper.allCases(component);
        helper.caseStatus(component);
    },
    
    onControllerFieldChange : function(component, event, helper){
        var pickselected = component.find("PicklistId").get("v.value");
        console.log('pickselected--->>> ' + pickselected);
        var action = component.get("c.getCases");
        action.setParams({cStatus : pickselected});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues--->>> ' + JSON.stringify(allValues));
                component.set("v.mydata", allValues);
            }
        });
        $A.enqueueAction(action);
    }
})

Helper: 
({
    allCases : function(component) {
        var action = component.get("c.getAllCases");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues -- >> ' + allValues);
                component.set("v.mydata", allValues);
            }
        });
        $A.enqueueAction(action);
    },
    
	caseStatus : function(component) {
		var action = component.get("c.getCaseStatus");
        var percent = component.find("PicklistId");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues -- >> ' + allValues);
                component.set("v.pickName", allValues);
            }
        });
        $A.enqueueAction(action);
	}
})

CSS: 
.THIS {
}

.THIS.slds-size--3-of-8 {
    margin-left: 420px;
}

Application: 
<aura:application extends="force:slds">
    <c:DisplayBasedOnPicklist/>
</aura:application>

I hope it helps you.

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Apex: 
public class DisplayBasedOnPicklistC {
    
    @AuraEnabled
    public static List<String> getCaseStatus(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Case.Status.getDescribe();
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry p: pList) {
            options.add(p.getLabel());
        }
        return options;
    }
    
    @AuraEnabled
    public static List<Case> getCases(String cStatus) {
        List<Case> cases = [SELECT Id, CaseNumber, Type, Subject, Status FROM Case WHERE Status=:cStatus];
        return cases;
    }
}

Component: 
<aura:component controller="DisplayBasedOnPicklistC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="PageHeading" type="String" default="Filter Cases based on Status"/>
    <aura:attribute name="pickName" type="List" />
    <aura:attribute name="picksel" type="String" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <div class="slds-m-top--xx-large">
        <div class="slds-page-header">
            <div class="slds-align--absolute-center">
                <div class="slds-text-heading--large">       
                    {!v.PageHeading}
                </div>
            </div>
        </div>
    </div>
    <br/> <br/>
    
    <div class = "slds-size--3-of-8">
        <lightning:select aura:id="PicklistId" label="Select Case Status" name="status" value="{!v.picksel}" onchange="{!c.onControllerFieldChange}">
            <option value="" text="- None -" /> 
            <aura:iteration items="{!v.pickName}" var="per">
                <option value="{!per}" text="{!per}" />  
            </aura:iteration>
        </lightning:select>
        <br/><br/>
    </div>
    <br/><br/>
    
    <div class="slds-p-left_large slds-p-right_medium">
        
        <lightning:datatable data="{! v.mydata }" 
                             columns="{! v.mycolumns }" 
                             keyField="Id" 
                             hideCheckboxColumn="true"/>
    </div>
</aura:component>

Controller: 
({
    doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Case Number', fieldName: 'CaseNumber', type: 'number', cellAttributes: {alignment: 'left'}},
            {label: 'Type', fieldName: 'Type', type: 'text'},
            {label: 'Subject', fieldName: 'Subject', type: 'text'},
            {label: 'Status', fieldName: 'Status', type: 'text'}
        ]);
        
        var action = component.get("c.getCaseStatus");
        var percent = component.find("PicklistId");
        var opts=[];
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues -- >> ' + allValues);
                component.set("v.pickName", allValues);
            }
        });
        $A.enqueueAction(action);
    },
    
    onControllerFieldChange : function(component, event, helper){
        var pickselected = component.find("PicklistId").get("v.value");
        console.log('pickselected--->>> ' + pickselected);
        var action = component.get("c.getCases");
        action.setParams({cStatus : pickselected});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues--->>> ' + JSON.stringify(allValues));
                component.set("v.mydata", allValues);
            }
        });
        $A.enqueueAction(action);
    }
})

CSS: 
.THIS {
}

.THIS.slds-size--3-of-8 {
    margin-left: 420px;
}

Application: 
<aura:application extends="force:slds">
    <c:DisplayBasedOnPicklist/>
</aura:application>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Khan AnasKhan Anas (Salesforce Developers) 
Please try the below code:

Apex: 
public class DisplayBasedOnPicklistC {
    
    @AuraEnabled
    public static List<String> getCaseStatus(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Case.Status.getDescribe();
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry p: pList) {
            options.add(p.getLabel());
        }
        return options;
    }
    
    @AuraEnabled
    public static List<Case> getCases(String cStatus) {
        List<Case> cases = [SELECT Id, CaseNumber, Type, Subject, Status FROM Case WHERE Status=:cStatus];
        return cases;
    }
    
    @AuraEnabled
    public static List<Case> getAllCases() {
        List<Case> allCases = [SELECT Id, CaseNumber, Type, Subject, Status FROM Case];
        return allCases;
    }
}

Component: 
<aura:component controller="DisplayBasedOnPicklistC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="PageHeading" type="String" default="Filter Cases based on Status"/>
    <aura:attribute name="pickName" type="List" />
    <aura:attribute name="picksel" type="String" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <div class="slds-m-top--xx-large">
        <div class="slds-page-header">
            <div class="slds-align--absolute-center">
                <div class="slds-text-heading--large">       
                    {!v.PageHeading}
                </div>
            </div>
        </div>
    </div>
    <br/> <br/>
    
    <div class = "slds-size--3-of-8">
        <lightning:select aura:id="PicklistId" label="Select Case Status" name="status" value="{!v.picksel}" onchange="{!c.onControllerFieldChange}">
            <option value="" text="- None -" /> 
            <aura:iteration items="{!v.pickName}" var="per">
                <option value="{!per}" text="{!per}" />  
            </aura:iteration>
        </lightning:select>
        <br/><br/>
    </div>
    <br/><br/>
    
    <div class="slds-p-left_large slds-p-right_medium">
        
        <lightning:datatable data="{! v.mydata }" 
                             columns="{! v.mycolumns }" 
                             keyField="Id" 
                             hideCheckboxColumn="true"/>
    </div>
</aura:component>

Controller: 
({
    doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Case Number', fieldName: 'CaseNumber', type: 'number', cellAttributes: {alignment: 'left'}},
            {label: 'Type', fieldName: 'Type', type: 'text'},
            {label: 'Subject', fieldName: 'Subject', type: 'text'},
            {label: 'Status', fieldName: 'Status', type: 'text'}
        ]);
        
        helper.allCases(component);
        helper.caseStatus(component);
    },
    
    onControllerFieldChange : function(component, event, helper){
        var pickselected = component.find("PicklistId").get("v.value");
        console.log('pickselected--->>> ' + pickselected);
        var action = component.get("c.getCases");
        action.setParams({cStatus : pickselected});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues--->>> ' + JSON.stringify(allValues));
                component.set("v.mydata", allValues);
            }
        });
        $A.enqueueAction(action);
    }
})

Helper: 
({
    allCases : function(component) {
        var action = component.get("c.getAllCases");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues -- >> ' + allValues);
                component.set("v.mydata", allValues);
            }
        });
        $A.enqueueAction(action);
    },
    
	caseStatus : function(component) {
		var action = component.get("c.getCaseStatus");
        var percent = component.find("PicklistId");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var allValues = response.getReturnValue();
                console.log('allValues -- >> ' + allValues);
                component.set("v.pickName", allValues);
            }
        });
        $A.enqueueAction(action);
	}
})

CSS: 
.THIS {
}

.THIS.slds-size--3-of-8 {
    margin-left: 420px;
}

Application: 
<aura:application extends="force:slds">
    <c:DisplayBasedOnPicklist/>
</aura:application>

I hope it helps you.
This was selected as the best answer
SFDC GuestSFDC Guest
Hi Anas,

Thanks for helping.

Can you please let me know how to merge multiple all non closed status values and display as "Open". So if open status is selected then it should display all case records which status related to "New", "In Progress", "On Hold", etc ?