Add an Event Handler in the Force.com IDE

The event handler calls your myAction function when the handler is initialized and retrieves a list of contacts.
  1. Use the outline view to navigate to the markup file in the MyContactList component bundle: Press Ctrl+O (Cmd+O on macOS). An outline of the contents of the component bundle that you’re working on appears. Double-click MyContactList.cmp.
  2. On the line after the opening aura:component tag, add this markup.

    This event handler calls the myAction client-side controller to handle initialization.

  3. Let’s check out the documentation for the aura:handler component. Hover your cursor over aura:handler in the source panel. This action brings up information about aura:handler and its attributes. If you want to keep that documentation in view while you work on your code, select Window | Show View | Other | Other | Lightning Doc. Everyone knows that good documentation crucial for successful development, and the Force.com IDE provides documentation for the component you’re editing right in your development environment.
  4. Now, right underneath the aura:handler, add an aura:attribute component to make the list of contacts accessible to your Lightning component. Let’s use autocompletion to help with this task. Type <aura:a, and examine the options that appear. We want <aura:attribute>, so press the down arrow on your keyboard until it’s highlighted, then press Enter.
  5. Between the quote marks for the aura:attribute component’s name attribute, type contacts. Between the quote marks for the aura:attribute component’s type attribute, type Contact[]. You can delete the description="" attribute, or you can add a description of your choice. The aura:attribute component now looks something like this.
  6. To save your updated component, press Ctrl+S or (Cmd+S on macOS).