earnold
7/4/2018 - 2:14 PM

Account List

Display all accounts in a lightning application

    public class AccountsController {
      @AuraEnabled
      public static List <Account> getAccounts() {
        return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone FROM Account ORDER BY createdDate ASC];
      }
    }
    
    ({
      doInit: function(component, event, helper) {
        // Fetch the account list from the Apex controller
        helper.getAccountList(component);
      },
      deleteAccount: function(component, event, helper) {
        // Prevent the form from getting submitted
        event.preventDefault();
        // Get the value from the field that's in the form
        var accountName = event.target.getElementsByClassName('account-name')[0].value;
        confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
      }
    })
    
      <aura:component controller="AccountsController">
        <aura:attribute name="accounts" type="List" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
        <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="ID">ID</div></th>
              <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
              <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
              <th scope="col"><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
              <th scope="col"><div class="slds-truncate" title="Ticker Symbol">Ticker Symbol</div></th>
              <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
              <th scope="col"><div class="slds-truncate" title="Delete">Delete</div></th>
            </tr>
          </thead>
          <tbody>
            <!-- Use the Apex model and controller to fetch server side data -->
            <aura:iteration items="{!v.accounts}" var="account">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!account.Id}">{!account.Id}</div></th>
                    <td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
                    <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
                    <td><div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div></td>
                    <td><div class="slds-truncate" title="{!account.TickerSymbol}">{!account.TickerSymbol}</div></td>
                    <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
                    <td>
                        <form class="account-form" onsubmit="{!c.deleteAccount}">
                          <input type="hidden" value="{!account.Name}" class="account-name" />
                          <!-- Use a Lightning Base Component To display an icon next to the label -->
                          <lightning:button
                            label="Delete"
                            iconName="utility:delete"
                            iconPosition="left"
                            variant="destructive"
                            type="submit"
                          />
                        </form>
                    </td>
                </tr>
            </aura:iteration>
          </tbody>
        </table>
      </aura:component>
    
    ({
      // Fetch the accounts from the Apex controller
      getAccountList: function(component) {
        var action = component.get('c.getAccounts');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
         component.set('v.accounts', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
      }
    })
    
<aura:application extends= "force:slds">
	<c:AccountList />
</aura:application>