Salesforce Lightning

Introduction to Lightning Aura Component.

Salesforce introduced lightning platform way back in 2014 and to build custom applications on lightning platform salesforce introduced Lightning Aura Components in Sprint 2015. Salesforce lightning is best known for its modern UI interface and beautiful look, which is a Platform as a Service (PaaS) platform that allows developers to create add-on applications that integrate into main salesforce.com application. These third-party applications are hosted on Salesforce.com’s infrastructure. In this blog we will see what a Lightning Aura Component contains.

Lightning Component.

The Lightning Component framework is a UI framework for developing single page applications for mobile and desktop devices. Lightning includes the Lightning Component Framework and some exciting tools for developers. Lightning makes it easier to build responsive applications for any device like desktop, mobile, tablet etc. As per Sprint’19 release you can build lightning component using two programing models.

  1. Lighting Aura Component.
  2. Lightning Web Component.

There are different components in a Lightning Bundle together they are called as Lightning Component Bundle. A Component bundle contains a component or an app and its related resources.

How to create a Lightning Component in Salesforce?

Step 1: Login into Salesforce instance.

Step 2: Go to Developer Console.

Step 3: Click on File — New – Lightning Component.

Step 4: Give a proper name (My_Lightning_Component) to the component and click Submit.

Basic Custom Lightning Component

 If you observe lightning bundle, you can see that it has 8 different components namely,

  1. Component
  2. Controller
  3. Helper
  4. Style
  5. Documentation
  6. Renderer
  7. Design
  8. SVG

Component

Component is where you do actual UI design for the module that is being developed. Lightning has its own set of tags which are called aura tags.  When you create a component with above steps you see salesforce created a default tag for lightning component. No other components are created until you request those by clicking on respective component.

Know more about Component.

Controller

Controller handle client-side events in lightning bundle. It’s a JavaScript resource that defines the functions for all of the component’s actions. A client-side controller is a JavaScript object in object-literal notation containing a map of name-value pairs. Function can represent an action event. Client-side controllers are surrounded by parentheses and curly braces. Separate action handlers with commas.

Know more about Controller.

Helper

Helper in lightning bundle is similar to controller where you write client-side javascript methods. These methods are more like reusable methods which can be called from any controller method.

Know more about Helper.

Style

Sometimes there will be scenario where you need to define specific set of style to the tags that are used in component. This is similar to how style tags are defined in normal HTML pages or Visualforce pages. Only difference is style name definition will start with .THIS keyword. You can also define specific style tags for other devices like, mobile or tablet etc using @media.

Know more about Style.

Documentation

Documentation helps developers use your components to develop their apps more effectively. You can provide interactive examples, documentation, and specification descriptions for

  1. Component
  2. Event
  3. Interface.

Know more about Documentation.

Renderer

Renderer in Client-side is to override default rendering for a component. You can consider what data should render on load or on reload. The framework’s rendering service takes in-memory component state and creates and manages the DOM elements owned by the component. If you want to modify DOM elements created by the framework for a component, you can modify the DOM elements in the component’s renderer. Otherwise, the framework will override your changes when the component is rerendered.

Know more about Renderer.

Design

In design section you can control which attributes are exposed to builder tools like the Lightning App Builder, Experience Builder, or Flow Builder. A design resource lives in the same folder as yours .cmp resource, and describes the design-time behavior of the Aura component—information that visual tools need to display the component in a page or app.

Know more about Design.

SVG

If you want to use custom lightning icons in your aura component then you can define the same icon in svg section of lightning bundle and use the same in lightning component.

Know more about SVG.


Resources.

Salesforce: Component Bundle

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s