This tutorial will walk you through integrating your custom JavaScript modules with Salesforce Lightning Web Components and use them in Salesforce Orgs.

Salesforce Developer 101: Terminologies and Basic Concepts

Screenshot of an org (by: Lynn Zheng)

What is a Salesforce org?

A Salesforce org is a customer-facing platform that contains Salesforce data.

What is a Lightning Web Component (LWC)?

A lightning web component is essentially a Web Component that uses Salesforce-branded styles and encapsulates Salesforce data.

Dev Environment and Toolkit

What you will need:

• A Trailhead account which allows you to create a Trailhead playground/test org
• Salesforce Developer Experience (SFDX) command-line client
• Visual Studio Code

If you haven’t yet set up the full Salesforce Developer Experience (SFDX) environment, go to Trailhead, sign up, and complete the Quick Start: Lightning Web Components Trail. This will set up the entire toolkit we need for this tutorial and should take no more than 20 minutes.

If you are a Visualforce or an Aura developer who has set up SFDX but aren’t familiar with LWC, I’d recommend you to work through the last module of the Quick Start: LWC Trail to create a HelloWorld LWC.

If you are otherwise already familiar with SFDX and LWC, go ahead and create a simple HelloWorld LWC. The LWC doesn’t have to be anything more than <div>Hello World</div> .

Custom HelloWorld LWC is on top of the left panel

Wherever you are coming from, you should end up with an org page that contains a custom LWC with files **helloWorld.html, helloWorld.js, **and helloWorld.js-meta.xml.

Add a button to the custom LWC using thelightning-button tag. Its label attribute contains the text it displays. Its onclick attribute should point to an event handler called clickHandler .

In helloWorld.html, add the HTML for the button:

<lightning-button label=”Say Hello in the JS Console” onclick={clickHandler}></lightning-button>

In helloWorld.js, implement the clickHandler method:

clickHandler() {
    console.log('hello from helloWorld.js');
}

Open the default org page (in Visual Studio Code, Command + Shift + P, SFDX: Open Default Org), open the web console, click the button, and we should see the console log.

In case the org doesn’t automatically refresh, click on the gear icon on the top right hand of the page, go to Page Setup, Refresh the current page, and Save.

#javascript #software-development #salesforce