It has been a long time:) and lot happened in my personal life..Last year, I have been blessed with a baby boy :)…Let’s jump to the topic now..

Before we know about Lightning Component(LC), let’s talk about Lightning Component framework.

As per Salesforce, The Lightning Component framework is a modern UI framework for developing dynamic, responsive web apps for mobile and desktop devices. It uses JavaScript on the client side and Apex on the server side.

Advantages of Lightning Component Framework:

• Framework comes with an Out-of-the-box Components for building apps
• There are additional Lightning components available in the AppExchange, built by ISVs
• Responsive design and cross browser compatibility
• Event-driven architecture for better decoupling between components

So, what are Lightning Components or Aura Components?

Aura components are the self-contained and reusable units of an app.

A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables us to build apps with sophisticated UIs .

Base Lightning Components

The Lightning framework already has a set of prebuilt components and they are known as Base Lightning Components.

Now we know the definition of LC, there is also Base Lightning Components. What is it used for?

For instance, if we want to create a button, we don’t need to write code from scratch instead we make use of lightning:button base lightning component in our app and here lightning represents the namespace. The best part is we can configure the base component(meaning configure the given attributes etc) to form a new component in our app and it works seamlessly with desktop and mobile devices.

These base components handle the details of HTML and CSS for us too which makes it as light weight components. The whole list of component details are available in this component library link: https://developer.salesforce.com/docs/component-library/overview/components

Where can we use Lightning Components?

To see the lightning components in action in Salesforce, we need to launch it from either tabs or apps or actions:

Add LC as a Custom Tab in a Lightning Experience App

You can add Lightning Components as Custom Tabs by creating a Lightning tab under Setup->User Interface ->Tabs->Click New in the Lightning Component Tabs related list.

Once added as a tab, it will be available in All Items, if it is not added under Apps. If we create a new Lightning App under Setup -> App Manager | New Lightning App, it will be available in the App Launcher.

Note: We need to implement the force:appHostable interface(Out-of-box) in the aura:component tag on the Lightning component to allow it to be used as a custom tab in Lightning Experience or the Salesforce mobile app. I will create a LC in the next post which will be added as a custom tab in Lightning Experience.

Add LC as a Custom Tab in a Salesforce Mobile App

Create a custom Lightning component tab for the component under Setup->Tabs->Click New in the Lightning Tabs related list as described above.

Then, add your Lightning component to the Salesforce app navigation menu under Setup->Navigation->Salesforce Navigation. Once added, it will be displayed as a new menu item in the navigation menu in Salesforce mobile web.

Launch LC as a Quick Action

Create actions using a Lightning component under Setup->Objects->Account(for example)->Buttons and Links->Click on New Action button, and then add the action to an object’s page layout to make it instantly accessible from a record page.

Note: We need to add the force:lightningQuickAction or force:lightningQuickActionWithoutHeader interface(Out-of-box) to an Aura component tag on the LC to enable it to be used as a custom action in Lightning Experience or the Salesforce mobile app.

Add LC to Lightning Pages

A Lightning Page is a custom layout that lets us design pages for use in the Salesforce mobile app or in Lightning Experience. There are three types of Lightning Page and they are App Page, Home Page and Record Page. They can be created under Setup->User Interface -> Lightning App Builder and we can add our Lightning component to the Page.

Override Standard Actions with Aura Components

We can override the View, New, Edit, and Tab standard actions on most standard and all custom objects. One such example for account edit action override is given below:

Note: We need to implement the lightning:actionOverride interface(Out-of-box) to an Aura component tag on the LC to enable it to be used as a Override action in Lightning Experience.

Also, Lightning Components can be added to:

1. The stand alone app which would use the Salesforce data and available independently from the standard Salesforce environment.
2. Visualforce pages
3. The external site (for example, Sharepoint or SAP), or even elsewhere on the platform such as on Heroku using Lightning Out feature.

In the next post , I will create a simple Lightning Component and demonstrate its capabilities. Until then, see you!!

P.S. If you have any questions about this post, please give your comments below.