You need to sign in to do that
Don't have an account?
vicky kr 3
Filter Record With Help Of 2 picklist field values
Case priority picklist values=['low','Mid','High']
Case status picklist values=['New','Open','Escalated','Close']
I want a lightning component with controller with fill filter record based on my picklist values selection
Eg:1
If i select
case priority:'High' and case Status:'New'
It displays all cases whose priority is high and status is new
Eg2
If i choose
case priority:'High'
Only Show all cases with high priority ,
inspite of there staus
Eg3
If i choose
case status:'New'
Only Show all cases with status:'New' ,
inspite of there priority
Case status picklist values=['New','Open','Escalated','Close']
I want a lightning component with controller with fill filter record based on my picklist values selection
Eg:1
If i select
case priority:'High' and case Status:'New'
It displays all cases whose priority is high and status is new
Eg2
If i choose
case priority:'High'
Only Show all cases with high priority ,
inspite of there staus
Eg3
If i choose
case status:'New'
Only Show all cases with status:'New' ,
inspite of there priority
Kindly refer this document and replace the sobject with Case Object :-
https://salesforce.stackexchange.com/questions/127137/use-auraattribute-to-filter-sobject-records-for-lightning-component
Kindly mark it as the best answer if it works for you.
Thanks & Regards,
Priya Ranjan
I SHARE MY APEX AND LWC CODE IN THIS AND NEXT COMMENT
public with sharing class FilteredTableController {
@AuraEnabled(cacheable=true)
public static List<Case> getCases(
String caseNumber,
String subject,
String priority,
String status,
String accountName,
String contactName
) {
String query;
String condition = (String.isNotBlank(caseNumber)
? 'CaseNumber LIKE \'' + '%' + caseNumber + '%\''
: '');
condition += (String.isNotBlank(subject)
? (String.isNotBlank(condition) ? +' AND ' : '') +
' Subject LIKE \'' +
'%' +
subject +
'%\''
: '');
condition += (String.isNotBlank(accountName)
? (String.isNotBlank(condition) ? +' AND ' : '') +
' Account.Name LIKE \'' +
'%' +
accountName +
'%\''
: '');
condition += (String.isNotBlank(contactName)
? (String.isNotBlank(condition) ? +' AND ' : '') +
' Contact.Name LIKE \'' +
'%' +
contactName +
'%\''
: '');
condition += (String.isNotBlank(status)
? (String.isNotBlank(condition) ? +' AND ' : '') +
' Status LIKE \'' +
'%' +
status +
'%\''
: '');
condition += (String.isNotBlank(priority)
? (String.isNotBlank(condition) ? +' AND ' : '') +
' Priority LIKE \'' +
'%' +
Priority +
'%\''
: '');
System.debug('condition ' + condition);
if (String.isNotBlank(condition)) {
query =
'SELECT CaseNumber,Status,Subject,Account.Name,Contact.Name,Priority FROM Case WHERE ' +
condition +
' ORDER BY CaseNumber';
} else {
query = 'SELECT CaseNumber,Status,Subject,Account.Name,Contact.Name,Priority FROM Case ORDER BY CaseNumber LIMIT 200';
}
List<Case> records = Database.query(query);
return records;}}
LWC
JS FILE
import { LightningElement, wire, api, track } from "lwc";
import getCases from "@salesforce/apex/FilteredTableController.getCases";
import { NavigationMixin } from "lightning/navigation";
import { refreshApex } from "@salesforce/apex";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { getPicklistValues } from "lightning/uiObjectInfoApi";
import STATUS_FIELD from "@salesforce/schema/Case.Status";
import PRIORITY_FIELD from "@salesforce/schema/Case.Priority";
export default class FilteredTable extends NavigationMixin(
LightningElement
) {
@track data;
searchable = [];
wiredCaseCount;
wiredCases;
doneTypingInterval = 0;
statusPickListValues;
priorityPickListValues;
searchAllValue;
caseNumber = "";
accountName = "";
contactName = "";
subject = "";
status = null;
priority = null;
@wire(getCases, {
caseNumber: "$caseNumber",
accountName: "$accountName",
contactName: "$contactName",
subject: "$subject",
status: "$status",
priority: "$priority"
})
wiredSObjects(result) {
console.log("wire getting called");
this.wiredCases = result;
if (result.data) {
this.searchable = this.data = result.data.map((caseObj, index) => ({
caseData: { ...caseObj },
index: index + 1,
rowIndex: index
}));
} else if (result.error) {
console.error("Error", error);
}
}
@wire(getPicklistValues, {
recordTypeId: "$objectInfo.data.defaultRecordTypeId",
fieldApiName: STATUS_FIELD
})
statusPickLists({ error, data }) {
if (error) {
console.error("error", error);
} else if (data) {
this.statusPickListValues = [
{ label: "All", value: null },
...data.values
];
}
}
@wire(getPicklistValues, {
recordTypeId: "$objectInfo.data.defaultRecordTypeId",
fieldApiName: PRIORITY_FIELD
})
priorityPickListPickLists({ error, data }) {
if (error) {
console.error("error", error);
} else if (data) {
this.priorityPickListValues = [
{ label: "All", value: null },
...data.values
];
}
}
handleChange(event) {
this[event.target.name] = event.target.value;
console.log("change", this[event.target.name]);
}
handleKeyUp(event) {
clearTimeout(this.typingTimer);
let value = event.target.value;
let name = event.target.name;
this.typingTimer = setTimeout(() => {
this[name] = value;
}, this.doneTypingInterval);
}
clearSearch() {
this.caseNumber = "";
this.accountName = "";
this.contactName = "";
this.subject = "";
this.status = null;
this.priority = null;
this.searchable = this.data;
this.searchAllValue = "";
this.searchAll();
}
handleSearchAll(event) {
this.searchAllValue = event.target.value;
this.searchAll();
}
searchAll() {
let searchStr = this.searchAllValue.toLowerCase();
const regex = new RegExp(
"(^" + searchStr + ")|(." + searchStr + ")|(" + searchStr + "$)"
);
if (searchStr.length > 2) {
this.searchable = this.data.filter((item) => {
if (
regex.test(
item.caseData.CaseNumber.toLowerCase() +
" " +
item.caseData.CaseNumber.toLowerCase()
) ||
regex.test(
item.caseData.Status?.toLowerCase() +
" " +
item.caseData.Status?.toLowerCase()
) ||
regex.test(
item.caseData.Subject?.toLowerCase() +
" " +
item.caseData.Subject?.toLowerCase()
) ||
regex.test(
item.caseData.Account?.Name?.toLowerCase() +
" " +
item.caseData.Account?.Name?.toLowerCase()
) ||
regex.test(
item.caseData.Contact?.Name?.toLowerCase() +
" " +
item.caseData.Contact?.Name?.toLowerCase()
) ||
regex.test(
item.caseData.Priority?.toLowerCase() +
" " +
item.caseData.Priority?.toLowerCase()
)
) {
return item;
}
});
} else if (this.caseNumber.length <= 2) {
this.searchable = this.data;
}
console.log(this.searchable);
}
handleNavigate(event) {
event.preventDefault();
this[NavigationMixin.Navigate]({
type: "standard__recordPage",
attributes: {
actionName: "view",
recordId: event.target.dataset.id
}
});
}
}
<lightning-card variant="Narrow">
<lightning-layout multiple-rows>
<lightning-layout-item
size="12"
padding="around-small"
>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<td colspan="3">
<lightning-input
type="search"
variant="standard"
name="allfieldSearch"
label="Search All Fields"
placeholder="type text..."
min-length="3"
message-when-range-underflow="Type min 3 chars"
value={searchAllValue}
onchange={handleSearchAll}
></lightning-input>
</td>
<td colspan="3">The "Search all fields" searches in local data only, use below filters to
get data from server</td>
</tr>
<tr class="slds-line-height_reset">
<td
scope="col"
style="width: 20px"
>
<lightning-button-icon
variant="base"
size="small"
icon-name="utility:clear"
alternative-text="Clear Search"
onclick={clearSearch}
></lightning-button-icon>
</td>
<td scope="col">
<lightning-input
type="text"
variant="standard"
name="caseNumber"
value={caseNumber}
label="Search Case Number"
placeholder="type case number..."
onkeyup={handleKeyUp}
></lightning-input>
</td>
<td scope="col">
<lightning-input
type="text"
variant="standard"
name="accountName"
value={accountName}
label="Search Account"
placeholder="Account name..."
onkeyup={handleKeyUp}
></lightning-input>
</td>
<td scope="col">
<lightning-input
type="text"
variant="standard"
name="contactName"
value={contactName}
label="Search Contact"
placeholder="Contact number..."
onkeyup={handleKeyUp}
></lightning-input>
</td>
<td scope="col">
<lightning-input
type="text"
variant="standard"
name="subject"
value={subject}
label="Search Subject"
placeholder="Subject..."
onkeyup={handleKeyUp}
></lightning-input>
</td>
<td scope="col">
<lightning-combobox
name="status"
label="Status"
value={status}
placeholder="Search Status"
options={statusPickListValues}
onchange={handleChange}
></lightning-combobox>
</td>
<td scope="col">
<lightning-combobox
name="priority"
label="Priority"
value={priority}
placeholder="Search Priority"
options={priorityPickListValues}
onchange={handleChange}
></lightning-combobox>
</td>
</tr>
<tr class="slds-line-height_reset">
<th scope="col">Index</th>
<th scope="col">Case Number</th>
<th scope="col">Account Name</th>
<th scope="col">Contact</th>
<th scope="col">Subject</th>
<th scope="col">Status</th>
<th scope="col">Priority</th>
</tr>
</thead>
<tbody>
<tr
class="slds-hint-parent"
for:each={searchable}
for:item="item"
key={item.Id}
>
<td scope="col">{item.index}</td>
<th scope="row">
<a
href="#"
onclick={handleNavigate}
data-id={item.caseData.Id}
>{item.caseData.CaseNumber}
</a>
</th>
<th scope="row">
<span if:true={item.caseData.Account}>
<a
href="#"
onclick={handleNavigate}
data-id={item.caseData.Account.Id}
>
{item.caseData.Account.Name}
</a>
</span>
</th>
<th scope="row">
<span if:true={item.caseData.Contact}>
<a
href="#"
onclick={handleNavigate}
data-id={item.caseData.Contact.Id}
>
{item.caseData.Contact.Name}
</a>
</span>
</th>
<th scope="row">{item.caseData.Subject}</th>
<th scope="row">{item.caseData.Status}</th>
<th scope="row">{item.caseData.Priority}</th>
</tr>
</tbody>
</table>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>