Saturday, November 19, 2016

PabeBlockTable Functionality in Lightning Application

Step1: Create Apex Class

public class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts() {
        return [Select Id, Name, Birthdate, AccountId, Account.Name, Email, Title, Phone
                From Contact order by LastModifiedDate desc
                limit 10];
    }
}



Step2: Create Lighting application


<aura:application controller="ContactController" access="GLOBAL" >
   
    <aura:attribute name="contacts" type="Contact[]" access="private"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
     <table class="table">
            <thead >
             
                    <tr class="slds-text-title--caps">
                      <th scope="col">
                        <div class="slds-truncate" title=" Name"> Name</div>
                      </th>
                   
                      <th scope="col">
                        <div class="slds-truncate" title="Amount">Phone</div>
                      </th>
                      <th scope="col">
                        <div class="slds-truncate" title="Date">Email</div>
                      </th>
                   
                      <th scope="col">
                        <div class="slds-truncate" title="Client">Client Name</div>
                      </th>
                       <th scope="col">
                        <div class="slds-truncate" title="Reimbursed?">Birthdate</div>
                      </th>
                    </tr>
              </thead>
            <tbody>
    <aura:iteration var="contacts" items="{!v.contacts}">
                <tr>
                    <td><a href="#"> {!contacts.Name}</a></td>
                   <td> {!contacts.phone}</td>
                   <td> {!contacts.Email}</td>
                   <td> {!contacts.Account.Name}</td>
                   <td> {!contacts.Birthdate}</td>
                </tr>
            </aura:iteration>
                  </tbody>    
        </table>
</aura:application>


Step3: Create controller for lightning application

({
doInit : function(component, event, helper) {
        var action = component.get("c.getContacts");
        action.setCallback(this, function(data) {
            console.log(data.getReturnValue());
            component.set("v.contacts", data.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})


No comments:

Post a Comment