Overview of Aura Framework used by Lightning Components in Salesforce Force.com

1. Aura
Framework
Overview
Compiled
By
Rajdeep
Dua,
Salesforce
Developer
Rela=ons
Dec
2015

2. Samples
used
in
this
Presenta=on
hFps://github.com/rajdeepd/aurasamples
Components
hFps://github.com/rajdeepd/aurasamples/tree/master/src/main/webapp/
WEB-­‐INF/components/docSample

3. Why
Build
Using
Aura
• Out
of
Box
Components
• Performance
• Event
Driven
• Faster
Development
• Device
Aware
and
Cross
Browser
Compa=bility
:
Supports
touch
events,
HTML
5,
CSS3

4. Performance
in
Aura
• Stateful
Client
and
Stateless
Server-­‐side
• Uses
JSON
to
communicate
between
client
and
the
server
• Client
calls
the
Server
only
if
necessary
to
get
metadata

5. Faster
Development
• Empowers
teams
to
work
faster
with
out-­‐of-­‐the-­‐box
components
• Building
an
app
with
components
facilitates
parallel
design,
improving
overall
development
efficiency.
• Aura
provides
the
basic
constructs
of
inheritance,
polymorphism,
and
encapsula=on
from
object-­‐oriented
programming
and
applies
them
to
presenta=on
layer
development.
• Extend
a
component
or
implement
a
component
interface.
• Components
are
encapsulated
– internals
stay
private
– public
shape
is
visible
to
consumers
of
the
component.
• This
strong
separa=on
gives
component
authors
freedom
to
change
the
internal
implementa=on
details
and
insulates
component
consumers
from
those
changes.

6. Components
• Components
are
the
self-­‐contained
and
reusable
units
of
an
app.
• Represent
a
reusable
sec=on
of
the
UI,
and
can
range
in
granularity
from
a
single
line
of
text
to
an
en=re
app.
• The
framework
includes
a
set
of
prebuilt
components.
– Assemble
and
configure
components
to
form
new
components
in
an
app.
– Components
are
rendered
to
produce
HTML
DOM
elements
within
the
browser.
• A
component
can
contain
other
components,
as
well
as
HTML,
CSS,
JavaScript,
or
any
other
Web-­‐enabled
code.

7. Events
• Based
on
event-­‐driven
programming
paradigm
• Write
handlers
that
respond
to
interface
events
as
they
occur.
• A
component
registers
that
it
may
fire
an
event
in
its
markup.
• Events
are
fired
from
JavaScript
controller
ac=ons
that
are
typically
triggered
by
a
user
interac=ng
with
the
user
interface.
• There
are
two
types
of
events
in
the
framework:
– Component
events
are
handled
by
the
component
itself
or
a
component
that
instan=ates
or
contains
the
component.
– Applica0on
events
are
essen=ally
a
tradi=onal
publish-­‐subscribe
model.
All
components
that
provide
a
handler
for
the
event
are
no=fied
when
the
event
is
fired.

8. Geng
started
• Follow
the
steps
in
readme
link
• Create
a
mvn
project
with
aura
archtype
$
mvn
archetype:generate
-­‐DarchetypeCatalog=hFp://
repo.auraframework.org/libs-­‐release-­‐local/archetype-­‐catalog.xml
mvn
is
a
framework
to
manage
java
dependencies
and
can
be
installed
on
command
line

9. Geng
started
..
1/3
Enter
appropriate
values
for
the
following
Define
value
for
property
'groupId':
org.myGroup
Define
value
for
property
'ar=factId':
helloWorld
Define
value
for
property
'version':
1.0-­‐SNAPSHOT
Define
value
for
property
'package':
org.myGroup

10. Build
and
Run
the
Project
• On
the
command
line,
navigate
to
the
directory
for
your
new
app.
• Open
the
Browser
and
Open
the
URL
$
cd
helloWorld
$
Build
the
app.
$
mvn
clean
install
$
mvn
jeFy:run
hFp://localhost:8080/helloWorld/helloWorld.app

11. Basis
App
Created
<aura:application>
hello web, from the Aura sample app
helloWorld
</aura:application>
• The
following
diagram
shows
the
folder
structure
for
the
project.
Under
the
components
folder,
there
is
a
helloWorld
folder
represen=ng
the
namespace.
• Under
that
folder
is
a
sub-­‐folder,
also
called
helloWorld,
which
represents
the
applica=on,
which
is
a
special
type
of
component.
• This
folder
can
also
contain
resources,
such
as
CSS
and
JavaScript
files.
We
will
add
a
new
component
to
the
helloWorld
namespace.

12. Add
a
Component
• A
Component
sits
inside
an
App
and
is
stored
in
a
.cmp
file
• Create
a
Component
in
the
following
path
helloWorld/helloWorld/helloWorld.cmp.
<aura:component>
Hello, world!
</aura:component>
"Hello,
world!"
text
is
wrapped
in
the
<aura:component>
tags,
which
appear
at
the
beginning
and
end
of
every
component
defini=on.

13. Add
a
Component
…contd
• Open
the
following
url
to
view
the
component

14. Component
Bundles
• All
resources
in
the
component
bundle
follow
the
naming
conven=on
and
are
auto-­‐wired.
• For
example,
a
controller
• <componentName>Controller.js
is
auto-­‐
wired
to
its
component,
which
means
that
you
can
use
the
controller
within
the
scope
of
that
component.

15. Component
IDs
• Every
Component
has
a
Local
ID
and
a
Global
ID
• A
local
ID
is
unique
within
a
component
and
is
only
scoped
to
the
component.
• Create
a
local
ID
by
using
the
aura:id
aFribute.
• For
example:
•
Find
the
buFon
component
by
calling
cmp.find("button1") in
client-­‐side
controller,
where
cmp
is
a
reference
to
the
component
containing
the
buFon.
• Get
Local
ID
using
cmp.getLocalId()
.
<ui:button aura:id="button1" label="button1"/>

16. Local
ID
Sample
<aura:component>
<ui:button aura:id="button_local_id"
label="Get Local ID" press="{!c.getInput}"/>
<br/>
<ui:outputText aura:id="outName" value="" class="text"/>
</aura:component>
({
getInput : function(cmp, evt) {
var localId = cmp.find("button_local_id").getLocalId()
var myText = cmp.find("outName");
myText.set("v.value", localId);
}
})
localId.cmp
localIdController.js

17. Components
:
Global
IDs
• Every
component
has
a
unique
globalId
,
which
is
the
generated
run=me-­‐unique
ID
of
the
component
instance.
• A
global
ID
is
not
guaranteed
to
be
the
same
beyond
the
life=me
of
a
component,
so
it
should
never
be
relied
on.
• To
create
a
unique
ID
for
an
HTML
element,
use
the
globalId
as
a
prefix
or
suffix
for
the
element.
• se
the
getGlobalId()
func=on
in
JavaScript
to
get
a
component's
global
ID.
• Get
a
component
from
its
global
ID.
<div
id="{!globalId
+
'_footer'}"></div>
var
cmp
=
$A.getComponent(globalId);
var
globalId
=
cmp.getGlobalId();

18. CSS
in
Components
• To
add
CSS
to
a
component,
add
a
new
file
to
the
component
bundle
called
<componentName>.css.
• The
framework
automa=cally
picks
up
this
new
file
and
auto-­‐wires
it
when
the
component
is
used
in
a
page.
• All
top-­‐level
elements
in
a
component
have
a
special
THIS
CSS
class
added
to
them.
• This
adds
namespacing
to
CSS
and
helps
prevent
one
component's
CSS
from
blowing
away
another
component's
styling.
• The
framework
throws
an
error
if
a
CSS
file
doesn’t
follow
this
conven=on.

19. CSS
in
Components
example
.THIS
{
background-­‐color:
grey;
}
.THIS.white
{
background-­‐color:
white;
}
.THIS
.red
{
background-­‐color:
red;
}
.THIS
.blue
{
background-­‐color:
blue;
}
.THIS
.green
{
background-­‐color:
green;
}
<aura:component>
<div
class="white">
Hello,
HTML!
</div>
<h2>Check
out
the
style
in
this
list.</h2>
<ul>
<li
class="red">I'm
red.</li>
<li
class="blue">I'm
blue.</li>
<li
class="green">I'm
green.</li>
</ul>
</aura:component>
• The
top-­‐level
elements
match
the
THIS
class
and
render
with
a
grey
background.
• The
<div
class="white">
element
matches
the
.THIS.white
selector
and
renders
with
a
white
background.
Note
that
• there
is
no
space
in
the
selector
as
this
rule
is
for
top-­‐level
elements.
• The
<li
class="red">
element
matches
the
.THIS
.red
selector
and
renders
with
a
red
background.

20. Component
AFributes
• Component
aFributes
are
like
member
variables
on
a
class
in
Java.
• 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.
• Use
the
<aura:aFribute>
tag
to
add
an
aFribute
to
the
component
or
app.
Sample
:
helloAFributes.app:
<aura:component>
<aura:aFribute
name="whom"
type="String"
default="world"/>
Hello
{!v.whom}!
</aura:component>

21. Expressions
• helloA9ributes.cmp
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
evalua=ng
is
v.whom.
The
name
of
the
aFribute
we
defined
is
whom,
• v
is
the
value
provider
for
a
component's
aFribute
set,
which
represents
the
view.
<aura:component>
<aura:aFribute
name="whom"
type="String"
default="world"/>
Hello
{!v.whom}!
</aura:component>

22. Client
Side
Events

23. Client
Side
Events
• A
client-­‐side
controller
handles
events
within
a
component.
• It’s
a
JavaScript
file
that
defines
the
func=ons
for
all
of
the
component’s
ac=ons.
• Each
ac=on
func=on
takes
in
three
parameters:
– component
to
which
the
controller
belongs,
– event
that
the
ac=on
is
handling,
– the
helper
if
it’s
used.
• Client-­‐side
controllers
are
surrounded
by
brackets
and
curly
braces
to
denote
a
JSON
object
containing
a
map
of
name-­‐value
pairs.
{(
handleClick
:
func=on(cmp,
event)
{
}
})
myComponentController.js

24. Calling
Client-­‐Side
Controller
Ac=ons
• Example
of
events
on
different
implementa=ons
of
an
HTML
tag.
• Example
component
creates
three
different
buFons,
of
which
only
the
last
two
work
properly.
• Clicking
on
these
buFons
updates
the
text
component
aFribute
with
the
specified
values.
target.get("v.label")
refers
to
the
label
aFribute
value
on
the
buFon.

25. Calling
Client-­‐Side
Controller
Ac=ons
<aura:component>
<aura:aFribute
name="text"
type="String"
default="Just
a
string.
Wai=ng
for
change."/>
<input
type="buFon"
value="Flawed
HTML
BuFon"
onclick="alert('this
will
not
work')"/>
<br/>
<input
type="buFon"
value="Hybrid
HTML
BuFon"
onclick="{!c.handleClick}"/>
<br/>
<ui:buFon
label="Framework
BuFon"
press="{!c.handleClick}"/>
<br/>
{!v.text}
</aura:component>

26. Calling
Client-­‐Side
Controller
Ac=ons

27. Ac=ons
and
Events

28. Ac=ons
and
Events
..
• The
framework
uses
events
to
relay
data
between
components,
which
are
usually
triggered
by
a
user
ac=on.
• User
ac=ons
trigger
events,
but
events
are
not
always
explicitly
triggered
by
user
ac=ons.
Example
:
The
following
buFon
is
wired
up
to
a
browser
onclick
event
in
response
to
a
buFon
click.
Clicking
the
buFon
invokes
the
handeClick
method
in
the
component’
s
client-­‐side
controller.
<ui:buFon
label
=
"Click
Me"
press
=
"{!c.handleClick}"
/>

29. Events
•
A
no=fica=on
by
the
browser
regarding
an
ac=on.
Browser
events
are
handled
by
client-­‐side
JavaScript
controllers,
as
shown
in
the
previous
example.
• Browser
event
is
not
the
same
as
a
component
event
or
applica=on
event
• Component
event
can
be
created
and
fired
from
a
component
controller

30. Ac=ons
and
Events
Component
markup
Javascript
Controller
Javascript
Helper
Server Side
Controller
Client Server
1
2
3
6
4
5
7
8

31. Ac=ons
and
Events
Component
markup
Javascript
Controller
Javascript
Helper
Server Side
Controller
Client Server
1
2
3
6
4
5
7
8
1.
User
clicks
a
buFon
or
interacts
with
a
component,
triggering
a
browser
event.
2.
The
buFon
click
invokes
a
client-­‐side
JavaScript
controller,
which
provides
some
custom
logic
before
invoking
a
helper
func=on.

32. Ac=ons
and
Events
Component
markup
Javascript
Controller
Javascript
Helper
Server Side
Controller
Client Server
1
2
3
6
4
5
7
8
3.
The
JavaScript
controller
invokes
a
helper
func=on.
Helper
func=on
improves
code
reuse
but
it’s
op=onal
for
this
example.
4.
The
helper
func=on
calls
a
server-­‐side
controller
method
and
queues
the
ac=on.

33. Ac=ons
and
Events
Component
markup
Javascript
Controller
Javascript
Helper
Server Side
Controller
Client Server
1
2
3
6
4
5
7
8
5.
The
server-­‐side
method
is
invoked
and
data
is
returned.
6.
A
JavaScript
callback
func=on
is
invoked
when
the
server-­‐side
method
completes.
7.
The
JavaScript
callback
func=on
evaluates
logic
and
updates
the
component’s
UI.
8. User
sees
the
updated
content

34. Component
Events
•
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
bubbled
event.

35. Event
Crea=on
• Events
are
created
in
a
file
.evt
with
the
same
bundle
name
• Use
type="COMPONENT" in
the
<aura:event> tag
for
a
component
event.
• docsample:compEvent
component
event
with
one
message
aFribute.
<!--docsample:compEvent-->
<aura:event type="COMPONENT">
<!-- add aura:attribute tags to define event shape.
One sample attribute here -->
<aura:attribute name="message" type="String"/>
</aura:event>

36. Fire
an
Event
•
A
component
registers
that
it
may
fire
an
event
by
using
<aura:registerEvent> in
its
markup
<aura:registerEvent name="sampleComponentEvent”
type="docsample:compEvent"/>
Register
an
Event
with
a
Component
var compEvent = cmp.getEvent("sampleComponentEvent");
// Optional: set some data for the event (also known as event shape)
// compEvent.setParams({"myParam" : myValue });
compEvent.fire();

37. Event
Handling
• Component
can
handle
its
own
event
using
the
aura:handler
• The
ac=on
aFribute
of
<aura:handler> sets
the
client-­‐side
controller
ac=on
to
handle
the
event
<aura:registerEvent name="sampleComponentEvent" type="docsample:compEvent"/>
<aura:handler name="sampleComponentEvent" action="{!c.handleSampleEvent}"/>

38. Component
Event
Example
1.
A
user
clicks
a
buFon
in
the
no=fier
component,
ceNotifier.cmp.
2.
The
client-­‐side
controller
for
ceNotifier.cmp
sets
a
message
in
a
component
event
and
fires
the
event.
3.
The
handler
component,
ceHandler.cmp,
contains
the
no=fier
component,
and
handles
the
fired
event.
4. The
client-­‐side
controller
for
ceHandler.cmp
sets
an
aFribute
in
ceHandler.cmp
based
on
the
data
sent
in
the
event.
ceEvent.evt
ceNotifierController.js
ceNotifier.cmp ceHandler.cmp
ceNotifierHandler.js

39. Event
Bubbling
• Component
event
bubbling
is
similar
to
standard
event
bubbling
in
browsers.
• When
a
component
event
is
fired,
the
component
that
fired
the
event
can
handle
it
• The
event
then
bubbles
up
and
can
be
handled
by
a
component
in
the
containment
hierarchy
that
receives
the
bubbled
event.
Child Component
Event Source
event
Parent Component
Controller
Controller

40. Event
Bubbling
Rules
•
A
component
event
can't
be
handled
by
every
parent
in
the
containment
hierarchy.
Instead,
it
bubbles
to
every
facet
value
provider
in
the
containment
hierarchy.
• A
facet
value
provider
is
the
outermost
component
containing
the
markup
that
references
the
component
firing
the
event.
• docsample:eventBubblingParent
contains
docsample:eventBubblingChild
,
which
in
turn
contains
docsample:eventBubblingGrandchild
.
<!--docSample:eventBubblingParent-->
<aura:component>
<docSample:eventBubblingChild>
<docSample:eventBubblingGrandchild />
</docSample:eventBubblingChild>
</aura:component>

41. Event
Bubbling
Example
eventBubblingEmitter
event
eventBubblingGrandChild
Controller
Controller
eventBubblingChild
eventBubblingParent
Controller
event
1
2
3
4
1. docsample:eventBubblingGrandchild
fires
a
component
event,
it
can
handle
the
event
itself.
2. The
event
then
bubbles
up
the
containment
hierarchy.
docsample:eventBubblingChild
contains
docsample:eventBubblingGrandchild but
it's
not
the
facet
value
provider
as
it's
not
the
outermost
component
in
the
markup
so
it
can't
handle
the
bubbled
event.
3. docsample:eventBubblingParent
is
the
facet
value
provider
as
docsample:eventBubblingChild
is
in
its
markup.
4. docsample:eventBubblingParent
can
handle
the
event.

42. Referring
External
JavaScript
Libraries
• The
<aura:clientLibrary> tag
enables
you
to
specify
JavaScript
or
CSS
libraries
that
you
want
to
use.
• Use
the
tag
in
a
.cmp
or
.app
resource.
<!-- External URL -->
<aura:clientLibrary url="https://jquery.org/latest/jquery.js" type="JS" />
<!-- Absolute path for local library-->
<aura:clientLibrary url="/absolute/path/to/file.js" type="JS" />
<!-- Relative path for local library-->
<aura:clientLibrary url="relative/path/to/file.css" type="CSS" />
• Where
type
is
"JS" or
"CSS"

43. Referencing
External
JS
:
Sample
Reference
:
hFps://github.com/rajdeepd/aurasamples/tree/master/src/main/webapp/WEB-­‐INF/components/docSample/clickEventsExternalJS
external.js
ClickMe
clickEventsExternalJS.cmp
ui:button
{…}
ui:outputText aura:id="outName"
clickEventsExternalJS
Controller.js
<aura:clientLibrary
url="/aura/external.js"
type="JS" />

44. Toggle
with
CSS
.THIS.toggle {
display: none;
}
<aura:component>
<div class="blue">
<ui:button label="Toggle" press="{!c.toggle}"/>
</div>
<p aura:id="text">Now you see me</p>
</aura:component>
({
toggle : function(component, event, helper) {
var toggleText = component.find("text");
$A.util.toggleClass(toggleText, "toggle");
}
})

45. Using
Aura
with
Server
Side

46. Using
Java
Servlets
with
Aura
package org.auraframework.demo.controllers;
import org.auraframework.system.Annotations.AuraEnabled;
import org.auraframework.system.Annotations.Controller;
import org.auraframework.system.Annotations.Key;
@Controller
public class SimpleController {
@AuraEnabled
public static String serverEcho(@Key("firstName")String firstName) {
return ("From server: " + firstName);
}
}
Create
a
server-­‐side
controller
in
Java
and
use
the
@Controller
and
@AuraEnabled
annota=on
and
to
enable
client-­‐
and
server-­‐side
access
to
the
controller
method.

47. Using
Java
Servlets
with
Aura
package org.auraframework.demo.controllers;
import org.auraframework.system.Annotations.AuraEnabled;
import org.auraframework.system.Annotations.Controller;
import org.auraframework.system.Annotations.Key;
@Controller
public class SimpleController {
@AuraEnabled
public static String serverEcho(@Key("firstName")String firstName) {
return ("From server: " + firstName);
}
}
Create
a
server-­‐side
controller
in
Java
and
use
the
@Controller
and
@AuraEnabled
annota=on
and
to
enable
client-­‐
and
server-­‐side
access
to
the
controller
method.

48. Using
Servlet
with
Aura
..contd
• Methods
must
be
sta=c
and
marked
public
or
global.
• Non-­‐sta=c
methods
are
not
supported.
• If
a
method
returns
an
object,
instance
methods
that
retrieve
the
value
of
the
object’s
instance
field
must
be
public.
@Controller
public class SimpleController {
@AuraEnabled
public static String serverEcho(@Key("firstName")String firstName) {
return ("From server: " + firstName);
}
}

49. Using
Serlvet
:
Client
Side
Components
• Aura
Component
• Aura
Client
Side
Controller
• Aura
App

50. Using
Servlets
:
Client
Side
Components
({
"echo" : function(cmp) {
…..
}
)}
<aura:component controller="org.auraframework.demo.controllers.SimpleController"">
<aura:attribute name="firstName" type="String" default="world"/>
<ui:button label="Call server" press="{!c.echo}"/>
</aura:component>
SimpleClient.cmp
SimpleClientController.js

51. Using
Java
Servlets
:
Client
Side
Components
• Client-­‐side
controller
includes
an
echo
ac=on
that
executes
a
serverEcho
method
on
a
server-­‐side
controller.
• The
client-­‐side
controller
sets
a
callback
ac=on
that
is
invoked
ater
the
server-­‐side
ac=on
returns
({
"echo" : function(cmp) {
var action = cmp.get("c.serverEcho");
action.setParams({ firstName : cmp.get("v.firstName") });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
//Update the state and response
}
else if (state === "ERROR") {
…
}
});
$A.enqueueAction(action);
}
})

52. Using
Java
Servlet
:
Client
Side
Components
• $A.enqueueAc=on(ac=on
)
to
add
the
server-­‐side
controller
ac=on
to
the
queue
of
ac=ons
to
be
executed.
({
"echo" : function(cmp) {
var action = cmp.get("c.serverEcho");
action.setParams({ firstName : cmp.get("v.firstName") });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
//Update the state and response
}
else if (state === "ERROR") {
…
}
});
$A.enqueueAction(action);
}
})

53. Demo

54. Using
Aura
in
Force.com

55. Using
Apex
with
Aura
public with sharing class SimpleServerSideController {
//Use @AuraEnabled to enable client- and server-side access to the method
@AuraEnabled
public static String serverEcho(String firstName) {
return ('Hello from the server, ' + firstName);
}
}
Create
a
server-­‐side
controller
in
Apex
and
use
the
@AuraEnabled
annota=on
to
enable
client-­‐
and
server-­‐side
access
to
the
controller
method.

56. Using
Apex
with
Aura
..contd
public with sharing class SimpleServerSideController {
//Use @AuraEnabled to enable client- and server-side access to the method
@AuraEnabled
public static String serverEcho(String firstName) {
return ('Hello from the server, ' + firstName);
}
}
• Methods
must
be
sta=c
and
marked
public
or
global.
• Non-­‐sta=c
methods
are
not
supported.
• If
a
method
returns
an
object,
instance
methods
that
retrieve
the
value
of
the
object’s
instance
field
must
be
public.

57. Using
Apex
:
Client
Side
Components
• Aura
Component
• Aura
Client
Side
Controller
• Aura
App

58. Using
Apex
:
Client
Side
Components
({
"echo" : function(cmp) {
…..
}
)}
<aura:component controller="SimpleServerSideController">
<aura:attribute name="firstName" type="String" default="world"/>
<ui:button label="Call server" press="{!c.echo}"/>
</aura:component>
SimpleLightningComponent.cmp
SimpleLightningComponentController.js

59. Using
Apex
:
Client
Side
Components
• Client-­‐side
controller
includes
an
echo
ac=on
that
executes
a
serverEcho
method
on
a
server-­‐side
controller.
• The
client-­‐side
controller
sets
a
callback
ac=on
that
is
invoked
ater
the
server-­‐side
ac=on
returns
({
"echo" : function(cmp) {
var action = cmp.get("c.serverEcho");
action.setParams({ firstName : cmp.get("v.firstName") });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
//Update the state and response
}
else if (state === "ERROR") {
…
}
});
$A.enqueueAction(action);
}
})

60. Using
Apex
:
Client
Side
Components
• $A.enqueueAc=on(ac=on
)
to
add
the
server-­‐side
controller
ac=on
to
the
queue
of
ac=ons
to
be
executed.
({
"echo" : function(cmp) {
var action = cmp.get("c.serverEcho");
action.setParams({ firstName : cmp.get("v.firstName") });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
//Update the state and response
}
else if (state === "ERROR") {
…
}
});
$A.enqueueAction(action);
}
})

61. Demo