---
schema_version: "1"
id: 95f07dea2e1caa32b16a37cecc0d35784dea0f422f0d00254802e0fc50f81f5a
title: Create a Component for Lightning Experience and the Salesforce Mobile App
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/events/events-one-demo.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/events-one-demo.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: bc99c5db4e4b321931317b419334c260c01a408bcab6d38f31509d3efaaad7c5
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Create a Component for Lightning Experience and the Salesforce Mobile App

Explore how to create a custom UI that loads contact data and interacts with Lightning Experience and the Salesforce mobile app.

This tutorial walks you through creating a component that:

-   Displays a toast message (1) using the `force:showToast` event when all contacts are loaded successfully.
-   Updates the number of contacts (2) based on the selected lead source.
-   Filters the contacts using the `lightning:select` component (3) when a lead source (referral or social media) is selected.
-   Displays the contact data using the `lightning:card` component (4).
-   Navigates to the record when the **Details** button (5) is clicked.

![Customize Components in Lightning Experience](https://developer.salesforce.com/media/aura-platform/lex_contactviewer.png)

Here’s how the component looks in the Salesforce mobile app. You’re creating two components, contactList and contacts, where contactList is a container component that iterates over and displays contacts components. All contacts are displayed in contactList, but you can select different lead sources to view a subset of contacts associated with the lead source.

![Customize Components in the Salesforce mobile app](https://developer.salesforce.com/media/aura-platform/S1_contactviewer.png)

In the next few topics, you create the following resources.

|**Resource**|**Description**|
|------------|---------------|
|**Contacts Bundle**| |
|`contacts.cmp`|The component that displays individual contacts|
|`contactsController.js`|The client-side controller action that navigates to a contact record using the `force:navigateToSObject` event|
|**contactList Bundle**| |
|`contactList.cmp`|The component that loads the list of contacts|
|`contactListController.js`|The client-side controller actions that call the helper resource to load contact data and handles the lead source selection|
|`contactListHelper.js`|The helper function that retrieves contact data, displays a toast message on successful loading of contact data, displays contact data based on lead source, and update the total number of contacts|
|**Apex Controller**| |
|`ContactController.apxc`|The Apex controller that queries all contact records and those records based on different lead sources|