Table of Contents

Introduction

Literally, in salesforce, we can code directly in the browser (PAAS) itself and can be utilized directly. In salesforce we can also code at two other places, one is Sandbox and the other is Developer addition. Let’s explore them in detail.

Salesforce Sandbox

Sandbox is an instance of your normal org, where you can use this instead of using your org directly to avoid errors and issues in the org. That’s how the errors and issues don’t affect the employees using the CRM. In simple words, it is an additional instance where you can develop and test your code before moving it to production environment.

Salesforce Developer Edition/ Salesforce Developer Console

It is a developer console where we can code all the triggers, classes, VisualForce pages etc. This is the best place for the learners to learn coding in salesforce as they can see the changes directly in salesforce. Also, it has many features where we can code effortlessly. Not just Editor, Compiler and Debugger it also has a query editor where you can write query’s and get data from salesforce’s fancy database.

Salesforce Extensions for Visual Studio Code

Visual Studio Code is the best editor to code for salesforce and everyone has been using this for a splendid performance. It also has extensions that support coding for salesforce in the best way.

It has Apex, Apex Interactive Debugger, Apex Replay Debugger, Salesforce CLI Integration, Aura Components, Visualforce, Lightning Web Components, SLDS Validator extensions for salesforce. Interestingly we have one single pack “Salesforce Extension Pack” which has all these extensions which gets installed with a single click.

Using any editor and deploying via API

Deploying the code into the salesforce using VS code editor is a very simple task, and let’s have a look at it.

Step 1: Enter into the VS code’s Extension marketplace

VS code’s Extension marketplace

Step 2: Search for Salesforce Extension Pack in the search bar and select the first.

Salesforce Extension Pack

Step 3: Now simply install it by single click where all the above-mentioned extensions will be installed in a few minutes.

Step 4: Now press Ctrl + Shift + P to open the command pallet and type this command SFDX: Create Project to create a project folder and give a name to it.

Step 5: Now let’s create a LWC component by typing this command SFDX: Create Lightning Web Component. Here, lets add this calculator code in the Html, Js and meta files.

Html File:

<template>

  

    <h1> {msg} </h1>

    

    <div class="slds-form-element">

    <label class="slds-form-element__label" for="text-input-id-1">

    <abbr class="slds-required" title="required">* </abbr>Enter Number 1</label>

    <div class="slds-form-element__control">

    <input type="text" id="n1" value={num1} onchange={num1Change}  required="" class="slds-input" />

    </div>

    </div>

    

    <div class="slds-form-element">

    <label class="slds-form-element__label" for="text-input-id-2">

    <abbr class="slds-required" title="required">* </abbr>Enter Number 2</label>

    <div class="slds-form-element__control">

    <input type="text" id="n2" value={num2} onchange={num2Change}  required="" class="slds-input" />

    </div>

    </div>

    number1={num1}

    <br>

    number2={num2}

    <br><br>

    Result={num3}

    <br>

    <lightning-button label="Addition" onclick={dosum}> </lightning-button>  

    <br>

    <lightning-button label="Substraction" onclick={dosub}> </lightning-button>  

    <br>

    <lightning-button label="Multiplication" onclick={domul}> </lightning-button>  

    <br>

    <lightning-button label="Devide" onclick={dodiv}> </lightning-button>  

    

    

    </template>

JavaScript file:

import { LightningElement,track,api,wire } from "lwc";




export default class App extends LightningElement {




msg="Welcome all";




@track num1="";

@track num2="";

@track num3;




num1Change ( event ) {




  this.num1=event.target.value;

  

}




num2Change ( event ) {




  this.num2=event.target.value;

  

}




dosum(){

    

    this.num3= parseInt(this.num1) + parseInt(this.num2);

}




dosub(){

    

    this.num3= parseInt(this.num1) - parseInt(this.num2);

}




domul(){

    

    this.num3= parseInt(this.num1) * parseInt(this.num2);

}




dodiv(){

    

    this.num3= parseInt(this.num1) / parseInt(this.num2);

}




@api test;




}

Meta file:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Step 6: Now before deploying it to your org type this command in the command pallet SFDX: Authorize an Org which redirects you to your default web browser and asks you for the sign in for your org. You need to complete signing in here.

Step 7: Now right-click and select SFDX: Deploy This Source to Org to deploy your code to your salesforce org.

Deploy This Source to Org