Learn the Lightning Tips & Tricks for improving the usability of your Salesforce implementation!!

1. SALESFORCE
LIGHTNING-
HELPFUL TIPS
& TRICKS

2. 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“)

3. 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").

4. 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>

5. 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/

6. 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);

7. 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