Tag Archives: Lightning Web Components

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

Working With Salesforce Data

The most important thing you need to be aware of when working with Salesforce Data is the Lightning Data Service, or LDS. If you have worked with Aura components, then you have probably already heard about it since it was introduced back in late 2017. The LDS is built on top of the UI or User Interface API. This is the API that Salesforce developers use internally to build the Lightning Experience.

The reason why has to do with the following benefits:

1. Caching, so loading data is as fast as possible
2. Progressive loading of data, which also improves performance
3. Optimization of server calls, which guess what, offers performance advantages.

Hopefully, you are seeing the key factor here.

Using the Lightning Data Service Wire Adapter

As I mentioned in the last post, I am building this solution in stages. In the last post, I created a very simple child component named leadListItem to display all the leads returned by a search term. This was ok, but the output was definitely not pretty. The easiest way to fix that is to take advantage of one of the many LWC base components, which as of Dreamforce 2019, are now mostly available as open source.

And one of the best and easiest to use base components, lightning-datatable offers incredible benefits such as formatting for appropriate data types, header and row level actions, resizing of columns sorting and text wrapping. And there are even more.

I will be replacing the template code in leadList.html that called the leadListItem component, with a call to the lightning-datatable. The HTML will now look like this:

<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>
         </div>
        <div class="slds-m-around_small">
            <lightning-datatable
                key-field="id"
                data={leads}
                columns={cols}
                onrowaction={handleRowAction}
                hide-checkbox-column = "true">
            </lightning-datatable>
            <template if:true={error}>
                // Hint. In the actual course, I will implement something better than this
                The following error was encountered: {error}
            </template>
        </div>
    </lightning-card>
</template>

I will need to remove the JSON data in the JavaScript and add a constant to support the column definitions, as well as a new tracked variable for the columns and another for the error that could be returned and only rendered when there is an actual error using the if:true directive in the HTML template.

To help minimize the number of Apex calls, I will use a common technique that was implemented in the lwc-recipes repo. It involves slightly delaying the dispatch of the newsearch Custom Event.

I will also need to add a new imports command that is used to call Apex Code that returns results from a search. And, I will need to add another imports for the wire directive to the top import command. The wire directive is used to read Salesforce data reactively and when the data is provisioned, it automatically re-renders the component. This will be implemented in loadLeads.

And finally, there will be a handler that uses the navigation service to navigate the user to the Lead record page if they decide to click the info icon displayed in the last datatable column. The code for the leadList.js will now look as follows:

import { LightningElement, track, wire } from 'lwc';
import searchLeads from '@salesforce/apex/LeadSearchController.searchLeads';
import { NavigationMixin } from 'lightning/navigation';

/** The delay used when debouncing event handlers before a method call. */
// This code was copied directly from the trailheadapps/lwc-recipes GitHub repo
const DELAY = 350;

// It is a general convention to capitalize constants
const COLS = [
    {
        label: 'Name',
        fieldName: 'Name',
        type: 'text'
    },
    {
        label: 'Title',
        fieldName: 'Title',
        type: 'text'
    },
    {
        label: 'Company',
        fieldName: 'Company',
        type: 'text'
    },
    {
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            title: 'View Details',
            alternativeText: 'View Details',
            iconName: 'action:info'

        }
    }
];

export default class LeadList extends NavigationMixin(LightningElement) {
    @track leads = [];
    @track searchTerm;
    @track cols = COLS;
    @track error;
    
    handleSearchTermChange(event) {
        this.searchTerm = event.target.value;
        if (this.leads) {
            const selectedEvent = new CustomEvent('newsearch', {detail: this.searchTerm});
            window.clearTimeout(this.delayTimeout);
            // eslint-disable-next-line @lwc/lwc/no-async-operation
            this.delayTimeout = setTimeout(() => {
                this.dispatchEvent(selectedEvent);
            }, DELAY);
        }
    }

    @wire(searchLeads, {
        searchTerm: '$searchTerm'
    })
    loadLeads({ error, data }) {
        if (data) {
            this.leads = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.leads = undefined;
        }
    }

    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: row.Id,
                actionName: 'view',
            },
        });
    }

}

The last thing to do is to create the Apex class that will do the actual search of the Salesforce data. It will use a SOSL query to perform a special kind of search across multiple fields in a single object. Notice that the searchLeads method includes an @AuraEnabled tag, as well as the cacheable = true. This ensures the data returned will be cached, which is perfect for mutable data such as the lead addresses. The code for that will look as follows:

public with sharing class LeadSearchController {
    
    @AuraEnabled(cacheable=true)
    public static List<Lead> searchLeads( String searchTerm ) {
        List<Lead> leads = new List<Lead>();
        if ( String.isNotBlank( searchTerm ) ) {
            List<List<SObject>> searchResults = [
                FIND :searchTerm
                RETURNING Lead(
                    Id, Name, Title, Company,
                    Street, City,
                    State, PostalCode
                    ORDER BY Name
                    LIMIT 10
                )
            ];
            leads = searchResults[0];
        }
        return leads;
    }
}

Using the CLI to Load Data

At this point, if you were to save and push all this code to your scratch org and then open the Lead Locator tab and do a search, what do you think would happen?

Well, you should get nothing returned because by default scratch orgs are not loaded with any Lead data. But, we can use some very handy CLI commands to export data from another developer org and then import it into our scratch org as JSON data.

I have already used the export command to get 10 lead records from a developer org. That command looked like the following:

sfdx force:data:tree:export --query \                                                                	"SELECT ID, FirstName, LastName, Phone, Company, Title, Street, City, \ 		State, PostalCode FROM Lead limit 10" \                                                	
--outputdir ./data --json

And to import them, I will only need to use the terminal in Visual Studio Code to execute another CLI command that looks like this:

sfdx force:data:tree:import -f data/Lead.json -u <your scratch org username here>

Adding the Lead Map Component

To finish off the solution, I will need to add the leadMap component. It will use another very useful Lightning base component called lightning-map. That base component can display multiple locations using geocoding and mapping imagery from Google Maps. The leadList.html for that component will look like this:

<template>
    <template if:true={leads}>
        <lightning-map
                zoom-level="11"
                map-markers={markers}
                markers-title="Leads">
        </lightning-map>
    </template>
    <template if:true={error}>
            // Hint. In the actual course, I will implement something better than this
            The following error was encountered: {error}
    </template>
</template>

The leadList.js file will import the same LeadSearchController code used in the leadList, but remember that this data is cacheable. And the @wire directive will do a search using a new variable called searchInput. This variable will be passed to the leadMap component as a public variable from the owner component using the @api directive. The final code for leadList.js will look like this:

import { LightningElement, track, wire, api } from 'lwc';
import searchLeads from '@salesforce/apex/LeadSearchController.searchLeads';

export default class leadMap extends LightningElement {
    @track markers = [];
    @track error;
    @track leads;

    // Private variable
    searchTerm;

    @api get searchInput() {
        return this.searchTerm;
    }

    set searchInput(value) {
        this.searchTerm = value;
    }

    @wire(searchLeads, {
       searchTerm: '$searchInput'
    })
    loadLeads({ error, data }) {
        if (data) {
            this.leads = data;
            this.markers = data.map(lead => {
                return {
                    location: {
                        Street: lead.Street,
                        State: lead.State,
                        City: lead.City,
                        PostalCode: lead.PostalCode
                    },
                    title: JSON.stringify(lead.Name),
                    icon: 'utility:pinned'
                }
            })
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.leads = undefined;
            this.markers = [];
        }
    }
}

The last thing to change is code in the Owner component. In the myFirstLWC.html, I will need to replace the placeholder text with the a call to the new leadList child component. But, to prevent the map from being displayed when the user first loads the page, I will need to use another CustomEvent called searchcomplete. If no search has been done, then the user will get a helpful info message displayed. The HTML code for the owner will now look like this:

<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">
                                <c-lead-list onnewsearch={handleNewSearch}
                                onsearchcomplete={handleSearchComplete}></c-lead-list>
                            </div>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="6">
                            <div class="slds-box slds-theme_default">
                                    <lightning-card title="Lead Map" icon-name="action:map" class="slds--around_medium">
                                        <template if:true={searchComplete}>
                                            <c-lead-map search-input={searchInput}></c-lead-map>
                                        </template> 
                                        <template if:false={searchComplete}>
                                            <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info" role="alert">
                                                <span class="slds-assistive-text">info</span>
                                                <h2>You will need to enter a search term before a map is displayed.</h2>
                                            </div>
                                        </template> 
                                    </lightning-card>  
                                </div>
                        </lightning-layout-item>    
                    </lightning-layout>
                </lightning-layout-item>
            </lightning-layout>
        </div>
</template>

Of course, this will mean I will also need to modify the myFirstLWC.js file to include a handler for that new CustomEvent. This code will now look as follows:

import { LightningElement, track } from 'lwc';

export default class MyFirstLWC extends LightningElement {
    @track searchTerm;
    @track searchInput;
    @track searchComplete = false;

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

    handleSearchComplete(event) {
        this.searchInput = event.detail;
        this.searchComplete = true;
    }
}

And to explain all this in terms of the component communication, consider the following diagram:

But, the course is not done, and the best is yet to come in the next post in which I will go over converting Aura components using an example similar to this with a completely different approach that I think you will find very interesting.

And finally, if you are super excited about this, you might want to consider taking advantage of this limited time offer from Pluralsight for 40% off an annual subscription until December 6, 2019.

40% Off Pluralsight – Last Chance to Save