SALESFORCE

LIGHTNING-

HELPFUL TIPS

& TRICKS

Did you know that Aura Id does not allow dynamic values?

aura:id cannot be allocated dynamically because aura:id doesn't

support expressions.

For ex: The below is not allowed

One can only assign literal string values to aura:id.

$<ui:inputText aura:id="{!v.index + '_sample'}"/>

Setting a value to an element using aura:id

For ex:

.cmp

<ui:inputText aura:id="sampleAura"/>

.js component.find("sampleAura").set("v.value","Some Value“)

Lightning utility function to check whether an attribute is defined or not.

OOB utility method to check whether the attribute is undefined or not

$A.util.isUndefined(component.get("v.someData“)

Cache Elements in jQuery to load the Lightning Page faster

For better performance one should reduce the DOM touches as

much as possible. So it's a good idea to cache the jQuery

objects. To cache an element just assign it into a variable for

later use.

<script type="text/javascript"> var $element = $('#selector'); if ($element.is(':hidden')) { $element.addClass('active').show(); $element.data("custom", "abc123"); } //some other code $element.hide(); </script>

Loading dependent JS files in sequence.

Facing JS dependencies error in lightning might be because of

required prerequisite file is not loaded first for ex: jQuery

Instead of loading files individually. For ex –

The dependent files should be loaded in the desired sequence.

For ex –

<ltng:require scripts="/resource/jquery" /> <ltng:require scripts="/resource/datatable.js"/>

<ltng:require scripts="/resource/jquery,/resource/datatable.js" />

Understanding the 'c' and 'v' conventions in lightning component.

c stands for controller which includes both Client side js controller and server-side Apex controller

Referenced as "{!c.doSomething}"in an expression in the mark-up or as component.get("c.getSomething") from JavaScript.

v is the view, the most common use of "v" is to access the attributes on the component, as in expressions with "{!v.someAttribute}" or in

JavaScript with component.get("v.someAttribute").

Calling JS function once pre-requisites JS are loaded.

Initiating a call once the JS required files are loaded:

.cmp <ltng:require scripts="/resource/jquery" afterScriptsLoaded="{!c.setup}" />

.js ({ setup : function(component, event, helper) { //do something here } })

Calling JS method on component load in lightning.

.cmp

<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> .js doInit: function(component, event, helper) { //do something }

Fix the issue of overridden css when ui:button is used together with SLDS

Calling JS function on button click, but don't want to use ui:button because of conflicting design compared to SLDS.

JS function can be called using press attribute on button. For ex –

Similarly it can be achieved on button tag using onclick attribute-

<ui:button aura:id="button" label="Click me" press="{!c.callFunction}"/>

<button class="slds-button" onclick="{!c.callFunction}">Click Me</button>

Unable to find your custom component in

Lightning App Builder?

To be accessible in the Lightning App Builder or a Lightning Page, a

component must implement the flexipage:availableForAllPageTypes

interface

<aura:component implements="flexipage:availableForAllPageTypes"> </aura:component>

Getting the record ID in custom lightning record pages.

In order to access the recordI ID, force:hasRecordId has to be

implemented in lightning component

Note - An attribute named as recordId will be generated automatically

when hasRecordId is implemented.

.cmp <aura:component implements="force:hasRecordId"> </aura:component> Record Id can be accessed directly in cmp using expression {!v.recordId} In JS it can be accessed by component.get("v.recordId")

Would you like to bind events with your lightning icons?

Use lightning:buttonIcon - an icon-only HTML button

A lightning:buttonIcon component represents an icon-only button element that executes an action in a controller. JS events can be bound to the co

mponent.

For Clicking the button triggers the client-side controller method set for onclick.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_buttonIcon.htm

If you would like to use Sprited icon, svgIcon component has to be replicated as Sprited non-inline SVGs are not supported in

Lightning yet https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/

Selecting an element with .(dot) in its ID in Lightning.

The backslash should be used in the selector to select the

element having period in its ID.

The way to use CSS in Lightning components.

Components should take up 100% of whatever container they

display in.

Adding a left or right margin changes the width of a

component and can break the layout of the page.

Some CSS rules remove the HTML element from the flow of the

document.

For example:

if you want to set some size that go for grid system rather

than defining it in CSS

Minimizing DOM Manipulation in Visualforce/Lightning

Common ways to improve jQuery performance are by compressing the scripts and limiting DOM manipulation as much as possible.

Consider the following piece of code that appends a DOM Can be replace with a more efficient code to minimize DOM

Manipulation inside a loop manipulation

$("#some\\.ContentID").val();

float: left; float: right; position: absolute; position: fixed;

for (var count=0; count<=rows.length; count++) { $('#tableObject').append('<tr><td>'+rows[count]+'</td></tr>'); }

var str = ''; for (var count=0; count<=rows.length; count++) { str += '<tr><td>'+rows[count]+'</td></tr>'; } $('#tableObject').append(str);

Zen4orce Service Offerings

jQuery

SALESFORCE CUSTOMIZATION

SALESFORCE AUTOMATION

ADVISORY SERVICES

INTEGRATED SOLUTIONS

Lightning

Bootstrap

Visualforce

Appexchange Communities

Service

Cloud

Sales Cloud

GitHub

Apex Web

Services

Visit www.zen4orce.com for further details about Zen4orce Services & Offerings.

Skillset