Post 1 – Customizing Salesforce with Lightning Aura Components series

This will be the first of a series of posts I will be doing over the next few weeks. They will all lead up to the introduction of my new course titled, “Customizing Salesforce with Lightning Aura Components” from Pluralsight. This course is a total re-write of my most popular course (so far), “Customizing Salesforce with Lightning Components: Getting Started“, which was released back in 2017. It will focus on using the new modern toolset that Salesforce offers as part of Salesforce DX.

Understanding the Lightning Component Framework

Lightning components (now called Aura components) were introduced in 2014. At that time, the web standards that existed offered only a limited amount of what developers needed and that is why Salesforce built them on top of the Aura Framework. It was basically, to compensate for what the standards lacked.

Flash forward to 2019 and a LOT has changed in the web development world. That is why in 2019, Salesforce announced the release of Lightning Web Components (LWC’s). It was also at that time that the original Lightning Components were renamed to Aura Components. They co-exist and are completely interoperable with LWC’s.

Who Should be Building Aura Components?

It probably will not surprise you to know that Salesforce developers are perfect for this, but what you might not realize is that so are junior Salesforce developers.

Salesforce Developer
Senior or Junior Salesforce Developers

Another group you may not think of is Salesforce Administrators. You see, Aura components are way simpler to create then Lightning Web Components. Yes, they do still require the developer to know a little about HTML and JavaScript, but since the introduction of Lightning components back in 2014, they have gotten a lot simpler to work with. So, as long as the Admin is seasoned and may even consider themselves as a Super Admin, then I think they too can embrace creating Aura components.

Salesforce Super Admins

Where Can Aura Components Be Used?

Lightning pages

This includes App pages, Home and Record Pages, and even a new Embedded Service Page. The embedded service page will not be covered in this course, but the app and home pages will.

Wizard from Lightning App Builder
Wizard from Lightning App Builder

salesforce mobile app

In late 2019, Salesforce launched a new and completely redesigned Salesforce Mobile App. You can learn more about it by visiting the New Salesforce Mobile App Quickstart in Setup. This will be covered in the final module on “Creating Components for Salesforce Mobile”.

Access the New Salesforce Mobile App QuickStart from Setup
Access the New Salesforce Mobile App QuickStart from Setup

Other places

These other areas are beyond the scope of this course, but just so you are aware, there is also:

  1. Quick Actions
  2. Stand-alone apps
  3. Inside Visualforce pages
  4. On other platforms such as Heroku, using Lightning Out

Anatomy of an Aura Component Bundle

An Aura component can be made up of several physical files that reside in what is known as a component bundle. Even though there are 8 files that can make up a component bundle, most simple components will only need to access a couple:

  1. Component or Markup file – Uses a .cmp file extension and is a required file and there can only be one per bundle. All markup must be encased in an <aura:component> tag and can include references to other components.
  2. Controller or JavaScript file – Uses a .js file extension and will contain all the client-side methods needed to handle events in your component.

Creating an Aura Component Bundle

The easiest way to create an Aura component is using the online Developer Console. This will be covered only once in this first module. The rest of the course will cover creating bundles using the new modern toolsets.

You can access the Developer Console by logging into a Developer org, click the gear icon and select Developer Console.

Access the online Developer Console
Access the online Developer Console

This will launch a new window and from here, you can go to File -> New -> Lightning Component.

Create a new Lightning Component in Developer Console
Create a new Lightning Component in Developer Console

The initial component I will show viewers how to build is very simple and will be used by Salespeople to update their cell number. From the New Lightning Bundle dialog, you only need to enter the name “updateCellNumber” and select the Lightning Tab and Lightning Page checkboxes in Component Configuration. And finally click Submit.

Create new Lightning Bundle in Developer Console
Create new Lightning Bundle in Developer Console

The component markup will be very simple to begin with and will include 3 Lightning Base Components. as the course progresses, this component, along with others will be expanded upon.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
  <lightning:card title="Update Cell Number">
    <p class="slds-p-horizontal_small">
      <lightning:input aura:id="phone" type="tel" label="Cell Phone Number" name="phone" placeholder="343-343-3434" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>
      <lightning:button variant="brand" label="Submit" title="Submit" onclick="{! c.handleClick }" />        
    </p>
  </lightning:card>  
</aura:component>

The JavaScript will also be simple to begin with and will only be used to display the phone number in a Windows Alert box.

({
	handleClick : function (cmp, event, helper) {
        alert('phone: ' + cmp.find("phone").get("v.value"));
    }

})

Stay tuned for the remaining modules and posts in the next few weeks. All leading up to the release of the Pluralsight course.

One comment

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