Start tracking your progress
Trailhead Home
Trailhead Home

Create a Hello World Aura Component

Note

Note

As of the Spring ‘19 release (API version 45.0), you can build Lightning components using two programming models: the Lightning Web Components model and the original Aura Components model. Lightning web components and Aura components can coexist and interoperate on a page. This content covers Aura components.

For more information about Lightning web components, see the Build Lightning Web Components trail.

Learning Objectives

In this project, you’ll:

  • Build a simple Aura component.
  • Style a component with Salesforce Lightning Design System (SLDS).
  • Add functionality using a JavaScript client-side controller.
  • Implement two-way data binding of attributes in an Aura component.
  • Retrieve and display data based on search criteria.
  • Encapsulate functionality into child components.
  • Use events for cross-component communication.

Introduction

This project teaches you to build and customize pages with Aura components.

Aura components are the building blocks of Lightning Experience. They are modular: one component can be incorporated into many Lightning pages—or as we’re about to do, the same component can appear multiple times on a page, but perform different tasks.

To learn to build an Aura component, you have to start somewhere. And as every developer will tell you, that somewhere is called Hello World. Honestly, this is the silliest component you’ll ever build, but it will give you a chance to explore the basics of building Aura components.

Create a Trailhead Playground, Install the Package, and Import Data

Let's get started by opening your Trailhead Playground and installing a package with the app and code that we work through in this project. First, scroll to the bottom of this page and click Launch. If you see a tab in your org labeled Install a Package, great! Follow the steps below. 

If not, from the App Launcher (App Launcher), find and select Playground Starter and follow the steps. If you don’t see the Playground Starter app, copy this package installation link and check out Install a Package or App to Complete a Trailhead Challenge on Trailhead Help.

  1. Click the Install a Package tab.
  2. Paste 04t6A000000SG0F into the field.
  3. Click Install.
  4. Select Install for All Users, then click Install.

When the app is finished installing, you see a confirmation page and get an email to the address associated with your playground. Next, initialize the sample data in your Trailhead Playground. 

  1. Once the installation is complete, click Done and then open the App Launcher by clicking App Launcher in the navigation bar.
  2. Select the Dreamhouse Lightning application.
  3. Click Data Import and then click Initialize Sample Data. Depending on your screen size, the Data Import tab can be under More in the tab menu.

Part 1: HelloWorld

In this set of instructions, you use the Developer Console to create the shell of an Aura component called HelloWorld.cmp.

When creating this component, you are presented with the following five options for the type of component you wish to create.

  • Lightning Tab: Specifies that the component can be used as a tab in both Lightning Experience and in the Salesforce mobile app.
  • Lightning Page: Allows the component to be placed on both a Home page, as well as a Record page.
  • Lightning Record Page: As the name implies, allows the component’s use on an Object Record page.
  • Lightning Communities Page: Allows the component to be used on, yes, you guessed it, a Lightning Communities page.
  • Lightning Quick Action: Enables the component's use as a Quick Action in Lightning Experience.

For this exercise, you select Lightning Record Page.

An Aura component is composed of a bundle of files. For example, the component file, or .cmp file, contains the HTML markup for the component. Other files in the bundle include:

  • Controller: This is a JavaScript file that will be used to add functionality to the component.
  • Helper: This is also a JavaScript file and is used for shared JavaScript functions.
  • Style: This is a CSS file where you can write your own CSS for your component.
  • Documentation: This file allows you to write documentation for your component, which will appear in your org’s help pages.
  • Design: The single most important file for developers, because this file allows you to expose parameters for your component in App Builder.
  • SVG: This Scalable Vector Graphic is the icon for your component in App Builder's list of components.

Read more about Aura Components and bundles here.

  1. Click on the Setup icon Setup in the upper right-hand corner and choose Developer Console.
  2. In the Developer Console, choose File > New > Lightning Component. You'll notice that the resulting dialog says New Lightning Bundle, not component. This is more accurate because an Aura component is a bundle of files.
  3. Name the component: HelloWorld
  4. Select Lightning Record Page and click Submit.

  5. Congratulations! You just created an Aura component that literally does nothing! It does, however, give us the opportunity to talk about a couple of things, such as: Notice it says <aura:component> which separates it from a Lightning Web Component. Aura is the open source framework upon which Salesforce built the Lightning component framework.


    Notice the implements= attribute. This is the list of interfaces that the component uses. For this component, you checked the box for Lightning Record Page. In code, we express this with the interface flexipage:availableForRecordHome.


    When a component is used on a Record page, it might also need to know which record is being viewed. This is expressed as force:hasRecordId and is also added automatically when you choose Lightning Record page.


  6. Type Hello World inside the <aura:component> ... </aura:component> tags.
  7. Save the file.

Part 2: Add the Component to a Page

When building an Aura component there are two ways to preview the component: either (a) add the component to a Lightning app, or (b) simply put the component on a page. Keep in mind, a Lightning app is a stand-alone app—not an app in Lightning Experience. In the next steps, you will implement option B by adding your HelloWorld component to the Property page.

  1. In your org, open a Property Record page, if you don’t already have one open.
  2. Click Setup and select Edit Page.
  3. Under Custom Components, find your HelloWorld component and drag it to the top of the right-hand column.
  4. Click Save.
  5. Since this is the first time we’ve modified the standard Property page, we need to activate the updated page so that our users can see what we’ve done. Click Activate.
  6. Click App Default and then Assign as App Default.
  7. Select the Dreamhouse Lightning app, then click Next, Next, and then Save.
  8. Click Back to return to the Property page. Voila! You’ve created your first Aura component and added it to a page in Lightning Experience. But we have to admit, it’s a pretty silly component. So let’s make it more interesting.

Part 3: Style with SLDS

In the next step, you apply styling to your component. The styling mechanisms are provided by the Salesforce Lightning Design System (SLDS), which makes it easy for you to build applications that comply with the Lightning Experience look and feel without reverse engineering the UI as custom CSS.

Read more about SLDS here.

  1. In the Developer Console, click back to the HelloWorld component markup.
  2. Wrap Hello World in a <div> tag. Your code should look like this:
  3. <div>Hello World</div>

  4. Switch to the SLDS site and review the following documentation.
    1. Click the Component Blueprints tab.
    2. Navigate to Cards in the left-hand column.
    3. Navigate to "Base Card Structure". What does it do?
  5. Back in the Developer Console, add class="slds-card" to the <div> tag. Click Save.
  6. Reload the Property Detail page to see the new styling applied to your component.
  7. Review more styling options on the SLDS site.
    1. Switch back to the SLDS site.
    2. Click the Show Code button in the first code section.
    3. Locate the class="slds-card__body slds-card__body_inner" applied to the last <div>.
    4. Open the Utilities section in the left-hand navigation. Click Padding. Review the examples of padding options; in particular, we will be using: slds-p-top_medium.
  8. Add more styling options to your component.
    1. In the Developer Console, wrap Hello World with <div class="slds-card__body slds-card__body_inner">.
    2. Add slds-p-top_medium to the second <div> so that your code looks like: <div class="slds-card__body slds-card__body_inner slds-p-top_medium">.
  9. Save the file and refresh the Property Detail page.

While working in Lightning Experience, you may notice that your changes aren’t getting refreshed. This is due to secure data caching in the browser. Follow these steps to temporarily disable this feature in your Trailhead playground as you work through this badge.

  1. From Setup, enter Session in the Quick Find box, and then select Session Settings.
  2. Deselect Enable secure and persistent browser caching to improve performance.
  3. Click Save.

Be sure to turn this back on after you finish this badge for better performance.

Part 4: Use Data Binding

Next, you work with attributes and expressions to implement data binding.

A Lightning Experience page is rendered on the client; this means that the component and the data from Salesforce arrive in the browser as separate packages and must be joined together by the Lightning Framework.

An <aura:attribute> is a place to store the data so the component can use it. Each <aura:attribute> has a name, which you use in JavaScript to retrieve the data. Additionally these <aura:attributes> are strongly typed.

In Aura components we use {! } as a notation to denote an expression. Aura components also use the v, which is something called a value provider, to indicate that the expression should be evaluated in the view, which is a fancy way of saying in the component markup or .cmp file.

Read more about attributes and expressions here.

  1. In the Developer Console, replace the Hello World text with Hello, {!v.greeting}!.
  2. On line 2, add an attribute of type String, and assign it a default value of 'World'. Line 2 should look like: <aura:attribute name="greeting" type="String" default="World" />
  3. Save the component and reload the Property Detail page.

Part 5: Add Form Elements

In the next set of steps, you'll add and apply a style to an <input> form element that allows a user of your application to submit their name.

Read more about form elements here.

  1. Add the following input field on a new line below the Hello {!v.greeting}.
  2. <input aura:id="myInput" type="text" />
    <button name="Update" type="submit">Update</button>

  3. Save the file and reload the Property Detail page.
  4. Switch to the SLDS site and review the following documentation.
    1. In the Component Blueprints section, find Input. Notice the slds-input class applied to the <input> tag.
    2. Find Buttons in the list of Component Blueprints. Scan the documentation to determine the functionality encoded by slds-button_brand.
    3. Find Margin in the Utilities section. Scan the documentation to determine the functionality encoded by slds-m-top_small.
  5. Back in the Developer Console, add class="slds-input" to the <input> tag.
  6. Copy class="slds-button slds-button_brand" from the code sample and add it to the <button> tag.
  7. Add slds-m-top_small to the button’s list of classes.
  8. Save the file and reload the Property Detail page.

Part 6: Use a JavaScript Controller

A controller is a collection of code that defines your app’s behavior when “things happen”, whereby “things” we mean user input, timer and other events, data updates, and so on. In the next set of instructions, you use a client-side JavaScript controller to make the update button perform an action when clicked.

Read more about client-side controllers here.

  1. Add onclick="{!c.updateValue}" to the <button> tag in the Developer Console.
  2. Save the file.
  3. Click the Controller button on the right-hand side of the Developer Console.
  4. Rename the function from myAction to updateValue.
  5. Add the following to the updateValue function.
  6. var val = component.find("myInput").getElement().value;
    component.set("v.greeting", val);

  7. Save the file and reload the Property Detail page.
  8. Type your name into the input and click the Update button.

Part 7: Understand Two-Way Data Binding

With two-way data binding, changes to data in the component model are reflected immediately and automatically in the component view and vice versa.

In this case, when a user submits their name, the application should display a greeting personalized with their name. Initially, when the HelloWorld component is rendered, the value of the input field, determined by the expression {!v.greeting} is set to its default value, which is “World”. When you type your name into the input field, the value of the input field sets the {!v.greeting} expression and it is reflected back in view, resulting in your name being displayed in the greeting message.

  1. Return to the Component tab.
  2. Remove class="slds-input" from the <input> tag.
  3. In the <input> tag, add lightning: at the beginning of the tag, before input. Then add value="{!v.greeting}" at the end of the tag, so that it is now:
  4. <lightning:input aura:id="myInput" type="text" value="{!v.greeting}" />

  5. Remove the <button> from the component.
  6. Save the file and reload the Property Detail page.
  7. Type your name into the input and watch the magic happen!

Not working for you? Your finished HelloWorld component should be as follows.

HelloWorld.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="greeting" type="String" default="World"/>
    <div class="slds-card">
        <div class="slds-card__body slds-card__body_inner slds-p-top_medium">
            Hello, {!v.greeting}
            <lightning:input aura:id="myInput" type="text" value="{!v.greeting}"/>
        </div>
    </div>
</aura:component>

HelloWorldController.js

({
    updateValue : function(component, event, helper) {
        var val = component.find("myInput").getElement().value;
        component.set("v.greeting", val);
    }
})