You need to sign in to do that
Don't have an account?
Jauhien Leaniuk
Only name column in my table shown when i start my app
Only name column in my table shown when I start my app.
When I type something in search box or all fields of the table appears, but at the start of the component, only name filed showed.
Here is my
component
helper
Apex class
When I type something in search box or all fields of the table appears, but at the start of the component, only name filed showed.
Here is my
component
<aura:component controller="SortableAccountTableController" description="Account table with column sorting example" implements="flexiPage:availableForAllPageTypes"> <aura:handler name="init" value="{!this}" action="{!c.onInit}"/> <!--aura attributes--> <aura:attribute name="contactColumns" type="List"/> <aura:attribute name="contactData" type="Object"/> <aura:attribute name="sortBy" type="String"/> <aura:attribute name="sortDirection" type="String"/> <aura:attribute name="filteredData" type="Map"/> <!--Page header--> <div class="slds-page-header" role="banner"> <span class="slds-text-heading_medium">Contacts List</span> <span class="slds-page-header__title">10 per Page</span> </div> <!-- New button added --> <lightning:button label="New" onclick="{!c.newContact}" /> <lightning:input onchange="{!c.searchTable}" type="search" label="Searh" variant="label-hidden" placeholder="Enter search term" aura:id="SearchBox"/> <!--Lightning data table markup--> <lightning:datatable aura:id="accountTable" keyField="Id" hideCheckboxColumn="true" columns="{!v.contactColumns}" data="{!v.filteredData}" sortedBy="{!v.sortBy}" sortedDirection="{!v.sortDirection}" onsort="{!c.handleSort}"/> </aura:component>
controller
({ onInit : function(component,event,helper){ // Setting column information.To make a column sortable,set sortable as true on component load component.set("v.contactColumns",[ { label : 'Name', fieldName : 'Name', type : 'Name', sortable : true }, { label : 'Phone', fieldName : 'Phone', type : 'Phone', sortable : true }, { label : 'Contact Level', fieldName : 'Contact_Level__c', type : 'Picklist', sortable : true }, { label : 'Account', fieldName : 'Account', type : 'Lookup', sortable : true }, { label : 'Owner', fieldName : 'OwnerId', type : 'lookup', sortable : true }, { label : 'Created By', fieldName : 'CreatedById', type : 'Lookup(User)', sortable : true }, { label : 'Created Date', fieldName : 'CreatedDate', type : 'Date/Time', sortable : true }, ]); var action = component.get("c.fetchData"); action.setCallback(this, function(response){ var state = response.getState(); if (state === "SUCCESS") { component.set("v.contactData", response.getReturnValue()); component.set("v.filteredData", response.getReturnValue()); } }); $A.enqueueAction(action); // call helper function to fetch account data from apex helper.getAccountData(component); }, //Method gets called by onsort action, handleSort : function(component,event,helper){ //Returns the field which has to be sorted var sortBy = event.getParam("fieldName"); //returns the direction of sorting like asc or desc var sortDirection = event.getParam("sortDirection"); //Set the sortBy and SortDirection attributessadsad component.set("v.sortBy",sortBy); component.set("v.sortDirection",sortDirection); // call sortData helper function helper.sortData(component,sortBy,sortDirection); }, searchTable : function(cmp,event,helper) { var allRecords = cmp.get("v.contactData"); var searchFilter = event.getSource().get("v.value").toUpperCase(); var tempArray = []; var i; for(i=0; i < allRecords.length; i++){ if((allRecords[i].Name && allRecords[i].Name.toUpperCase().indexOf(searchFilter) != -1)) { tempArray.push(allRecords[i]); } } cmp.set("v.filteredData",tempArray); }, // Function used to create a new Contact newContact: function(component, event, helper) { // Global event force:createRecord is used var createContact = $A.get("e.force:createRecord"); // Parameters like apiName and defaultValues are set createContact.setParams({ "entityApiName": "Contact", "defaultFieldValues": { "AccountId": component.get("v.recordId") } }); // Event fired and new contact dialog open createContact.fire(); }, })
helper
({ getAccountData : function(component){ //Load the Account data from apex var action = component.get("c.getAccounts"); var toastReference = $A.get("e.force:showToast"); action.setCallback(this,function(response){ var state = response.getState(); if(state == "SUCCESS"){ var accountWrapper = response.getReturnValue(); if(accountWrapper.success){ //Setting data to be displayed in table component.set("v.contactData",accountWrapper.contactList); toastReference.setParams({ "type" : "Success", "title" : "Success", "message" : accountWrapper.message, "mode" : "dismissible" }); } // handel server side erroes, display error msg from response else{ toastReference.setParams({ "type" : "Error", "title" : "Error", "message" : accountWrapper.message, "mode" : "sticky" }); } } // handel callback error else{ toastReference.setParams({ "type" : "Error", "title" : "Error", "message" : 'An error occurred during initialization '+state, "mode" : "sticky" }); } toastReference.fire(); }); $A.enqueueAction(action); }, sortData : function(component,fieldName,sortDirection){ var data = component.get("v.filteredData"); //function to return the value stored in the field var key = function(a) { return a[fieldName]; } var reverse = sortDirection == 'asc' ? 1: -1; // to handel number/currency type fields if(fieldName == 'NumberOfEmployees'){ data.sort(function(a,b){ var a = key(a) ? key(a) : ''; var b = key(b) ? key(b) : ''; return reverse * ((a>b) - (b>a)); }); } else{// to handel text type fields data.sort(function(a,b){ var a = key(a) ? key(a).toLowerCase() : ''; //To handle null values , uppercase records during sorting var b = key(b) ? key(b).toLowerCase() : ''; return reverse * ((a>b) - (b>a)); }); } //set sorted data to accountData attribute component.set("v.filteredData",data); } })
Apex class
public class SortableAccountTableController { // wrapper class public class AccountWrapper{ @AuraEnabled public String message; @AuraEnabled public List<Contact> contactList; @AuraEnabled public Boolean success; } //Return account records and message to be displayed in toast @AuraEnabled public static AccountWrapper getAccounts(){ AccountWrapper accountWrapper = new AccountWrapper(); try{ accountWrapper.contactList = [SELECT ID, Name, Phone, Contact_Level__c, AccountId, OwnerId, CreatedById, CreatedDate FROM Contact LIMIT 50]; accountWrapper.message = 'Account records are retrieved '; accountWrapper.success = true; } catch(Exception e){ accountWrapper.message = e.getMessage(); accountWrapper.success = false; } return accountWrapper; } @AuraEnabled public static List<sObject> fetchData() { //Query and return list of Contacts List<SObject> objRecords = [SELECT Name from Contact LIMIT 20]; return objRecords; } }
Best Answer chosen by Jauhien Leaniuk
Jauhien Leaniuk
Ok I didnt pay attention to the last method. True version is this: