Pagination Of List Of Accounts In Lightning Component

PAGINATION  OF ACCOUNTS TABLE IN LIGHTNING COMPONENT


       Here we can display list accounts,Edit accounts, create new account and we can view an account.

COMPONENT

<aura:component controller="samplePagerCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <aura:attribute name="disAccRecTypeId" type="String"/>
    <aura:attribute name="profileName" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="isAsc" type="boolean" default="true" description="boolean flag for pass sorting condition to apex class"/> 
    <aura:attribute name="selectedTabsoft" type="string" default="Name" description="Use for show/hide arraow sign on header based on conditions"/>
    <aura:attribute name="disabled" type="boolean" default="false" />
    <aura:attribute name="Accounts" type="Account[]"/>
    <aura:attribute name="page" type="integer" description="using for store page Number"/>
    <aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
    <aura:attribute name="total" type="integer" description="total records count store "/>
    <div class="slds">
        <div class="wk_static">
            <div class="slds-page-header" role="banner">
                <div class="slds-grid">
                    <div class="slds-col slds-has-flexi-truncate">
                        <div class="slds-media slds-media--center slds-no-space slds-grow">
                            <div class="slds-media__figure">
                                <lightning:icon iconName="standard:account" size="small" alternativeText="Indicates approval"/> 
                            </div>
                            <div class="slds-media__body">
                                <h1 class="slds-page-header__title slds-m-right--small slds-truncate slds-align-middle" title="Accounts">Accounts-{!v.total}</h1>
                            </div>
                            <div class="slds-media__figure slds-media__figure--reverse slds-truncate">
                                <lightning:button variant="neutral" label="New" onclick="{! c.createRecord }" />
                            </div>
                        </div>                    
                    </div>                
                </div>
            </div>
        </div>  
        <form class="slds-form--stacked">
            <div class="slds-col--padded slds-p-top--large">
                <table class="slds-table slds-table--bordered slds-table--fixed-layout slds-table--resizable-cols slds-max-medium-table--stacked-horizontal" role="grid">
                    <thead>
                        <tr class="slds-line-height--reset" >
                            <th scope="col" style="width:3rem;">
                                <div class="slds-truncate" title="Edit">Edit</div>
                            </th>
                            <th class="slds-text-title--caps" scope="col" >
                                <div class="slds-truncate" title="Account Name" ng-click="sort('Account Name',$event)">Name<span class="{{Header[0]}}"></span></div>
                            </th>
                            <th class="slds-text-title--caps" scope="col">
                                <div class="slds-truncate" title="Account Tier">Tier</div>
                            </th>
                            <th class="slds-text-title--caps" scope="col">
                                <div class="slds-truncate" title="Terriotry Region">Terriotry Region</div>
                            </th>
                            <th class="slds-text-title--caps" scope="col">
                                <div class="slds-truncate" title="Counties">County</div>
                            </th>
                            <th class="slds-text-title--caps" scope="col">
                                <div class="slds-truncate" title="License">License</div>
                            </th>
                            <th class="slds-text-title--caps" scope="col">
                                <div class="slds-truncate" title="Samples">Samples</div>
                            </th>
                            <th scope="col" style="width:5.25rem;">
                                <div class="slds-truncate" title="New Order">Order</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <aura:iteration items="{!v.Accounts}" var="acc">
                            <tr class="slds-hint-parent">       
                                <!-- <c:accRow account="{!acc}" profileName="{!v.profileName}"/>-->
                                <td role="gridcell"  class="slds-cell-edit" data-label="Edit">
                                    <lightning:buttonIcon iconName="utility:edit" variant="bare" alternativeText="Edit" iconClass="dark" onclick="{!c.doEdit}" name="{!acc.Id}"/>
                                </td>
                                <th scope="row"  class="slds-cell-edit" data-label="Account Name">
                                    <div class="slds-truncate" title="{!acc.Name}">
                                        <a href="javascript:void(0);" role="menuitem" tabindex="-1" data-record="{!acc.Id}" onclick="{!c.doView}">
                                            <span class="slds-truncate">{!acc.Name}</span>
                                        </a>
                                    </div>
                                </th>
                                <aura:if isTrue="{!v.profileName == 'Dispensary Partner'}">
                                    <td role="gridcell"  class="slds-cell-edit" data-label="Dispensary Type">
                                        <div class="slds-truncate">{!acc.Dispensary_Type__c}</div>
                                    </td>
                                    <aura:set attribute="else">
                                        <td role="gridcell"  class="slds-cell-edit" data-label="Tier">
                                            <div class="slds-truncate">{!acc.Account_Tier__c}</div>
                                        </td>
                                        <td role="gridcell"  class="slds-cell-edit" data-label="Terriotry Region">
                                            <div class="slds-truncate">{!acc.unknown_custom_field}</div>
                                        </td>
                                        <td role="gridcell"  class="slds-cell-edit" data-label="County">
                                            <div class="slds-truncate">{!acc.Dispensary_County__c}</div>
                                        </td>
                                    </aura:set>
                                </aura:if>
                                <td role="gridcell"  class="slds-cell-edit" data-label="License">
                                    <div class="slds-truncate">{!acc.License__c}</div>
                                </td>
                                <td role="gridcell"  class="slds-cell-edit" data-label="Sample">
                                    <ui:outputCheckbox value="{!acc.Sample_Issued1__c}"/>
                                </td>
                                <td role="gridcell"  class="slds-cell-edit" data-label="Order">
                                    <div class="slds-truncate">
                                        <a href="../s/newOrder" onclick="{!c.newOrder}" data-record="{!acc.Id}">
                                            <span class="slds-icon_container" title="description of icon when needed">New
                                                <lightning:icon iconName="utility:new_window" size="xx-small" alternativeText="New Order"/>
                                            </span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </aura:iteration>
                    </tbody>
                </table>
            </div>
        </form>
        <div class="slds-docked-form-footer" style="{!if(v.total > 10, '', 'display:none')}">
            <div style="width:50%" class="hidePageSize">
                <ui:inputSelect aura:id="recordSize"  label="Display Record Per Page:" class="testDiv" change="{!c.onSelectChange}">
                    <ui:inputSelectOption text="10" label="10" value="true"/>
                    <ui:inputSelectOption text="15" label="15"/>
                    <ui:inputSelectOption text="20" label="20"/>
                </ui:inputSelect>
            </div>
            <div class="slds-text-body_regular">
                <lightning:button disabled="{!v.page == 1}" onclick="{!c.FirstPage}"  class="slds-button slds-button--neutral" label="First"/>
                <lightning:button disabled="{!v.page == 1}" onclick="{!c.previousPage}"  class="slds-button slds-button--neutral" label="Previous"/>
                <lightning:button disabled="{!v.page == v.pages}" onclick="{!c.nextPage}"  class="slds-button slds-button--neutral" label="Next"/>
                <lightning:button disabled="{!v.page == v.pages}" onclick="{!c.LastPage}"  class="slds-button slds-button--neutral" label="Last"/>
            </div>
        </div>
    </div>
</aura:component>

CLINT SIDE CONTROLLER

({
   doInit: function(component, event, helper) {
      var page = component.get("v.page") || 1;
      var recordToDisply = component.find("recordSize").get("v.value");
      helper.getAccounts(component, page, recordToDisply,helper);
        },
   previousPage: function(component, event, helper) {
      var page = component.get("v.page") || 1;
        if(page> 1){
      var direction = event.getSource().get("v.label");
      var recordToDisply = component.find("recordSize").get("v.value");
      page = direction === "Previous" ? (page - 1) : (page + 1);
      helper.getAccounts(component, page, recordToDisply,helper);
}
   },

   nextPage: function(component, event, helper) {
       var ps=component.get("v.pages");
      var page = component.get("v.page") || 1;
        if( page < ps){
      var direction = event.getSource().get("v.label");
      var recordToDisply = component.find("recordSize").get("v.value");
      page = direction ==="Previous" ? (page - 1) : (page + 1);
      helper.getAccounts(component, page, recordToDisply,helper);
   }
   },
   onSelectChange: function(component, event, helper) {
      // this function call on the select opetion change,  
      var page = 1
      var recordToDisply = component.find("recordSize").get("v.value");
      helper.getAccounts(component, page, recordToDisply,helper);
   },
   
      LastPage : function(component, event, helper) {
        component.set("v.page",component.get("v.pages"));
        var recordToDisply = component.find("recordSize").get("v.value");
        helper.getAccounts(component, component.get("v.pages"), recordToDisply,component.get('v.selectedTabsoft'), component.get("v.isAsc"));
    },
     FirstPage : function(component, event, helper) {
        component.set("v.page",1);
        var recordToDisply = component.find("recordSize").get("v.value");
        helper.getAccounts(component, 1, recordToDisply,component.get('v.selectedTabsoft'), component.get("v.isAsc"));
    }, 
    createRecord : function (component, event, helper) {
        var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
            "entityApiName": "Account",
            "recordTypeId": component.get('v.disAccRecTypeId')
        });
        createRecordEvent.fire();
    } ,
    
 doView: function(component, event, helper) {
        //console.log(event.currentTarget.dataset.record);
        var editRecordEvent = $A.get("e.force:navigateToSObject");
        editRecordEvent.setParams({
            "recordId": event.currentTarget.dataset.record
             
        });
        editRecordEvent.fire();
    },
    doEdit: function(component, event, helper) {
       // console.log(event.getSource().get("v.name") );
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": event.getSource().get("v.name")
        });
        editRecordEvent.fire();
    },
    newOrder: function(component, event, helper) {
        var action = component.get("c.getAccountId");
        action.setParams({
            "accountId": event.currentTarget.dataset.record
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('Contacts : ' + JSON.stringify(response.getReturnValue()));
            }
        });
        $A.enqueueAction(action);
    }

})

HELPER

({
   getAccounts: function(component, page, recordToDisply,helper) {
      // create a server side action. 
      var action = component.get("c.fetchAccount");
      // set the parameters to method 
      action.setParams({
         "pageNumber": page,
         "recordToDisply": recordToDisply
      });
      // set a call back   
      action.setCallback(this, function(response) {
       
        
         // set the component attributes value with wrapper class properties.   
  var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                 var result = response.getReturnValue();
                 console.log('result ---->' + JSON.stringify(result));
         component.set("v.Accounts", result.accounts);
         component.set("v.page", result.page);
         component.set("v.total", result.total);
         component.set("v.pages", Math.ceil(result.total / recordToDisply));
          //this.getDispRecTypeId(component, response.getReturnValue().length==0);
                this.getProfileName(component);
            }
      });
      $A.enqueueAction(action);
   },
    
    getProfileName: function(component){
        console.log('helper 2');
        var actionpn = component.get("c.getProfileName");
        actionpn.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.profileName",response.getReturnValue());
            }
        });
        $A.enqueueAction(actionpn); 
    }
})


STYLE

.THIS .testDiv {
    width :17%;
    
}

SERVER SIDE CONTROLLER

public with sharing class samplePagerCtrl {
   @AuraEnabled
 public static AccountPagerWrapper fetchAccount(Decimal pageNumber ,Integer recordToDisply) {
      Integer pageSize = recordToDisply;
      Integer offset = ((Integer)pageNumber - 1) * pageSize;
     
    // create a instance of wrapper class.
    AccountPagerWrapper obj =  new AccountPagerWrapper();
    // set the pageSize,Page(Number), total records and accounts List(using OFFSET)   
        obj.pageSize = pageSize;
        obj.page = (Integer) pageNumber;
        obj.total = [SELECT count() FROM account];
        obj.accounts = [SELECT Id, Name,Phone FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
    // return the wrapper class instance .
        return obj;
     }
    
 // create a wrapper class with @AuraEnabled Properties    
 public class AccountPagerWrapper {
    @AuraEnabled public Integer pageSize {get;set;}
    @AuraEnabled public Integer page {get;set;}
    @AuraEnabled public Integer total {get;set;}
    @AuraEnabled public List<Account> accounts {get;set;}
   }
}



RESULT





Comments

Post a Comment

Popular posts from this blog

Configur Docusign For Salesforce

Image
DocuSign For Salesforce The basic steps are : Step 1:Sign in or create a Docusign account ( Refer  sfdcsireesha.blogspot.in --Docusign Integration With Salesforce). Step 2:Connect salesforce to Docusign( Refer  sfdcsireesha.blogspot.in --Docusign Integration With Salesforce). . Steps To Configure Docusign For Salesforce: Step 1:  After installing the DocuSign for Salesforce managed package, select the  DocuSign Admin  tab in Salesforce to bring up the DocuSign Log In view Step 2: Log in to your DocuSign Account:  Use an existing DocuSign admin account.                                                          Or Step 2: Sign up for a Free DocuSign Trial:  This creates a new account with a complementary 30-day free trial.  The free trial account is automatically directed to the DocuSign Production environment Step 3: Connect your DocuSign account with your Salesforce account, adding DocuSign as a Trusted Network in Salesforce. Enter your Salesforce credentials,
Read more

How To Make DataTable Column Resizable

Image
First, we will use the dummy table shared by the  Lightning Design System . We need to store the original width of the selected column to calculate the new width for which we have defined the oldWidth attribute to store the value. We also need the distance of the selected column width from the left of the screen to identify the start point from where user start to drag the column. We have used mouseStart attribute for the same. We have used two mouse events to identify when user start to drag and when user is dragging the column for adjusting the width. onmousedown  will be fired when user click on the column divider element and ondrag  will be fired when user is dragging th . Component : <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >     <aura:attribute name="mouseStart" type="string" />     <aura:attribute name="
Read more

Lightning:recordForm - Lightning Data Service

Image
Lightning:recordForm is a very powerful component for editing, viewing and adding a record in lightning and combines both lightning:recordEditForm and lightning:recordViewForm. Here is an example lightning component for lightning:recordForm. Lightning Component:- <aura:component implements="flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId" access="global" >     <aura:attribute name="fieldsList" type="String[]" default="['Id', 'Name', 'BillingAddress', 'Phone' , 'Type']"/>     <div class="THIS">                <lightning:recordForm                               recordId="{!v.recordId}"                               objectApiName="{!v.sObjectName}"                               fields="{!v.fieldsList}"                               columns="2"                               mode="View&qu
Read more