You need to sign in to do that
Don't have an account?
Hm_invi
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.
---------------------------------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;
}
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.
---------------------------------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;
}
I did some tweaks in your existing code. Try with below code.
Controller JS
Helper Function
Let me know how it goes. You can do alteration acording to your need
All Answers
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
I did some tweaks in your existing code. Try with below code.
Controller JS
Helper Function
Let me know how it goes. You can do alteration acording to your need
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.