Post 3 – Building Your First Lightning Web Component for Salesforce Series

This will be the third 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, “Building Your First Lightning Web Component for Salesforce” from Pluralsight. These posts will contain code snippets of the code used in the course, but will not include all the tips and best practices about using SFDX, along with the way I personally approach teaching in my video courses.

You also have to realize that the solution is built in stages and so the code you see here is not exactly what you will see by the end of the next module. For all that, you will just have to wait and watch the course, which I hope you do.

And Finally, I know there has been a big delay between the first two posts and these remaining posts, but I promise you that the delay will have been worth the wait. I am VERY proud of how this course is turning out and feel like it will be my best yet. 

Component Design

LWC’s are similar to Aura components in the fact that you should consider each component as an application building block. And just like with Aura components, most LWC’s will contain many smaller, nested components. The biggest difference is that the communication patterns between Aura components and LWC’s is VERY different.

LWC Nested Composition

NestedComposition

In this course, we will actually be creating multiple LWC components that demonstrate a nested pattern. At the outermost layer we will have a Lightning App Page and inside of that will be an owner or container component. The owner can contain other components, which also contain other components. What is happening here is that we have a parent-child relationship going on and that is very important is determining how data is passed between LWC components.

Creating the Owner Component

At first this component (which we will name myFirstLWC) will just contain placeholder text for where the two components it will contain will ultimately reside. Here is the HTML we will use for now:

<template>
    <div class="c-container">
            <lightning-layout multiple-rows="true">
                <lightning-layout-item padding="around-small" size="12">
                    <lightning-layout>
                        <lightning-layout-item padding="around-small" size="6">
                            <div class="slds-box slds-theme_default">
                                <h2>TO DO: Add List LWC Component here</h2>
                            </div>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="6">
                            <div class="page-section page-main">
                                <h2>TO DO: Add Map LWC Component here</h2>
                            </div>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-layout-item>
            </lightning-layout>
        </div>
</template>

You will also need to modify the metadata file so it exposes this component (but ONLY this component since it is the owner) to the Lightning App Builder.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="MyFirstLWC">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>     
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

  1. Type “Lightning App” in Quick Find and select Lightning App Builder.
  2. Click New to start the Wizard.
  3. Leave the default on App Page and click Next.
  4. Enter the label “Lead Locator” and click Next.
  5. Select One Region and click Finish.
  6. In the Builder, scroll down to to the Custom List and drag the myFirstLWC onto the design surface.
  7. Click Save.
  8. Click Activate when prompted.
  9. From the Activation Wizard, accept the defaults, and select the Lightning Experience tab.
  10. Select Sales and click Add Page to app.
  11. Click Save.
  12. Click Back to return to Setup.
  13. Click the App Launcher and select the Sales app.You should see the Lead Locator app and you should select it to see your very basic app so far.

Creating the LeadList Component

The Here is the HTML for our leadList component. Notice that it contains two other nested components. One is a Lightning base component called lightning-input and the other is a custom one yet to be created called lead-list-item.

<template>
    <lightning-card title="Lead Search" icon-name="standard:search" class="slds--around_medium">
        <div class="slds-box slds-theme_default">
            <lightning-input
                label="Search Term"
                variant="label-hidden"
                placeholder="Search by name, phone, website, or address"
                type="text"
                value={searchTerm}
                onchange={handleSearchTermChange}>
            </lightning-input>
            <h3>Leads for {searchTerm}</h3>
        </div>
        <div class="slds-m-around_small">
            <template if:true={leads}>
                <template for:each={leads} for:item="lead">
                    <c-lead-list-item key={lead.Id} lead={lead} ></c-lead-list-item> 
                </template>
            </template>
        </div>
    </lightning-card>
</template>

Since this module is only about Composition and not about data, the JavaScript for this component will just contain some static JSON code to represent the lead data. It will also use the Track decorators for the leads array and the searchTerm, which allow you to keep track of a properties value when it is re-rendered.

Most importantly, it will follow best practices and use the simplest way to communicate with events by using a standard CustomEvent called newsearch.

import { LightningElement, track} from 'lwc';

export default class LeadList extends (LightningElement) {
    @track leads =[];
    @track searchTerm;

    handleSearchTermChange(event) {
        this.searchTerm = event.target.value;
        const selectedEvent = new CustomEvent('newsearch', {detail: this.searchTerm});
        this.dispatchEvent(selectedEvent);
    }

    leads = [
        {
            "Id": "LeadRef1",
            "Name": "Bertha Boxer",
            "Title": "Director of Vendor Relations",
            "Company": "Farmers Coop. of Florida",
            "Street": "321 Westcott Building",
            "City": "Tallahassee",
            "State": "FL",
            "PostalCode": "32306"
        },
        {
            "Id": "LeadRef2",
            "Name": "Phyllis Cotton",
            "Title": "CFO",
            "Company": "Chamber of Commerce",
            "Street": "300 E Park Ave",
            "City": "Tallahassee",
            "State": "FL",
            "PostalCode": "32301"
        },
        {
            "Id": "LeadRef3",
            "Name": "Jeff Glimpse",
            "Title": "SVP, Procurement",
            "Company": "Tallahassee Taxes",
            "Street": "1327 Colorado St",
            "City": "Tallahassee",
            "State": "FL",
            "PostalCode": "32304"
        }
    ];

}

 Modifying the Owner Component

Since we added a CustomEvent to the leadList component, we will need to add some JavaScript to the owner component, myFirstLWC that will handle this event.

import { LightningElement, track } from 'lwc';

export default class MyFirstLWC extends LightningElement {
    @track searchTerm;

    handleNewSearch(event) {
        this.searchTerm = event.target.value; 
    }
}

We will also need to modify the HTML so that we remove the placeholder text for the leadList component. Notice though how it is named. All LWC’s will be rendered with the c namespace, followed by a hyphen and then the component name, which is also separated by a hyphen. LWC knows that the leadList component is two words because we used kebab or camel case when naming it. This is a commonly used HTML standard and it means that the component must start with a lowercase letter and the other letter must be capitalized with no spaces in between, which is how we named the leadList component.

<c-lead-list onnewsearch={handleNewSearch}></c-lead-list>

Creating the leadListItem Component

This is just a very basic component that will display the results of the search. Not much to it for now.

<template>
    <lightning-layout vertical-align="center">
        <lightning-layout-item padding="around-small">
            <p>{lead.Name}</p>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <p>{lead.Title}</p>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <p>{lead.Company}</p>
        </lightning-layout-item>
    </lightning-layout>
</template>

And here is the JavaScript for that component. It will use the api decorator since the lead that is passed to it is a public property.

import { LightningElement, api } from 'lwc';

export default class LeadListItem extends LightningElement {
    @api lead;
}

So that is all we have for now. If you push all the code we have here and go to do a search, you should see the term you type displayed right below it, but not much else is happening yet. But stay tuned for the next post, because that is where all the magic will happen and the solution will come together.

Post 2 – Building Your First Lightning Web Component for Salesforce Series

This will be the second 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, “Building Your First Lightning Web Component for Salesforce” from Pluralsight.

Setting Up Your Development Environment (in 5 somewhat easy steps)

Step 1: Signup for a Developer Org

I know you may already have one of these, but  I suggest you sign up for another one since this will be used primarily as a DevHub. You go can signup here.

The primary function of the DevHub is to create and manage scratch orgs. To enable the DevHub, go to Setup and type Dev in the Quick Find Box and go to the DevHub Page. Click the Enable button and just remember that once enabled, you cannot disable a DevHub org.

Step 2: Install the latest version of Visual Studio CodeVSCode

Even if you already have Visual Studio Code running on your machine, I suggest you to download and install this version by going here.

This is this is the IDE that Salesforce has chosen to recommend and fully support for LWC.

Step 3: Install the Salesforce CLI

The CLI, or Command Line Interface helps to simplify Salesforce development by allowing you as a developer to pretty much do everything you need to do to develop, test and deploy your code.

Be aware that unlike the rest of Salesforce,  the CLI is updated weekly.  You can download the version for your operating system here. Just remember to run the sfdx update command frequently so you know you have the latest version.

Step 4: Install the Salesforce Extension Pack for Visual Studio Code

To get this installed, you should launch Visual Studio Code and when you do,you will want to start by clicking the extensions icon on the left toolbar. If you start to type in Salesforce, you should see a list of all the Salesforce extensions. For now, you will want to click install for the Salesforce Extension Pack.

SalesforceCLI

Step 5: Install the Java Platform Standard Edition Development Kit

This can be found on the Oracle website and you will want to make sure you have installed the latest version 8 or 11 for your particular operating system. During the installation, you will need to ensure that the install points to the directories listed here for either Windows or the mac:

  • Windows: C:\Program Files\Java\jdk1.8.0_221.jdk\
  • MacOS: /Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home.

Once the installation is complete you will also need to change a setting in VS Code to reflect this. You do this by going to File, Preferences and Settings. This is where you will point VS code to the right Java install. Enter apex java and select Salesforcedx-vscode-apex. Notice that the path here is not the one you installed to.

UPDATED Instructions below:

So,we will need to change this. You can do that by clicking on the input box, right below the wrong setting and then entering the correct one for your operating system. I am on Windows here. And finally you will relaunch VS Code.

After you re-launch, go to the terminal and type java -version and you should see the output like below.

SettingsJava

I know this seems like a pain, but there are some features in the Salesforce Extension pack that rely on this SDK, so it is important that you install it.

That’s it (Phew)…

See you next week, when we will be talking about composition and communication of your LWC’s.

Develop an Account Geolocation App with Lightning Web Components

So, here is a link to the code for the revised version of the Account Geolocation app. I understand that if you are new to LWC, this could be a little overwhelming, but the good news is that the course I am working on for Pluralsight right now will feature a very similar LWC app that I will walk you step by step through building yourself. Everything will be explained in time, I promise. So, stay tuned…

Trailhead offers a wonderful app created with Aura components that displays account search results on a map. Well, in preparation for the LWC course I am doing for Pluralsight, I decided to create a version using Lightning Web Components instead. This will be similar (NOTE: not the same) as the sample application that I will walk viewers through creating in the course.

I will try to put out as many posts as I can that show you the code (a little at a time), but the course is where you will get the most knowledge of all the great things I learned about LWC while converting it, so I hope you will stay tuned for that.

Now, here is what the LWC version looks like. And please do not immediately post a comment to say that it looks exactly like the Aura component version. That was the point. It was a conversion, so I made it look the same, but behind the scenes it is VERY different:

Screen Shot 2019-08-17 at 6.03.58 AM.png

Now, the app I will be walking the viewer through creating will be similar to this one, but different. And you will just have to wait to see that version (after all, this is supposed to be a teaser post 🙂

 

 

 

 

Thank You Salesforce…

no-limits-road-sign-260nw-72594046So this was my last week at Salesforce. For over a year, I had a blast working with some of the most talented writers and editors on the Trailhead team. We did some incredible things and it was a bit like riding on the top of a rocket ship. I’m super proud of all that I accomplished during my time with the team, but it’s time to move on.

What’s Next?

It is time for me to take a step back and return to the things that I really love the most- teaching people about technology and doing development work. I am already in talks with the fabulous people at Pluralsight about doing some new courses. I am also talking with other people about development work.

For the time being, I am just going to function as a freelance developer and author. I may consider accepting a full-time role in the future if it is just the right fit. But, for now I am super excited to be able to return to course development work. As much as I liked and appreciated the great writing on Trailhead, I really miss doing videos. I think they add so much more to the learning process. I am super excited about all the new interactive capabilities that Pluralsight now has and can’t wait to learn all about it.

Oh, and if you know of any good development opportunities, feel free to give me a shout. I would love to hear about it.

As my blog and twitter handler indicate, I have NO LIMITS, so anything and everything is possible right now. It’s a VERY exciting time for me.

Onward and Upward.

Why you should be using the Lightning Data Service whenever possible

If you are creating Lightning components and working with a single record of data, you should be using the Lightning Data Service (LDS) or the force:recordData tag.

And for those of you that have not heard about the LDS, you can think of it as the standard controller for lightning components. It is similar to the standard controller used in Visualforce in that it gets you access to your orgs data, but without the need to write any Apex or SOQL and that is a pretty cool thing because when you don’t have to worry about writing Apex, you also do not have to worry about FLS or Field Level Security and CRUD or Create Access Update and Delete security, which is something you would have to specifically check for in your code if you did not use the Lightning Data Service.

You see I have to tell you that all of you Visualforce developers have been a bit spoiled when it comes to security, b/c in most cases, the pages that you wrote did not have to specifically check for these permissions (even when they used controllers). But, the Lightning Platform works very differently than Visualforce and any Apex code you write does have to do these checks, which involves writing more code.

With the Lightning Data Service, you also get other built-in features like auto-notifications when there are record changes, as well as offline access for Salesforce1.

And if all that was not enough to convince you that Lightning Data Service is something you want to use, here is one more really big reason. Even if you have multiple components using the Lightning Data Service, they are all going to use a single request and deal with a cached response and in terms of performance this is huge.

Even if you have multiple components using the Lightning Data Service, they are all going to use a single request and deal with a cached response

So let’s talk about that a bit more. Let’s say you have two components that are using the force:recordData tag. Each one will make a request for data through the Lightning Data Service Controller, and those requests will be funneled into one single request which is sent to the Salesforce server, such as you see here.

LDSDemo2

But what is returned is a response that will be stored in a shared data cache and also returned back to the two components that started all this, such as in the diagram below. And this means that not only will those two components be able to retrieve the data faster than two components that were using their own apex controllers

LDSDemo3

But if a third component that needed that same data were to come along, it would be able to get a cached response almost immediately without even having to make a call to the server. Boom!

LDSDemo4

And the beauty of it all is that you can implement this with just a few lines of markup code in the component and then a few more lines in the JavaScript controller to load and save the record. You do not have to write any Apex or SOQL code to implement this, but you get all the performance benefits.

So now do you see why you need to be using the Lightning Data Service whenever possible?

If you found this article useful, you might want to checkout my latest course on Pluralsight titled, Lightning Component Development Best Practices, where I talk about the Lightning Data Service and a lot more.

 

Check Out Lightning Component Development Best Practices on Pluralsight

DevBestPractices

I am so happy to announce that my third course about Lightning Component Development Best Practices was published on Pluralsight last night.

I worked extra hard on this course and have spent every weekend for the past 6 months toiling over every little thing I included. I am really hoping that effort shows through and I would love to hear your feedback (good or bad). All feedback is welcome. The good stuff makes me feel good and the bad stuff makes me better, so it’s all good.

Here is the description for the course and a listing of the specific things it covers:

Are your Lightning Components performing at the best level they can? Are they secure? Will they scale well as you start to build more complex Lightning Applications? In this course, Lightning Component Development Best Practices, you’ll learn the answers to these questions and more. First, you’ll find out what simple best practices you can incorporate to improve client-side rendering. Next, you’ll learn how to enhance server-side efficiency. Finally, you’ll discover what you can do to ensure your components are secure. When you are finished with this course, you’ll have the confidence to build Lightning Components that run “Lightning Fast”.

Modules:

  • Improving Client-Side Performance
  • Enhancing Efficiency on the Server
  • Reusing Code in Complex Applications
  • Avoiding the Pitfalls of Inter-Component Communication
  • Enforcing Security and Mistakes to Next Make

 

 

 

 

Salesforce Play By Plays on Pluralsight

Screen Shot 2017-07-15 at 11.24.33 AMMy good friend Don Robins has been hard at work putting together a new series of Play by Play Pluralsight courses that are all about Salesforce development. This is all part of a deliberate attempt by Pluralsight to greatly expand the Salesforce portion of their library. Which, in case you have not noticed, has grown quite a lot in just the past year – with lot’s more good stuff to come.

If you are not familiar with them, courses in the Play by Play series are not your typical Pluralsight courses. They are more of a dialogue or open-end discussion in which the host, Don Robins interviews Salesforce MVP’s about topics they are the most knowledgeable and passionate about. Don does a great job of channeling all the best talk show hosts, as he playfully challenges each MVP, asking all the questions the viewer themself might ask. It is not so much of a “watch me do this” as it is a “so this is why I am thinking of doing this particular thing and here are a few ways I might do it”.

There are currently 4 Play by Play videos available and they cover the following topics:

Moving Visualforce Code to the Lightning UI in Salesforce

Featuring non-profit guru and certified developer and administrator Bonny Hinners, this Play by Play walks you through things to consider when moving your legacy Visualforce code to the new Lightning Experience. This is a topic I also cover in my course and is one that I think many Salesforce developers will be pondering over for years to come.

Managing Data in Salesforce Using Apex

In this Play by Play, Don sits down with Dan Appleman, Salesforce MVP and author of Advanced Apex Programming, to discuss all the gotchas you need to consider when working with data in your org. He will alert you to the common pitfalls that most developers make and lead you towards a better way of approaching your trigger code and unit tests.

Knowing When to Code in Salesforce

This is perhaps one of the most important topics for Salesforce Developers and one that is covered in depth by Don and Salesforce MVP and new Pluralsight superstar, David Liu. David introduces a common scenario and then talks through all the different ways the solution could be achieved. Beginning with custom fields and then moving on to Workflow Rules, Process Builder, Flows, and finally when there are no other options, Apex code.

How to Mobilize Your Salesforce App

Featuring mobile expert and Salesforce MVP, Gaurav Kheterpal, you will learn about all the different ways you can approach mobilizing your Salesforce apps. Starting with the easiest but least flexible alternative, Salesforce1 and then moving on to the more complex, but robust alternatives of going hybrid with the Android or iPhone mobile SDK’s, you will learn the pros and cons of each. Finally, you will learn how to build Hybrid apps, where you get some of the best of native, without all the complexity native brings.

And if you do not already have a Pluralsight subscription, now is the best time to get one (but make sure you hurry): Get up to a $30 Visa gift card when you sign up for Pluralsight by June 30!

Trailhead + Pluralsight = Successful Salesforce Developer

SFSucess

When I discovered Salesforce in 2011, the best way to learn all about it was to go through the Force.com Workbook, which has now been retired. I want to say the workbook was over 400 pages long and even though it did contain a ton of useful information, it was a bit dry and hard to read.

Fast forward to today and the old retired workbook has been replaced by a much improved source of information in the form of Trailhead. Trailhead uses the phrase, “The fun way to learn Salesforce” and they sure aren’t exaggerating.

Since it began in late 2014, Trailhead has grown quite a bit and just recently got it’s biggest update, which you can learn about here. If you are a developer that is interested in learning more about Salesforce, this is the way to go. Not only is the content free, but it is top quality. It is a GREAT, and as they say “fun” way to get introduced to any Salesforce related topic.

If you are interested in learning about Lightning (and who doesn’t want to learn more about Lightning?), and you are new to Lightning, check out:

And if you are already comfortable with the basics of Lightning and looking for something a little more challenging, then check out the following brand new modules:

But don’t stop with Trailhead. If you are really interested in becoming a Salesforce Ninja and earning a 6 figure income, then you need a subscription to Pluralsight too. I know developers tend to shy away from paying for anything, but the low cost of a Pluralsight subscription is more than worth it. And after all, if you are earning a 6 figure income, the low cost of a monthly subscription is nothing really.

The quality of the content on Pluralsight is unmatched by none. I know this because before I became a Pluralsight author, I produced courses/books for other vendors and none of them come close to Pluralsight. No one does more to ensure their authors will be successful and produce unique, quality content like Pluralsight. Period!!!

Also, as great as Trailhead is, it usually is only a starting point. It tells you the most important things you need to know, but tends to skip over a lot of the details. This is part of what makes it fun, but sometimes the details are good to know. Especially if you want to become a Salesforce Ninja, like I know you do. Well that is where the Pluralsight courses will come into play.

I know my two courses on Lightning, which you can find here, are loaded full of details that you will find no where else. The kind of details you get from blood, sweat and tears. From banging your head on the desk for hours before you finally figured out how something worked (NOTE: While I have not literally hit my head on the desk, I have certainly considered it enough).

And besides my two glorious Lightning courses, there are a bunch more about Salesforce (with more coming out everyday). In particular, I recommend:

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.

 

 

Career and Survival Strategies for Software Developers

QuestionsI just watched a Pluralsight course that I think EVERY software developer should watch. It is for developers brand new to the field, those that have been developing for only a few years, and those that have been developing for many years.

The course is general and non-technical, but is highly informative, extremely insightful, and remarkably hilarious.

The course is titled, “Career and Survival Strategies for Software Developers” by Dan Appleman. Dan talks honestly about the things that are important to every developer, but that are oddly hardly ever mentioned. Things like:

“How do I keep up with the latest technologies and not become obsolete?”

“How do I deal with all the professional politics that go along with being a developer?”

“How do I make the kind of money I need or want?”

So please take the time to watch this course and let me know what you think…