trailhead

Get Started with Lightning Components

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe what the Lightning Components framework is, and what it’s used for.
  • List four key differences between Lightning Components and other web app frameworks.
  • List at least five different ways you can use Lightning Components to customize Salesforce.

Getting Started with Lightning Components

Yes! You’re still with us! We’re really excited to welcome you to the Lightning Components party—and it is a party. When we say that Lightning Components is the most exciting and powerful app development technology we’ve built in years, it’s a bold statement. And we know it’s true, because we built the Salesforce app and Lightning Experience with it. We think that once you get to know Lightning Components, you’ll be as excited as we are about using it.

What Is the Lightning Components Framework?

Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.

That’s…a lot of buzzwords. Let’s see if we can’t try that again, with words that normal people use.

Again, looking at a very high level architecture

“Lightning Components is a framework for developing web apps.” That seems understandable. An app framework is a collection of code and services that make it easier for you to create your own custom apps, without having to write all the code yourself. There are lots of different web app frameworks out there, like Ruby on Rails, Grails, AngularJS, Django, CakePHP, and on and on. We’ve even got one of our own, Visualforce, that customers know and love. Lightning Components is new, and we think it’s pretty special. We’ll talk about why it’s special more as we go, and hopefully by the end of this module, you’ll agree!

“Web apps for mobile and desktop devices.” Again, that seems pretty easy to grasp. But…did you notice the order there? Lightning Components was born out of and used to build the Salesforce platform for mobile apps. Mobile is baked into the core of Lightning Components, and it makes developing apps that work on both mobile and desktop devices far simpler than many other frameworks.

“It’s a modern framework for building single-page applications.” OK, now we’re getting a little buzzed. “Modern” is just marketing, right? And what are “single-page applications”?

We don’t think modern is “just” marketing. In the Develop for Lightning Experience module we talk at length about how web apps have evolved from simple, page-by-page oriented experiences to highly responsive apps that have all the same behavior and interactivity of native apps, on desktops and especially on mobile devices. To achieve these interactive user experiences, modern web apps are built as a tightly bound collection of code that loads from a single URL, and then runs continuously as you use it. These single-page apps are built much like native apps are, with the plumbing being handled by a framework. A framework like Lightning Components.

“Dynamic, responsive user interfaces for Lightning Platform apps” is just applying the preceding ideas to apps you build on top of Salesforce. And finally, “it uses JavaScript on the client side and Apex on the server side” is pretty self-explanatory by itself—even if it leaves out some specifics about what goes where. We’ll get to that, soon!

An Example Lightning Component

OK, that’s a lot of talk talk talk, and not a lot of code. Let’s take a look at a real Lightning component, and see what all that talk is about. First, here’s what the component looks like when rendered on screen:

Lightning component: not much to look at, but a fair bit going on

It might not look like much, but there’s a fair bit going on. Here’s the code for it; this is from a component we’ll dig into in detail later.

<aura:component>

    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

    <!-- Color the item green if the expense is reimbursed -->
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
            Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
           Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

Even before you know anything about Lightning Components, you can still notice a few things about this sample. First of all, it’s XML markup, and mixes both static HTML tags with custom Lightning Components tags, such as the <aura:component> tag that leads off the sample. If you’ve worked with Visualforce, the format of that tag is familiar: namespace:tagName. As you’ll see later, built-in components can come from a variety of different namespaces, such as aura: (as here), or force:, lightning:, or ui:.

You might have noticed that there are components like <lightning:input> and <lightning:formattedNumber>. Again, this is a pattern familiar to Visualforce developers. If you’re not one of those, for now we’ll say that you use the input component to collect user input, and the other components to display read-only values. Here are a few more components highlighted in the snippet.

  • <lightning:card> creates a container around a group of information.
  • <lightning:formattedDateTime> displays formatted date and time.
  • <lightning:relativeDateTime> displays the relative time difference between the current time and the provided time.
Note

Note

What’s in a name(space)? The lightning namespace provides many UI components that use Salesforce Lightning Design System, or SLDS, out-of-the-box. We recommend that you use components in the lightning namespace where possible. For example, use <lightning:input> instead of <ui:inputText>, <ui:inputNumber>, and so on. Most of the input types, like text, number, email, and many more are available to you.

We’ll get to the rest of the components in later units. For now, one last thing to notice is the use of static HTML with a number of CSS class names that start with “slds”. We’re going to use SLDS to style our components, and while we won’t explain SLDS in detail in this module, we want you to see examples of it in action.

OK, cool, Lightning Components markup is XML. But didn’t we say something about JavaScript earlier? Notice the onchange="{!c.clickReimbursed}" attribute on the toggle switch, which is really a fancy checkbox that slides right and left to represent checked and unchecked values. That means “when this value is changed, call the controller’s clickReimbursed function.” Let’s look at the code it’s attached to.

({
    clickReimbursed: function(component, event, helper) {
        var expense = component.get("v.expense");
        var updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

This is the component’s client-side controller, written in JavaScript. The clickReimbursed function in the component’s controller corresponds to the onchange="{!c.clickReimbursed}" attribute on the checkbox in the component’s markup.

In Lightning Components, a component is a bundle of code. It can include markup like the earlier sample, in the “.cmp resource,” and it can also include JavaScript code, in a number of associated resources. Related resources are “auto-wired” to each other, and together they make up the component bundle.

We’ll get to the details in the next unit, but for now, you’ve seen the two most important types of Lightning component code.

What About Visualforce?

The question we get from customers, over and over, is this: “Which should I use, Lightning Components or Visualforce?” The short answer is: yes!

Visualforce and Lightning Components each have their strengths. These are discussed in the Develop for Lightning Experience module, where you can find the long answer about appropriate uses for each. Here, let’s go for medium.

First, know this: Visualforce isn’t going away. Your Visualforce code will run on Salesforce for a long time to come. You don’t need to convert existing Visualforce apps, and you don’t need to stop creating apps with Visualforce.

However, you might want to, at least in some cases. For example, Visualforce was created before mobile apps on phones became a thing. While you can develop mobile apps with Visualforce, none of the built-in components are mobile-savvy. Which means you write more code. Lightning Components, on the other hand, is specifically optimized to perform well on mobile devices.

Again, we cover a lot of specifics in the Develop for Lightning Experience module. If you still have questions about Visualforce and Lightning Components, that’s a good place to go next.

What About AngularJS, React, and Those Other JavaScript Frameworks?

Another question that comes up frequently is: “How does Lightning Components compare to MyFavoriteFramework?” where that favorite framework is another modern JavaScript web app framework such as AngularJS, React, or Ember.

These are all fine frameworks! Many people know them, and there are a lot of resources for learning them. You might be surprised to learn that we think these frameworks are a great way to build Lightning Platform apps!

We recommend using them with Visualforce, using what we call a container page, and packaging your chosen framework and app code into static resources. Using an empty container page has Visualforce get out of your way, and lets you use the full capabilities of your chosen framework.

While it’s possible to use third-party JavaScript frameworks with Lightning Components, it’s a bit cumbersome. Lightning Components doesn’t have the notion of an empty page, and has some specific opinions about how, for example, data access is performed, and some rather specific security requirements.

And frankly, the features of Lightning Components and most modern frameworks overlap quite a bit. While the style or specifics might be different, the features provided are conceptually similar enough that you’re effectively running duplicate code. That’s neither efficient nor easy to work with.

Another thing to consider: general-purpose frameworks such as AngularJS are designed to be agnostic about the platform they run on top of, in particular data services. Lightning Components, on the other hand, is designed to connect natively with services provided by Salesforce and the Lightning Platform. Which do you think is going to help you build apps faster?

Note

Note

We’re only talking about application frameworks here. If you have a favorite JavaScript charting or mapping library, or other special-purpose toolkits then—subject to certain security requirements—modern JavaScript libraries usually work fine.

OK, enough words words words! Let’s take a quick-and-graphical tour of the many places you can deploy Lightning Components apps. And then let’s dive into the fun stuff: the code.

Where You Can Use Lightning Components

You can use Lightning Components to customize your Salesforce org in a number of different ways. But that’s not all! You can use Lightning Components to create stand-alone apps that are hosted on Salesforce. And you can even create apps that are hosted on other platforms, including embedding them into apps from those platforms.

Add Apps to the Lightning Experience App Launcher

Your Lightning Components apps and custom tabs are available from the App Launcher, which you reach by clicking App Launcher icon in the header.

Add component to the App Launcher

Click a custom app (1) to activate it. Items in the app display in the navigation bar, including any Lightning components tabs you’ve added to the app. Note that you need to add your components to tabs for them to be accessible in the App Launcher. Lightning components tabs that aren’t in apps can be found in All Items (2).

Add Apps to Lightning Experience and Salesforce App Navigation

As described in the preceding example, you can add Lightning components tabs to an app and they display as items in the app’s navigation bar.

Add built-in components to the main navigation

Create Drag-and-Drop Components for Lightning App Builder and Community Builder

Build custom user interfaces using your own Lightning components, or those you install from AppExchange, for desktop and mobile devices.

Create Drag-and-Drop Components for Lightning App and Community Builder

Add Lightning Components to Lightning Pages

A Lightning Page is a custom layout that lets you design pages for use in the Salesforce mobile app or in Lightning Experience. You can use a Lightning Page to create an app home page and add your favorite Lightning component, such as the Expenses app we’ll be creating in this module, to it.

Add Lightning Components to Lightning Experience Record Pages

Just as the title suggests, you can customize Lightning Experience record pages by adding a Lightning Component.

Just as the title suggests, customize Lightning Experience Record Pages by adding a Lightning Component

Launch a Lightning Component as a Quick Action

Create actions using a Lightning component, and then add the action to an object’s page layout to make it instantly accessible from a record page.

Lightning componet quick action on record page

Override Standard Actions with Lightning Components

Override an action with a Lightning component, which closely parallels overriding an action with a Visualforce page.

Override actions with Lightning components

Create Stand-Alone Apps

A standalone app comprises components that use your Salesforce data and can be used independently from the standard Salesforce environment.

standalone apps are components that use Salesforce data and can be used independent of the Salesforce app

Run Lightning Components Apps Inside Visualforce Pages

Add Lightning components to your Visualforce pages to combine features you’ve built using both solutions. Implement new functionality using Lightning components and then use it with existing Visualforce pages.

Run Lightning Components Apps on Other Platforms with Lightning Out

Lightning Out is a feature that extends Lightning apps. It acts as a bridge to surface Lightning components in any remote web container. This means you can use your Lightning components inside of an external site (for example, Sharepoint or SAP), or even elsewhere on the platform such as on Heroku.

Lightning Out on Heroku dialog

Customize Flow Screens

Create a flow to guide your users through a business process. By default, you can add simple fields like inputs or radio buttons to a flow screen. But with a custom Lightning component, you can fully customize the look-and-feel and functionality of your screen.Flow screen displaying a custom Lightning component

retargeting