Notes
HTML
<template>
<lightning-card title="Case Filter">
<!-- Priority Filter -->
<lightning-radio-group
name="Priority"
label="Priority"
options={options}
value={priority}
onchange={handlePriorityChange}>
</lightning-radio-group>
<!-- Origin Filter -->
<lightning-radio-group
name="Origin"
label="Origin"
options={originOptions}
value={origin}
onchange={handleOriginChange}>
</lightning-radio-group>
<!-- Status Filter -->
<lightning-radio-group
name="Status"
label="Status"
options={statusOptions}
value={status}
onchange={handleStatusChange}>
</lightning-radio-group>
<!-- Displaying Filtered Cases -->
<template if:true={cases}>
<lightning-layout>
<lightning-layout-item padding="around-medium">
<template for:each={cases} for:item="caseRecord">
<lightning-card key={caseRecord.Id} title={caseRecord.CaseNumber}>
<p><strong>Priority:</strong> {caseRecord.Priority}</p>
<p><strong>Status:</strong> {caseRecord.Status}</p>
<p><strong>Origin:</strong> {caseRecord.Origin}</p>
</lightning-card>
</template>
</lightning-layout-item>
</lightning-layout>
</template>
</lightning-card>
</template>
JavaScript
import { LightningElement, wire, track } from 'lwc';
import getFilteredCases from '@salesforce/apex/CaseController.getFilteredCases';
export default class CaseFilter extends LightningElement {
@track cases = [];
priority = '';
origin = '';
status = '';
options = [
{ label: 'High', value: 'High' },
{ label: 'Medium', value: 'Medium' },
{ label: 'Low', value: 'Low' }
];
originOptions = [
{ label: 'Phone', value: 'Phone' },
{ label: 'Email', value: 'Email' },
{ label: 'Web', value: 'Web' }
];
statusOptions = [
{ label: 'New', value: 'New' },
{ label: 'In Progress', value: 'In Progress' },
{ label: 'Closed', value: 'Closed' }
];
@wire(getFilteredCases, { priority: '$priority', origin: '$origin', status: '$status' })
wiredCases({ error, data }) {
if (data) {
this.cases = data;
} else if (error) {
console.error('Error fetching cases:', error);
}
}
handlePriorityChange(event) {
this.priority = event.detail.value;
}
handleOriginChange(event) {
this.origin = event.detail.value;
}
handleStatusChange(event) {
this.status = event.detail.value;
}
}
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="FormattedTimeLWC">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Apex
public with sharing class CaseController {
@AuraEnabled(cacheable=true)
public static List<Case> getFilteredCases(String priority, String origin, String status) {
String query = 'SELECT Id, CaseNumber, Status, Priority, Origin FROM Case WHERE 1=1';
if (priority != null && priority != '') {
query += ' AND Priority = :priority';
}
if (origin != null && origin != '') {
query += ' AND Origin = :origin';
}
if (status != null && status != '') {
query += ' AND Status = :status';
}
return Database.query(query);
}
}
