Lightning Guide

1. Where can components be used?
Ans: Components used inside of App Builder. If you are a developer for salesforce orgs that has
heavily invested on visualforce pages then you can slowly move to lightning by creating
components and then embedding directly to visual force pages. This is possible because of
Lightning Out.
2. Winter 17 changes?
• SLDS extension Point (allows you to include latest version of salesforce lightning design
system library with only a single line of code)
• Base Lightning components (These components like menu item, tab sets, formatted number
and date times handle the html and css for you. They also handle accessibility as well as
validation and enhanced error messages.
• Data Lightning Service: It is simila to standard controller for visual force except it makes
working the data for Lightning components easier and efficient.
• Lightning actions: can be used to replace any custom buttons you have in your org.
• http://releasenotes.docs.salesforce.com
Creating Lightning Bundles or components

Component consist of one or more resource files but the only one that is required is the one that
have/has the extension .cmp. It is the place where you store your user interface markup along with
any data bindings that connect properties to that markup. Style resource is used to store css files.
The css files and other resources are encapsulated as a result they can be only used with that
particular component. Controller resource will include javascript function that handles event fired
by interactions with their component, such as a user clicking a button, or changing some input data.
The <aura:component> has a aura which is actually the framework that the Lightning framework is
build on. Within this tag you can enter any valid web-enabled code such as HTML, JS and CSS. But
the best practice is to keep your component as simple and as small as possible
Unlike other frameworks where you can preview your componets, in Lightning, the components
need to reside inside a lightning component.
Tip: add the word app when creating a lightning application.
Even though you can use an application to contain html codes and other things but it is better to use
it as a container for your lightning components.
Even though you can use inline style to your component body, it is not recommended.
Note: If you want to style elements that are not first level then use .This and a space and the name
of the selector. If it is first level then you don’t use space
If you have a class name in top level then use as .THIS.className
Working with Attributes
<aura:component>
<aura:attribute name=”whom” type=”String” default=”world” />
<h1 class=”title”> Hello {!v.whom}</h1>
</aura:component>
Working with UI Components
https://karna-dev-ed.lightning.force.com/auradocs/reference.app
//<aura:component >
<h1>Hello World</h1>
<ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!
c.onSingleSelectChange}">
<ui:inputSelectOption text="Hal" />

<ui:inputSelectOption text="Sally" value="true"/>
<ui:inputSelectOption text="Dave" />
</ui:inputSelect>
</aura:component>
Working with Browser Events
<aura:component > ({
<aura:attribute name="whom" type="String" onSingleSelectChange: function(cmp) {
default="world" /> var selectCmp =
<h1>Hello {!v.whom}</h1> cmp.find("InputSelectSingle");
<ui:inputSelect class="single" cmp.set("v.whom",
aura:id="InputSelectSingle" change="{! selectCmp.get("v.value"));
c.onSingleSelectChange}"> }
})

<ui:inputSelectOption text="Sally"
value="true"/>
</ui:inputSelect>
</aura:component>
Exposing components to App Builder and Salesforce1 app
To make the component exposed to Lightning app builder we need to implement flexipage as
shown below.
<aura:component implements=”flexipage:availableForAllPageTypes”>
//other html tags or components here
</aura:component>
TO expose the component to our salesforce1 app, implement force:appHostable interface

<aura:component implements=”force:appHostable”>
</aura:component>
MORE
<aura:component implements="flexipage:availableForAllpageTypes, force:appHostable"
access="global">
<aura:attribute name="whom" type="String" access="global" default="world" />
<h1>Hello {!v.whom}</h1>
<ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!
c.onSingleSelectChange}">

<ui:inputSelectOption text="Sally" value="true"/>
</ui:inputSelect>
</aura:component>
Design
<design:component label="Hello World">

<design:attribute name="whom" label="zoomon" description="Who to say hello to" />
</design:component>
Working with Controllers and Data

We need to write a function getCasesDB in Apex. Apex is a proprietary language that only works on
salesforce platform but it is also an OO language similar to Java and C#. It is strongly typed as
opposed to Javascript used on the client side of Lightning component. This means if your code
reference an object or any piece of metadata that is not set up on the force.com platform your code
will not even compile.
With sharing enable because this allows our component to enforce the organization’s security policy
atleast as far as record access is concerned.
@AuraEnabled: All server-side actions must have

We also need static keyword. Non-static methods are not supported and the method must use public
or global access modifier.
SOQL stands for Salesforce Object Query Language. SOQL is only used to query data.
When writing apex controller, embed apex controller name

force:recordView is for readOnly showing records.
Security
Apex runs in a System Mode and it will return all data for every user. This means that lightning
components automatically enforce CRUD, which stands for CREATEUPDATTE, DELETE
permission automatically. Therefore, it is possible for you to create a component that exposes
sensitive data accidentally. The way this can be prevented is by adding the appropriate access
checks to any Aura-enabled method. If you are an experience Salesforce developer, you may be
thing with the sharing keyword , in the Apex controller for the open cases component that I’m
covered as far as security is concerned. But that only works what record a user has access to. It does
nothing to enforce CRUD or FLS defined in your salesforce ORG.
All aura-enabled methods should explicitly check for access prior to performing any queries or data
updates. This can be done using the isaccessible(), iscreateable(), isdeletable(), is updateable()
methods.
public with sharing class OpenCasesApexController {

@AuraEnabled
public static List<Case> getCasesDB() {
String [] caseFields = new String [] {'Id', 'OwnerId',
'Type','Status',
'Priority','IsClosed',
'Reason','Origin' };
Map<String,Schema.SObjectField> caseMap =
Schema.SObjectType.Case.fields.getMap();
for (String field : caseFields) {
if (!caseMap.get(field).getDescribe().isAccessible()) {
System.debug('This field was not accessible: ' + caseMap.get(field));
return null;
}
}
return [SELECT Id FROM Case
WHERE IsClosed = false AND OwnerId
= :UserInfo.getUserId()];
BusinessHours is a lookup field that is hidden by default for all profiles.
Handling salesforce1 events
Lightning components interact with salseforce1 with events and there are several imp events that
come up with the force namespace.
The navigateToSObject event will navigate to user to the list view for whatever id is specified.
About $A: http://documentation.auraframework.org/auradocs#reference?topic=api:$A

The $A namespace is the entry point for using the framework in JavaScript code. Defaut Global
instance name is $A.
It is a namespace for Javascript API of Aura. Infact top namespace.

6 down voteaccepted
Its top level namespace for creation of components, getting a component, setting a
component, Enqueuing Action, Running an Action.
//component
<div>
<div onclick="{!c.goToRecord}"></div>
<force:recordView recordId="{!case.Id}" type="MINI" />
</div>
//controller
goToRecord : function(cmp, event, helper) {
var sObjectEvent = $A.get("e.force:navigateToSObject");
sObjectEvent.setParams({
"recordId": cmp.get("v.case.Id"),
"slideDevName": 'detail'
})
sObjectEvent.fire();
}
//slideDevName can be valued as either detail, chatter or related. This is used to

specify the slide within the record view to display.

Lightning Guide

Uploaded by

Copyright:

Available Formats

Lightning Guide

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lightning Guide

Uploaded by

Copyright:

Available Formats

1. Where can components be used?

Creating Lightning Bundles or components

Tip: add the word app when creating a lightning application.

If you have a class name in top level then use as .THIS.className

Working with Attributes

<ui:inputSelectOption text="Hal" />

Working with Browser Events

<ui:inputSelectOption text="Hal" />

Exposing components to App Builder and Salesforce1 app

TO expose the component to our salesforce1 app, implement force:appHostable interface

<ui:inputSelectOption text="Hal" />

<design:component label="Hello World">

Working with Controllers and Data

@AuraEnabled: All server-side actions must have

When writing apex controller, embed apex controller name

public with sharing class OpenCasesApexController {

BusinessHours is a lookup field that is hidden by default for all profiles.

Handling salesforce1 events

About $A: http://documentation.auraframework.org/auradocs#reference?topic=api:$A

It is a namespace for Javascript API of Aura. Infact top namespace.

//slideDevName can be valued as either detail, chatter or related. This is used to

You might also like