Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Supported aura:attribute Types
Basic Types
Function Type
Object Types
Standard and Custom Object Types
Collection Types
Custom Apex Class Types
Framework-Specific Types
Using Expressions
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Lightning Base Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Component Attributes

Component attributes are like member variables on a class in Apex. They are typed fields that are set on a specific instance of a component, and can be referenced from within the component's markup using an expression syntax. Attributes enable you to make components more dynamic.

Use the <aura:attribute> tag to add an attribute to the component or app. Let’s look at the following sample, helloAttributes.app:

1<aura:application>
2    <aura:attribute name="whom" type="String" default="world"/>
3    Hello {!v.whom}!
4</aura:application>

All attributes have a name and a type. Attributes may be marked as required by specifying required="true", and may also specify a default value.

In this case we've got an attribute named whom of type String. If no value is specified, it defaults to "world".

Though not a strict requirement, <aura:attribute> tags are usually the first things listed in a component’s markup, as it provides an easy way to read the component's shape at a glance.

Attribute Naming Rules

An attribute name must follow these naming rules:

  • Must begin with a letter or an underscore
  • Must contain only alphanumeric or underscore characters

Expressions

helloAttributes.app contains an expression, {!v.whom}, which is responsible for the component's dynamic output.

{!expression} is the framework's expression syntax. In this case, the expression we are evaluating is v.whom. The name of the attribute we defined is whom, while v is the value provider for a component's attribute set, which represents the view.

Expressions are case sensitive. For example, if you have a custom field myNamespace__Amount__c, you must refer to it as {!v.myObject.myNamespace__Amount__c}.

Note