Book Image

Learning Salesforce Lightning Application Development

By : Mohit Shrivatsava
Book Image

Learning Salesforce Lightning Application Development

By: Mohit Shrivatsava

Overview of this book

Built on the Salesforce App Cloud, the new Salesforce Lightning Experience combines three major components: Lightning Design System, Lightning App Builder, and Lightning Components, to provide an enhanced user experience. This book will enable you to quickly create modern, enterprise apps with Lightning Component Framework. You will start by building simple Lightning Components and understanding the Lightning Components architecture. The chapters cover the basics of Lightning Component Framework semantics and syntax, the security features provided by Locker Service, and use of third-party libraries inside Lightning Components. The later chapters focus on debugging, performance tuning, testing using Lightning Testing Services, and how to publish Lightning Components on Salesforce AppExchange.
Table of Contents (22 chapters)
Title Page
PacktPub.com
Foreword
Contributors
Preface
Index

Using the find function to locate the DOM


To locate the DOM, you need to assign an aura:id to the DOM element. If there are multiple elements with same ID, an array is returned.

Let's look at an example component to observe the console output for the following component bundle. Let's name the component bundle DemoCmp:

<aura:component >
  <div aura:id="div1" class="div1" id="div1">
        <span class="span1"> 1</span>
        <span class="span2"> 2</span>
        <span class="span3"> 3</span>
    </div>
   <Lightning:button variant="brand" label="Submit" onclick="{! c.handleClick }" />
</aura:component>

 

The DemoCmpController.js file for the preceding component is as follows:

({
  handleClick : function(component, event, helper) {
        console.log("cmp.getElement(): ", component.find("div1").getElement());
        var div = component.find("div1").getElement();
        //[].forEach.call(div.childNodes, v => console.log(v...