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

Modifying the DOM in the RENDERER JavaScript file of the component bundle


The Lightning component framework takes care of rendering and re-rendering the DOM element when the values change. However, if you want to modify the DOM or take control of the DOM modification, you can do so in the render file. The following screenshot illustrates how you can find the RENDERER file for the component or the Lightning application:

To customize, modify, and interact with DOM elements, you must follow the following template in the RENDERER JavaScript file:

({
  // Your RENDERER method overrides go here
  render : function(component, helper) {
        var ret = this.superRender();
        // do custom rendering here
        return ret;
  },

    rerender : function(cmp, helper){
      this.superRerender();
      // do custom rerendering here
  },

    afterRender: function (component, helper) {
      this.superAfterRender();
      // interact with the DOM here
  },

    unrender: function () {
      this...