render the aura data-table based on case status button click.

Hi guys,
Been working on this for a while but unable to fugure out.
i want to render the table only based on the click of the buttons i.e,
if i click the open cases the table should filter and load all the open cases and
if i click the closed cases the table should filter and load all the closed cases and like that.
but iam not able to comprehend this.
can anyone please help me figure this out.
User-added image

---------------------------------apex controller----------------------------
public class portalCases {
@AuraEnabled
public static list <Case> fetchCase() {
Return [SELECT CaseNumber,Category__c,Case_Sub_Category__c,Subject,CreatedDate FROM Case];

}
}
----------------------------------component------------------------------
<aura:component controller="portalCases" implements="force:appHostable,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">

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

<aura:attribute name="lstAllCase" type="Case[]"/>

<div class="slds-m-around_xx-large, slds-align_absolute-center" id="myDIV">
    
<button class="btn active" onclick="{!c.myAction}">Open Cases</button>    
<button class="btn" onclick="{!c.myAction}">Closed Cases</button>    
<button class="btn" onclick="{!c.myAction}">All Cases</button>    
</div>

<div class="slds-m-around_medium">
<table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%" >
<thead>
<tr>
<th>Case Number</th>
<th>Category</th>
<th>Sub Category</th>
<th>Subject</th>
<th>Created Date</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.lstAllCase}" var="cas">
<tr>
<td>{!cas.CaseNumber}</td>
<td>{!cas.Category__c}</td>
<td>{!cas.Case_Sub_Category__c}</td>
<td>{!cas.Subject}</td>
<td>{!cas.CreatedDate}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>

</aura:component>

----------------------------------JScontroller-------------------------------------
({
doInit : function(component,event,helper){
//call apex class method
var action = component.get('c.fetchCase');
action.setCallback(this, function(response) {
//store state of response
var state = response.getState();
if (state === "SUCCESS") {
    component.set('v.lstAllCase', response.getReturnValue());
}
});
$A.enqueueAction(action);
},

myAction : function(component, event, helper) {
// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
},
})
----------------------------CSS---------------------------
.THIS {
}

.THIS .btn {
border: none;
outline: none;
padding: 10px 16px;
border-radius: 8px;
background-color: #f1f1f1;
cursor: pointer;
}

/* Style the active class (and buttons on mouse-over) */
.THIS .active, .THIS .btn:hover {
background-color: #1f0663;
color: white;
}

March 1, 2021
·
Like
0
·
Follow
0

Best Answer chosen by Hm_invi

Dushyant Sonwar
Krishna,

I did some tweaks in your existing code. Try with below code.
<aura:component controller="portalCases" implements="force:appHostable,force:hasRecordId,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="lstAllCase" type="Case[]"/> <aura:attribute name="filterlstCases" type="Case[]"/> <div class="slds-m-around_xx-large, slds-align_absolute-center" id="myDIV">      <lightning:button aura:id="opencaseBtn" onclick="{!c.filteropencases}" label="Open Cases" /> <lightning:button aura:id="closecaseBtn" onclick="{!c.filterclosecases}" label="Closed Cases" /> <lightning:button aura:id="allcaseBtn" onclick="{!c.showallcases}" label="All Cases" /> </div> <div class="slds-m-around_medium"> <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%" > <thead> <tr> <th>Case Number</th> <th>Priority</th> <th>Status</th> <th>Subject</th> <th>Created Date</th> </tr> </thead> <tbody> <aura:iteration items="{!v.filterlstCases}" var="cas"> <tr> <td>{!cas.CaseNumber}</td> <td>{!cas.Priority}</td> <td>{!cas.Status}</td> <td>{!cas.Subject}</td> <td>{!cas.CreatedDate}</td> </tr> </aura:iteration> </tbody> </table> </div> </aura:component>

Controller JS
({ doInit : function(component,event,helper){ //call apex class method var action = component.get('c.fetchCase'); action.setCallback(this, function(response) { //store state of response var state = response.getState(); if (state === "SUCCESS") { component.set('v.lstAllCase', response.getReturnValue()); helper.filterByStatus(component , 'All'); $A.util.removeClass(component.find('opencaseBtn'), 'slds-button_brand'); $A.util.removeClass(component.find('closecaseBtn'), 'slds-button_brand'); $A.util.addClass(component.find('allcaseBtn'), 'slds-button_brand'); } }); $A.enqueueAction(action); }, filteropencases : function(component, event, helper) { $A.util.addClass(component.find('opencaseBtn'), 'slds-button_brand'); $A.util.removeClass(component.find('closecaseBtn'), 'slds-button_brand'); $A.util.removeClass(component.find('allcaseBtn'), 'slds-button_brand'); helper.filterByStatus(component , 'Open'); }, filterclosecases : function(component, event, helper) { $A.util.removeClass(component.find('opencaseBtn'), 'slds-button_brand'); $A.util.addClass(component.find('closecaseBtn'), 'slds-button_brand'); $A.util.removeClass(component.find('allcaseBtn'), 'slds-button_brand'); helper.filterByStatus(component , 'Closed'); }, showallcases : function(component, event, helper) { $A.util.removeClass(component.find('opencaseBtn'), 'slds-button_brand'); $A.util.removeClass(component.find('closecaseBtn'), 'slds-button_brand'); $A.util.addClass(component.find('allcaseBtn'), 'slds-button_brand'); helper.filterByStatus(component , 'All'); } })

Helper Function
({ filterByStatus : function(component , status) { var allcases = component.get('v.lstAllCase'); var filteredcases = []; for(var i=0;i<allcases.length ; i++){ if(status == 'All'){ filteredcases.push(allcases[i]); } else if(status == 'Open'){ if(allcases[i].Status != 'Closed'){ filteredcases.push(allcases[i]); } } else{ if(allcases[i].Status == status){ filteredcases.push(allcases[i]); } } } component.set('v.filterlstCases', filteredcases); } })

public class portalCases { @AuraEnabled public static list <Case> fetchCase() { Return [SELECT CaseNumber,Priority,Status,Subject,CreatedDate FROM Case]; } }

Let me know how it goes. You can do alteration acording to your need

March 1, 2021
·
Like
1
·
Dislike
0

Danish Hoda
Hi Krishna,
Proceed with this logic -
1. lstAllCase contains all your cases from the Apex, but craete an attribute visibleCase to get the cases record related to your button clicks
2. On button click, check the label of the button (event.target.label) and filter out the related cases into visibleCase attribute from the lstAllCase attribute

March 1, 2021
·
Like
2
·
Dislike
0

This was selected as the best answer

Hm_invi
Thank you very much Dushyant.
i have another doubt. how can i create onClick action for the case number.
like i have to open another page with the case details on it when i click on the case number in the table.
Plz help me regarding that.

March 2, 2021
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

render the aura data-table based on case status button click.

All Answers

You need to sign in to do that.