Salesforce Lightning

What Is Lightning Components Framework?

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

What is Component ?

A component is a bundle that includes a definition resource, written in markup, and may include additional, optional resources like a controller, stylesheet, and so on. A resource is sort of like a file, but stored in Salesforce rather than on a file system.

Components Containing Components

You can create a small and reusable component to keep nesting components inside other components.

This process of putting components inside each other is fundamental to building Lightning Components apps. You start with, or build, simple, “fine-grained” components, where each component provides a defined set of self-contained functionality. Then you assemble those components into new components with higher-level functionality. And then you use those components, and “level up” again.

What is component bundles ?

A bundle is sort of like a folder. It groups the related resources for a single component. Resources in a bundle are auto-wired together via a naming scheme for each resource type. Auto-wiring just means that a component definition can reference its controller, helper, etc., and those resources can reference the component definition. They are hooked up to each other (mostly) automatically.

aura:component –

Components are the functional units of Aura, which encapsulate modular and reusable sections of UI. They can contain other components or HTML markup. The public parts of a component are its attributes and events. Aura provides out-of-the-box components in the aura and ui namespaces.

aura:attribute

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.

aura:registerEvent

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.

Component Attributes

Attributes on components are like instance variables in objects. They’re a way to save values that change, and a way to name those value placeholders. For example, let’s say we wanted to write a helloMessage component that prints a custom message. We can envision adding a message attribute to this component to customize its output. And then we can set that message when we add the component to our app, like the following.

An attribute is defined using an tag, which requires values for the name and type attributes, and accepts these optional attributes: default, description, required.

  1. A component attribute is the place where you can store a value.
  2. You define a component attribute using the tag.
  3. The tag itself takes attributes when you use it.
  4. You can bind the attribute using expression {!v.attributeName}.
  5. What is “v.” in expression ?

Value Providers ?

In the below code snippet – we are using the expression “{!v.attributeName}” to bind the attribute value.


<aura:component >
 <aura:attribute name="message" type="string"/>

 <ui:outputText value="{!'Hello! ' + v.message}"/>

</aura:component>

v in “{!v.attributeName}” is called value provider. Value providers are a way to group, encapsulate, and access related data.

valueProvider

Values in a value provider are accessed as named properties.

When an attribute of a component is an object or other structured data (i.e., not a primitive value), access the values on that attribute using the same dot notation. For example, {!v.account.Id} accesses the Id field of an account record.

Attribute Data Types

  • Primitives data types, such as Boolean, Date, DateTime, Decimal, Double, Integer, Long, or String.
  • Standard and custom Salesforce objects, such as Account or MyCustomObject__c.
  • Collections, such as List, Map, and Set
  • Custom Apex classes.
  • Framework-specific types, such as Aura.Component, or Aura.Component[].

Use of  Custom Object attribute in aura:attribute, as in below code example-

Create an component – expenseItem


<aura:component >
<aura:attribute name="exp" type="Expense__c" />

Amount:
<ui:outputCurrency value="{!v.exp.Amount__c}"/>

Client:
<ui:outputText value="{!v.exp.Client__c}"/>

Date:
<ui:outputDate value="{!v.exp.Date__c}"/>

Reimbursed?:
<ui:outputCheckbox value="{!v.exp.Reimbursed__c}"/>

</aura:component>

Create an App- expenseApp and use the component like below –


<aura:application >
<c:expenseItem/>
</aura:application>

Other Aspects of Attribute Definitions

for the name and type are tow required attribute to define, you can set few other attribute for tag

  • The default attribute defines the default attribute value. It’s used when the attribute is referenced and you haven’t yet set the attribute’s value.
  • The required attribute defines whether the attribute is required. The default is false.
  • The description attribute defines a brief summary of the attribute and its usage.

Attributes and Expressions

Create a Component – helloPlayground


<aura:component >
<aura:attribute name="messages" type="list" default="['You look nice toda.', 'Great weather we\'re having', 'How are you?']"/>
<h1>Hello Playground</h1>
Silly fun with attributes and expressions.
<h2>List Items</h2>
<c:helloMessage message="{!v.messages[0]}"/>
<c:helloMessage message="{!v.messages[1]}"/>
<c:helloMessage message="{!v.messages[2]}"/>
<h2>List Iteration</h2>
<aura:iteration items="{!v.messages}" var="msg">
<c:helloMessage message="{!msg}"/>
</aura:iteration>
<h2>Conditional Expressions and Global Value Providers</h2>
<aura:if isTrue="{!$Browser.isPhone}">
<c:helloMessage message="{!v.messages[0]}"/>
<aura:set attribute="else">
<c:helloMessage message="{!v.messages[1]}"/>
</aura:set>
</aura:if>
</aura:component>

aura:iteration

aura:iteration iterates over a collection of items and renders the body of the tag for each item.

Attribute Name Type Description
body ComponentDefRef[] Required. Template to use when creating components for each iteration. You can put any markup in the body. A ComponentDefRef[] stores the metadata of the component instances to create on each iteration, and each instance is then stored in realbody.
indexVar String The variable name to use for the index of each item inside the iteration.
items List Required. The collection of data to iterate over.
var String Required. The variable name to use for each item inside the iteration.

The component repeats its body once per item in its items attribute, so the list shrinks or grows as we have fewer or more messages.

aura:if

aura:if renders the content within the tag if the isTrue attribute evaluates to true.

Conditionally instantiates and renders either the body or the components in the else attribute.

aura:if evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered.

Handling Actions with Controllers


<aura:component>
<aura:attribute name="message" type="String"/>

Message of the day: <ui:outputText value="{!v.message}"/>
<div>
<ui:button label="Button Action" press="{!c.handleClick}"/></div>
</aura:component>

When you click on button as the Controller is not defined it will give you error like below which stated clearly-

LightningError

Define the Controller like this –

Controller

Like the v.message expression earlier, c.handleClick is a value provider, c, with a property, handleClick. c is the value provider for the component’s client-side controller, and handleClick is a function defined in that controller. So, {!c.handleClick} is a reference to an action handler in the component’s controller.

What is Controller ?

A controller is basically 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.

         For Lightning Components, a controller is a resource in a component bundle that holds the action handlers for that component. And action handlers are just JavaScript functions with a particular function signature.

Action Handler

The combination of name-value pair and specific function signature is an action handler.


continue