• raghavendra kiran 9
  • NEWBIE
  • 10 Points
  • Member since 2018

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 3
    Questions
  • 4
    Replies
public class ContactClass {
@AuraEnabled
    public static list<contact> getCon(){
        list<contact> con =[select id,firstname,lastname,phone,email from contact ];
        return con;
    }
}
component:
<aura:component controller='ContactClass' implements='force:appHostable'>
    <aura:attribute name='myContact' type='object'/>
    <aura:attribute name='myColumn' type='list'/>
    <aura:handler name='init' value='{!this}' action='{!c.doit}'/>
    <p>Dynamically created Table</p>
    <lightning:button label='Viewdatatable' variant='inverse' onclick='{!c.done}'/>
    {!v.body}
</aura:component>
 
controller:

({
    doit : function(component, event, helper) {
        component.set('v.myColumn',[
            {label:'FirstName',field:'FirstName',type:'text'},
            {label:'LastName',field:'LastName',type:'text'},
            {label:'Phone',field:'Phone',type:'phone'},
            {label:'Email',field:'Email',type:'email'}
        ]);
       var c= component.get('c.getCon');
        c.setCallback(this,function(response){
            var state= response.getState();
            alert(state);
            if(state=='SUCCESS'){
                var result = response.getReturnValue();
                component.set('v.myContact',result);
            }else{
                alert('error');
            }
        });
        $A.enqueueAction(c);
    },
    getSelect:function(component,event,helper){
        var select= event.getParam('selectedRows');
        alert(select);
    },
    done:function(component,event,helper){
         $A.createComponent('lightning:datatable',
                           {
                               'keyField':'Id',
                               'columns':component.get('v.myColumn'),
                               'data':component.get('v.myContact'),
                               'maxRowSelection':'3',
                               'onrowselection':component.getReference('c.getSelect')
                           },
                           function(comp,status,errorMessage){
                               if(status=='SUCCESS'){
                                   alert('this'+status);
                                   var bdy = component.get('v.body');
                                   bdy.push(comp);
                                   component.set('v.body',bdy);
                               }else if(status=='INCOMPLETE'){
                                   alert('incomplete');
                               }else if(status=='ERROR')
                                   alert(errorMessage);
                           }
                           
        );
    }
})
 
User-added image
i have done coding for the datatable but getting the header section i.e All Accounts and DropDown of LIstViews,
i dont know how to do it...for the lignting component
<aura:component controller='AccountDataTable8' implements='force:appHostable'>
    <!--attribute -->
    <aura:attribute name='myData' type='object' />
    <aura:attribute name='myColumns' type='list'/>
    <aura:attribute name='limitRows' type='integer' default='5'/>
    <aura:attribute name='offsetLimit' type='integer' default='0'/>
    <aura:attribute name='countRows' type='integer' default='5'/>
    <aura:attribute name='sortBy' type='string'/>
    <aura:attribute name='sortByDirection' type='string' />
    <aura:attribute name="defaultSortDirection" type="string"/>
    <!-- /attribute -->
    <!--handler -->
    <aura:handler name='init' value='{!this}' action='{!c.show}'/>
    <!--/handler -->
    <div class='slds-m-around__xx-small' style='height:180px'>      
        <lightning:datatable data='{!v.myData}' columns='{!v.myColumns}' keyField ='Id' 
                              onsort='{!c.handleSort}' sortedBy='{!v.sortBy}' 
                             sortedDirection='{!v.sortByDirection}'
                              defaultSortDirection="{!v.defaultSortDirection }"/>  
                  </div>
      </lightning:card>
</aura:component>

controller===
({
    show : function(component, event, helper) {
        helper.one(component);
    },
 handleSort:function(component,event,helper){
          var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        // assign the latest attribute with the sorted column fieldName and sorted direction
       component.set("v.sortBy", fieldName);
       component.set("v.sortByDirection", sortDirection);
        helper.sort(component, fieldName, sortDirection);
}
})
helper===
({
    one : function(component) {
       var actionRow =[
            {label:'NEW',name:'NEW'},
            {label:'EDIT',name:'EDIT'},
            {label:'VIEW',name:'VIEW'},
            {label:'DELETE',name:'DELETE'}
        ];
        component.set('v.myColumns',[
            {label:'AccountName',fieldName:'AccountName',sortable:true,type:'url',
             typeAttributes:{label:{fieldName:'Name'},target:'_blank'}},
            {label:'Type',fieldName:'Type',type:'text',sortable:true},
            {label:'Phone',fieldName:'Phone',type:'phone'},
            {type:'action',typeAttributes:{rowActions:actionRow}}
        ]);
        var getaccs = component.get('c.getAllAccountsVar');
       // var limit =component.get('v.limitRows');
        getaccs.setParams({
            'intLimit':component.get('v.limitRows'),
            'intOffset':component.get('v.offsetLimit')
        }); 
        getaccs.setCallback(this,function(response){
            var state = response.getState();
            if(state==='SUCCESS'){
                var results = response.getReturnValue();
                results.forEach(function(record){
                    record.AccountName = '/'+record.Id; 
                    
                });
                component.set('v.myData',results);
                component.set('v.offsetLimit',component.get('v.countRows'));
                 component.set('v.loadMoreStatus','Scroll To Load Data');
            }else{
                alert('error is here ');
            }
        });
        $A.enqueueAction(getaccs);
    }
 sort:function(component,fieldName,sortDirection){
         var data = component.get("v.myData");
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        data.sort(this.sortBy(fieldName, reverse))
        component.set("v.myData", data);
 },
    sortBy:function(field,reverse,primer){
 var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    }
    
})

public class AccountDataTable8 {
@AuraEnabled
    public static list<account> getAllAccountsVar(integer intLimit,integer intOffset){
        integer limitvar = integer.valueOf(intLimit);
        integer offsetvar = integer.valueOf(intOffset);
        list<account> acc=[select id,Name,type,phone from account limit:limitvar offset:offsetvar];
        return acc;
    }

 
public class ContactClass {
@AuraEnabled
    public static list<contact> getCon(){
        list<contact> con =[select id,firstname,lastname,phone,email from contact ];
        return con;
    }
}
component:
<aura:component controller='ContactClass' implements='force:appHostable'>
    <aura:attribute name='myContact' type='object'/>
    <aura:attribute name='myColumn' type='list'/>
    <aura:handler name='init' value='{!this}' action='{!c.doit}'/>
    <p>Dynamically created Table</p>
    <lightning:button label='Viewdatatable' variant='inverse' onclick='{!c.done}'/>
    {!v.body}
</aura:component>
 
controller:

({
    doit : function(component, event, helper) {
        component.set('v.myColumn',[
            {label:'FirstName',field:'FirstName',type:'text'},
            {label:'LastName',field:'LastName',type:'text'},
            {label:'Phone',field:'Phone',type:'phone'},
            {label:'Email',field:'Email',type:'email'}
        ]);
       var c= component.get('c.getCon');
        c.setCallback(this,function(response){
            var state= response.getState();
            alert(state);
            if(state=='SUCCESS'){
                var result = response.getReturnValue();
                component.set('v.myContact',result);
            }else{
                alert('error');
            }
        });
        $A.enqueueAction(c);
    },
    getSelect:function(component,event,helper){
        var select= event.getParam('selectedRows');
        alert(select);
    },
    done:function(component,event,helper){
         $A.createComponent('lightning:datatable',
                           {
                               'keyField':'Id',
                               'columns':component.get('v.myColumn'),
                               'data':component.get('v.myContact'),
                               'maxRowSelection':'3',
                               'onrowselection':component.getReference('c.getSelect')
                           },
                           function(comp,status,errorMessage){
                               if(status=='SUCCESS'){
                                   alert('this'+status);
                                   var bdy = component.get('v.body');
                                   bdy.push(comp);
                                   component.set('v.body',bdy);
                               }else if(status=='INCOMPLETE'){
                                   alert('incomplete');
                               }else if(status=='ERROR')
                                   alert(errorMessage);
                           }
                           
        );
    }
})
 
User-added image
i have done coding for the datatable but getting the header section i.e All Accounts and DropDown of LIstViews,
i dont know how to do it...for the lignting component
<aura:component controller='AccountDataTable8' implements='force:appHostable'>
    <!--attribute -->
    <aura:attribute name='myData' type='object' />
    <aura:attribute name='myColumns' type='list'/>
    <aura:attribute name='limitRows' type='integer' default='5'/>
    <aura:attribute name='offsetLimit' type='integer' default='0'/>
    <aura:attribute name='countRows' type='integer' default='5'/>
    <aura:attribute name='sortBy' type='string'/>
    <aura:attribute name='sortByDirection' type='string' />
    <aura:attribute name="defaultSortDirection" type="string"/>
    <!-- /attribute -->
    <!--handler -->
    <aura:handler name='init' value='{!this}' action='{!c.show}'/>
    <!--/handler -->
    <div class='slds-m-around__xx-small' style='height:180px'>      
        <lightning:datatable data='{!v.myData}' columns='{!v.myColumns}' keyField ='Id' 
                              onsort='{!c.handleSort}' sortedBy='{!v.sortBy}' 
                             sortedDirection='{!v.sortByDirection}'
                              defaultSortDirection="{!v.defaultSortDirection }"/>  
                  </div>
      </lightning:card>
</aura:component>

controller===
({
    show : function(component, event, helper) {
        helper.one(component);
    },
 handleSort:function(component,event,helper){
          var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        // assign the latest attribute with the sorted column fieldName and sorted direction
       component.set("v.sortBy", fieldName);
       component.set("v.sortByDirection", sortDirection);
        helper.sort(component, fieldName, sortDirection);
}
})
helper===
({
    one : function(component) {
       var actionRow =[
            {label:'NEW',name:'NEW'},
            {label:'EDIT',name:'EDIT'},
            {label:'VIEW',name:'VIEW'},
            {label:'DELETE',name:'DELETE'}
        ];
        component.set('v.myColumns',[
            {label:'AccountName',fieldName:'AccountName',sortable:true,type:'url',
             typeAttributes:{label:{fieldName:'Name'},target:'_blank'}},
            {label:'Type',fieldName:'Type',type:'text',sortable:true},
            {label:'Phone',fieldName:'Phone',type:'phone'},
            {type:'action',typeAttributes:{rowActions:actionRow}}
        ]);
        var getaccs = component.get('c.getAllAccountsVar');
       // var limit =component.get('v.limitRows');
        getaccs.setParams({
            'intLimit':component.get('v.limitRows'),
            'intOffset':component.get('v.offsetLimit')
        }); 
        getaccs.setCallback(this,function(response){
            var state = response.getState();
            if(state==='SUCCESS'){
                var results = response.getReturnValue();
                results.forEach(function(record){
                    record.AccountName = '/'+record.Id; 
                    
                });
                component.set('v.myData',results);
                component.set('v.offsetLimit',component.get('v.countRows'));
                 component.set('v.loadMoreStatus','Scroll To Load Data');
            }else{
                alert('error is here ');
            }
        });
        $A.enqueueAction(getaccs);
    }
 sort:function(component,fieldName,sortDirection){
         var data = component.get("v.myData");
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        data.sort(this.sortBy(fieldName, reverse))
        component.set("v.myData", data);
 },
    sortBy:function(field,reverse,primer){
 var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    }
    
})

public class AccountDataTable8 {
@AuraEnabled
    public static list<account> getAllAccountsVar(integer intLimit,integer intOffset){
        integer limitvar = integer.valueOf(intLimit);
        integer offsetvar = integer.valueOf(intOffset);
        list<account> acc=[select id,Name,type,phone from account limit:limitvar offset:offsetvar];
        return acc;
    }