AURA component to display and delete records:
public with sharing class AccountCtrl {
@AuraEnabled
public static List<Account> getAccountData(){
return [select Id,Name, AccountNumber from Account limit 50];
}
@AuraEnabled
public static List<Account> deleteAccount(String AccountId)
{
Account delAccount=[Select Id from Account where id=:AccountId];
delete delAccount;
return getAccountData();
}
}
Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"
access="global"
controller="AccountCtrl">
<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
<aura:attribute name="Acclist" type="list"/>
<div>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="AccountId">Accoount Id</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Account Number">Account Number</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Delete">Delete</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.Acclist}" var="item" >
<tr class="slds-hint-parent">
<td data-label="Account Id">
<div class="slds-truncate" title="{!item.Id}">{!item.Id}</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="{!item.Name}">{!item.Name}</div>
</td>
<td data-label="Site">
<div class="slds-truncate" title="{!item.AccountNumber}">{!item.AccountNumber}</div>
</td>
<td data-label="icon" class="slds-col slds-size_1-of-12" onclick="{!c.delete}" id="{!item.Id}">
<lightning:button label="Delete" iconName="utility:delete" iconPosition="right" variant="destructive" />
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>
Controller
----------
({
doinit: function(component) {
var action = component.get('c.getAccountData');
var self = this;
action.setCallback(this, function(actionResult) {
component.set('v.Acclist', actionResult.getReturnValue());
});
$A.enqueueAction(action);
},
delete : function(component, event) {
var action = component.get("c.deleteAccount");
action.setParams({AccountId:event.target.id});
action.setCallback(this, function(response) {
component.set("v.Acclist",response.getReturnValue());
});
$A.enqueueAction(action);
}
})
___________________________________________________________________
Create a search bar key to search Account name using lightning component.
Server Side Controller:
-----------------------
public class AccountsController {
@AuraEnabled
public static List <Account> getAccounts() {
return [SELECT Id, name FROM Account ORDER BY createdDate ASC];
}
@AuraEnabled
public static List<Account> findByName(String searchKey) {
String name = + searchKey + '%';
return [SELECT id, name FROM Account WHERE name LIKE :name];
}
}
Lightning Component:
--------------------
<aura:component controller="AccountsController">
<aura:attribute name="accounts" type="List" />
<aura:attribute name="key" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:input type="text" name="searchKey" label="Enter"
aura:id="searchKey" onchange="{!c.searchKeyChange}" placeholder="Search" />
<table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
<thead>
<tr class="slds-text-heading_label">
<th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="account">
<tr>
<td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
Controller:
-----------
({
doInit: function(component, event, helper) {
helper.getAccountList(component);
},
searchKeyChange: function(component, event) {
var searchKey = component.find("searchKey").get("v.value");
console.log('searchKey:::::'+searchKey);
var action = component.get("c.findByName");
action.setParams({
"searchKey": searchKey
});
action.setCallback(this, function(a) {
component.set("v.accounts", a.getReturnValue());
});
$A.enqueueAction(action);
}
})
Helper Class:
-------------
({
getAccountList: function(component) {
var action = component.get('c.getAccounts');
var self = this;
action.setCallback(this, function(actionResult) {
component.set('v.accounts', actionResult.getReturnValue());
});
$A.enqueueAction(action);
}
})
Lightning Application:
----------------------
<aura:application extends="force:slds">
<c:AccountList/>
</aura:application>
No comments:
Post a Comment