Module 3: Creating the QuickContacts Lightning Component

In this module, you create the QuickContacts Lightning Component.

What you will learn

  • Create a Lightning Component in the Developer Console
  • Preview your Lightning Component in the Salesforce1 Application

Step 1: Create the Component

  1. In the Developer Console, click File > New > Lightning Component. Specify QuickContacts as the bundle name and click Submit

  2. Implement the component as follows:

     <aura:component implements="force:appHostable">
         <p>ContactList goes here</p>

    ### Code Highlights:

    • The component implements the force:appHostable interface to indicate that it can run in the Salesforce1 application
    • Lightning components can include other Lightning components and regular HTML markup
  3. Click File > Save to save the file

Step 2: Create a Tab

  1. In Setup, click Create > Tabs

  2. In the Lightning Component Tabs section, click New

    • Select c:QuickContacts as the Lightning Component
    • Specify Quick Contacts as the Tab Label and Quick_Contacts as the Tab Name
    • Click the magnifier icon and select Lightning as the tab icon
  3. Click Next and Save

Step 3: Add the Tab to Mobile Navigation

  1. In Setup, Select Administer > Mobile Administration > Mobile Navigation

    • Select Quick Contacts in the Available list
    • Click Add
    • Select Quick Contacts in the Selected List, and click the Up button to move the tab up in the menu order
    • Click Save

Step 4: Preview the Component in the Salesforce1 Application

  1. In Salesforce, modify the URL as follows:

    • Remove the part of the URL that comes immediately after
    • Append /one/ to the URL immediately after

    This starts the Salesforce1 Application simulator

  2. Click the menu button in the upper left corner

  3. Select Quick Contacts in the menu

  4. Preview the component

comments powered by Disqus