Salesforce DX Setup Guide

 The Salesforce Developer Experience (DX) is a set of tools that streamlines the entire development lifecycle. It improves team development and collaboration, facilitates automated testing and continuous integration, and makes the release cycle more efficient and agile.

Advantages of Salesforce DX

·         It helps improve team collaboration and development

·         It makes the release cycle process more agile and efficient

·         It allows developers to use any tool to modify the code such as CLI, VIM, Sublime, Atom, etc.

·         Facilitates automated testing for your code and enables continuous integration

·         Requires a local development setup for developers to get hands-on expertise

Components of Salesforce DX:

·         VS Code: Visual Studio Code is the go-to code editor for Salesforce developers. It’s free, open-source, and available for Windows, Linux, and macOS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more.

·         Salesforce CLI (command-line interfaces): The Salesforce CLI is a powerful command-line interface that simplifies development and builds automation when working with your Salesforce org. Use it to aggregate all the tools you need to develop with and perform commands against your Salesforce org. Synchronize source to and from scratch orgs.

·         Extensions in VS Code: The features that Visual Studio Code includes out-of-the-box are just the start. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code’s rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code. 

The Salesforce Extension pack includes tools for developing on the Salesforce platform in the lightweight, extensible VS Code editor. These tools provide features for working with development orgs (scratch orgs, sandboxes, and DE orgs), Apex, Aura components, and Visualforce.

Setup Dx Environment:

Install the CLI on Windows

You install the Salesforce CLI on Windows with an .exe file.

Download and run the Windows installer.

 Verify your Installation:

Run this command to verify the Salesforce CLI version:

Sfdx –version

 Run this command to verify the Salesforce CLI plug-in version:

sfdx plugins –core

 

This command returns a list of the other plug-ins installed in the CLI:

Sfdx plugins

Download and Install VS Code:

VS code can be downloaded from the below link.

https://code.visualstudio.com

Setup Salesforce DX with VS Code

Step 1: To setup Saleforce in VS Code, first install “Salesforce Extension Pack”.

Step 2: To go for a Lightning Web Component in VS Code, first you need to install “Lightning Web Components”.

These are the steps required to set up and configure Salesforce DX on your system.

Create a Salesforce DX Project via Command Palette

·         In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS

·         Type SFDX

·         Select SFDX: Create Project

·         Enter HelloWorldLightningWebComponent as the project name

·         Press Enter

·         Select a folder to store the project

·         Click Create Project. You should see something like this as your base setup:

Authorize Your Non-DevHub Org via Command Palette

·         In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS

·         Type SFDX

·         Select SFDX: Authorize an Org

·         Select the login option accordingly. Select login.salesforce.com to log into your developer org or select test.salesforce.com to log in to the sandbox. You can also use a custom domain URL to log in.

·         Log in using your org.

·         If prompted to allow access, click Allow.

·         After you authenticate in the browser, the CLI remembers your credentials. The success message should look like this:

 Points to Remember:

1. Make sure that you have installed Java 8 or Java 11 and configure the path on your system.
2. If you are not able to retrieve or deploy components and you’re getting “UNSUPPORTED_API_VERSION: Invalid Api version specified on URL” message, then execute the following command: “sfdx force:config:set apiVersion=48.0” and select the previous version in it.

 

Decorators in LWC

 

The Lightning Web Components programming model has three decorators that add functionality to property or function. Decorators dynamically alter the functionality of a property or function.

There are mainly three decorators that we use in LWC.

@api:

     Public properties are reactive. If the value of public property changes, the component rerenders.

     To expose a public property, decorate a field with @api. Public properties define the API for a component.

·      To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

·         import @api decorator from lwc

1	import { LightningElement, api } from 'lwc';

doItem.js

1 2 3 4 5

// todoItem.js import { LightningElement, api } from 'lwc'; export default class doItem extends LightningElement {     @api itemName = 'New Item'; }

todoItem.html

1 2 3 4 5

<!-- todoItem.html --> <template>     <div class="view">         <label>{itemName}</label>     </div>

todoApp.html

1 2 3 4 5 6 7

<!-- todoApp.html --> <template>     <div class="listing">         <c-todo-item item-name="Srinivas"></c-todo-item>         <c-todo-item item-name="Lakshmi"></c-todo-item>     </div> </template>

 

@track

Fields are reactive. If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value.

There is one use case for @track. When a field contains an object or an array, there’s a limit to the depth of changes that are tracked. To tell the framework to observe changes to the properties of an object or to the elements of an array, decorate the field with @track

Import @api decorator from lwc.

helloWorld.html

1 2 3 4 5 6 7 8

<template>     <lightning-card title="HelloWorld" icon-name="custom:custom14">       <div class="slds-m-around_medium">         <p>Hello, {greeting}!</p>         <lightning-input label="Name" value={greeting} onchange={changeHandler}>        </lightning-input>       </div>     </lightning-card> </template>

helloWorld.js

1 2 3 4 5 6 7

import { LightningElement } from 'lwc'; export default class HelloWorld extends LightningElement {   greeting = 'World';   changeHandler(event) {     this.greeting = event.target.value;   } }

 @wire

To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders.

 Components use @wire in their JavaScript class to specify a wire adapter or an Apex method.

We need to import the @salesforce/apex scoped module into JavaScript controller class.

1	import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodRef';

 We can call the apex class in  Lightning web component using these different ways:

• Wire a property
• Wire a function
• Call a method imperatively

Data Binding

 Data binding is a technique, where the data stays in sync between the component and the view.

Whenever the user updates the data in the view, LWC updates the component. When the component gets new data, the LWC updates the view.

Data Binding is of  two  types:

One-way Data Binding:

One-way data binding is a situation where information flows in only one direction in our case from the controller to the template(HTML).

Two-Way Binding:

Two-way data binding in LWC will help users to exchange data from the controller to the template and form template to the controller.

 It will help users to establish communication bi-directionally.

• The Lightning Web Components programming model has given us some decorators that add functionality to property or function.
• @track is the decorator that helps us to track a private property's value and re-render a component when it changes.
• Tracked properties are also called private reactive properties.
• @track helps us to achieve two-way data binding

Track a property only if you want the component to re-render when the property's value changes.

Note: Don't track every private property.