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.

Top 5 Lightning Component Framework Tips

top5This is a list similar to the one I did for Visualforce, which continues to be one of the most popular posts on this blog. So, I thought since I just published a course about Lightning development, I should do a Top 5 Tip list for it as well.

#1 – Refactoring is a Key Principle

Building Lightning Components is very different than traditional web development. When you are first getting started with this type of development, you are better off if you accept right from the beginning that refactoring is inevitable.

When you are first evaluating a solution, the right combination of components may not be intuitively obvious. This is especially true if you are coming from an object-oriented background and tend to look at breaking everything up into nouns and verbs. That approach does not really work with component-based design.

More than likely, you will start off with a design and then find that it makes more sense to refactor your code and break it up into additional or even nested components. There is nothing wrong with this and when developing with the Lightning Component Framework, refactoring is typically quite painless.

#2 – Apps and Components Run in System Mode

All Lightning apps and components run in system mode, which means that it is possible for your components to expose sensitive data without the correct permissions checks. The first thing you want to do is always include the with sharing keyword in all Apex code. This will enforce record access. But, to make your components truly secure, you must also include CRUD (Create Update and Delete) and FLS (Field Level Security) permission checks.

All Lightning apps and components run in system mode, which means that it is possible for your components to expose sensitive data without the correct permissions checks.

Unfortunately, most of the sample Lightning code that is out there right now (including what is on Trailhead and even what is in my first Pluralsight course on Lightning development), does NOT include code to check for proper CRUD or FLS access on the server-side.

In all fairness, Trailhead does include comment markers telling you where it should be inserted, but does not include the code. And in my course, I include a discussion about this topic in the last module and suggest that the viewer add this code themselves as a learning experience. It is not ignored. It is just that when you are learning how to develop Lightning components, there is a bit of a steep learning curve that goes with it. Educational providers such as Tailhead and my first Getting Started Pluralsight course are introducing you to all this in baby steps.

That does not mean that the concept of checking for CRUD and FLS permissions in your Apex server-side code is not important and why I wanted to include this as one of my tips. So, what is all this about?

Since Lightning components do not automatically enforce CRUS or FLS, your components must do this manually. You should check isAccessible(), isDeleteable(), isCreateable() and isUpdateable before running any queries or DML statements.

My friend at Salesforce University, Andres Perez has posted to his GitHub repo a secured data access helper that you can download and install into your org very easily. It includes methods to both query the database and perform DML securely and will throw back an exception if not valid. I strongly suggest that you check it out and consider using it with your projects.

#3 – Mark Most Resources as Global

You should mark your component resources as global for any that need to be accessed outside of your own org. Otherwise your components, attributes and events will not be seen in Lightning App Builder, Community App Builder or an installed package.

For the moment, the access check restrictions are limited and not being checked for all resources. This means that it is possible for you to create a Lightning component now, not mark it as global and have it show up fine in an outside tool. But then, in a later release, the access checks will be tightened and all of a sudden your component is no longer visible or usable.

Therefore, I suggest automatically marking all the following resources with access=”global”, unless there is a security reason not to expose them to outside tools:

  • aura:application
  • aura:interface
  • aura:components
  • aura:attribute
  • aura:event

#4 – Use Lightning Inspector to Debug and Learn about Lightning

The Salesforce Lightning Inspector is a Google Chrome DevTools extension that offers a lot of really neat features that can help you not only debug your Lightning app, but also learn more about Lightning in general. For example, the Components Tree, which you can see an image of below, shows you attribute names and values for all your Lightning components. Not just the rendered HTML elements, but the actual components as they are defined in your source code. This can be really valuable when you are trying to identify default values for component attributes.

LightningInspector2.png

 

 

 

Other useful tabs include the Event Log and Actions. My favorite is the actions, because you can see exactly what data in being passed into the action and then what is being passed back (see image below), which can be incredibly useful when debugging an issue.

ActionsTab.png

Just keep in mind that when using these tabs, you do need to turn on the recording before you will see results. You do that by clicking the circle icon in the top left corner, which in the screenshot above is red since recording was turned on. If it wasn’t that circle would be grey.

#5 – Take Advantage of Built-in Docs Feature

The last tip involves documentation, which I know is not typically a developers favorite subject, but Lightning makes it so easy to document your components, that it would be silly not to take advantage of this.

You can add a document resource to your component bundle, such as you see in the image below:

DocumentResource.png

Once created, this documentation resource will be rendered in the AuraDocs app, which every Lightning enabled org has and can be accessed through a URL, such as the following:

https://saralightning1-dev-ed.lightning.force.com/auradocs/reference.app

Where you replace the end of your unique org URL with /auradocs/reference.app

So, my rendered doc resource file defined above, will look like the following:

RenderedDocResource.png

Cool, eh?

Even if you do not want to create a document resource for your component, then you can at least add a description attribute for each of the following elements:

  • Components
  • Attributes
  • Events
  • Interfaces

These descriptions will automatically appear in the AuraDocs for your org (even if you never create a document resource).

 

First Pluralsight Course About Lightning Published

Author-Badge_Sq-Black_SmallI am proud to announce that my first course for Pluralsight which is titled, “Getting Started Building SPA’s with Lightning Component Framework” was released last night.

Here is the course description:

Learn how to build single page apps (SPAs) with the new Lightning Component Framework.  This modern framework is built on the open-source Aura Framework and includes all the tools and technologies Salesforce enterprise developers need to build responsive and efficient component-based applications for any device. You’ll learn the basics of building Lightning components by stepping through building a single page app used to track race participation. You will also learn to apply professional styling, handle events with JavaScript client-side controllers and access data with server side controllers using Apex code. The course will finish off by showing you how to document your components and debug the Lightning App using browser tools.

I strongly believe that component frameworks like Lightning really are the future of web-based development. All of the major vendors, such as Google (with Polymer), Facebook (with React), Twitter (with Flight) and Mozilla (with Brick) are investing in component frameworks.

Lightning is also a JavaScript-based framework, but unlike the other JS frameworks like AngularJS, Backbone and React, Lightning is the only one of those frameworks that is designed specifically for enterprise applications.

So, if you do not know about Lightning and want to find out more, I hope you take the time to check out my new Pluralsight course. And, I would love to hear what you think about it.