trailhead

Build the AccountList Component

 What You’ll Do

  • Build a component that gets a list of accounts from the server
  • Display a data table to show the accounts
  • Use the lightning:button base component

Step 1: Write an Apex Controller

Let’s create a simple Apex class that returns a list of accounts.

  1. In Developer Console, select File › New › Apex Class.
  2. Enter AccountsController as the name of the class.
  3. Replace all the code with the following code.
        public class AccountsController {
          @AuraEnabled
          public static List <Account> getAccounts() {
            return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone FROM Account ORDER BY createdDate ASC];
          }
        }
        
  4. Save your work.

Step 2: Create the AccountList Component

Let’s now display the list of accounts by calling the AccountsController class we just created. We’ll show a Delete button in each row. We’ll also store the account record's name in a hidden field (value="{!account.Name}") so that we can easily surface which account should be deleted in the confirmation modal.

  1. In Developer Console, select File › New › Lightning Component.
  2. Enter AccountList as the name.
  3. Replace all the code with the following code.
          <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>
        
  4. Save your changes.

Step 3: Create the JavaScript Controller

We’ll now create a couple of JavaScript functions to fetch the list of accounts from the Apex controller.

  1. Click CONTROLLER in the right panel.
  2. Replace all the code with the following code.:
        ({
          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!)');
          }
        })
        
  3. Save your changes.

Step 4: Create a JavaScript Helper

A helper is used to interact with the server.

  1. Click HELPER in the right panel.
  2. Replace all the code with the following code.:
        ({
          // 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);
          }
        })
        
  3. Save your changes.

 Step 5: Test the App

  1. In Developer Console, click the AllAccounts.app tab.
  2. Replace all the code with the following code.
        <aura:application extends="force:slds">
          <c:AccountList />
        </aura:application>
        
  3. Save your work.
  4. Click on Update Preview (or Preview) button.
  5. Click on any Delete button.
  6. You should see the following dialog.:

Screenshot of what you see after previewing the AllAccounts.app and selecting an account to delete. The user is asked to confirm deleting the record.

Normally, this button would delete the account, but that’s beyond the scope of the this project, so we’ll settle for displaying a simple confirmation dialog to show that it’s done.

Summary

Using the Salesforce Lightning Design System (SLDS) in Lightning Components is easy, and it makes your app look beautiful and similar to Lightning Experience. You can learn more about developing with SLDS and Lightning components by completing the two Trailhead modules listed below.

Resources

retargeting