Salesforce Lightning Tips & Tricks

Salesforce Lightning Tips & Tricks

• 1.
  SALESFORCE LIGHTNING- HELPFUL TIPS & TRICKS
• 2.
  Did you knowthat 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 injQuery 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 functiononce 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 findyour 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 elementwith .(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 SALESFORCECUSTOMIZATION 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