Use aura:template to Create App Templates

You can customize Aura application by extending your own template. For this you can create a template by extending component.

Syntax to create template:-
First create a aura component and set isTemplate attribute true and extends “aura:template” component.
aura:template component contains some attribute like title, loadingText, errorTitle, errorMessage, defaultBodyClass, doctype and bodyClass. You can read detail about all attribute on salesforce.


<aura:component isTemplate="true" extends="aura:template">
    <aura:set attribute="title" value="Salesforce XYZ"/>
    <aura:set attribute="loadingText" value="Loading my App Name"/>
    <aura:set attribute="errorTitle" value="Custom Error Title"/>
	<!-- you can write custom css for loading text message-->
	<aura:html tag="style">
        font-family: 'Salesforce Sans',Arial,sans-serif;
        display: block;
        line-height: 1.5;
        margin: 0;
        font-size: .8125rem;
        background: transparent;
        color: rgb(22, 50, 92);
        -webkit-tap-highlight-color: transparent;
        .auraMsgBox {        
            background-repeat: repeat-x;
            background-position: top left;        
            width: 350px;
        	height: 75px;
            border: none;
            box-shadow: none;
        .auraMsgBox h2 {
        	color: #fff;

Use template in your application

<aura:application extends="force:slds" template="c:MyTemplate">
   <p>Using my own template</p> 

When application loading->
aura:template lightning

Modules in ES5 and ES6 (JavaScript)

A module is  piece of code that is executed once it is loaded. Modules first introduce in ES5 and event adopted by ES6. A module can be declared as variable or function. By default module declaration is local to file. You can make some of them as public by export keyword and import them in other file by import keyword.

The basics of ES6 modules

There are two kinds of exports: named exports (several per module) and default exports (one per module).

1. Named exports (several per module):-

A module can export multiple things(Variable and Function) by using export keyword declaration.


export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
export function diag(x, y) {
    return sqrt(square(x) + square(y));


import { square, diag } from 'utils';
console.log(square(5)); // 25
console.log(diag(4, 3)); // 5

You can also import all modules using *.

import * as lib from 'utils';
console.log(lib.square(5)); // 25
console.log(lib.diag(4, 3)); // 5

2. Default exports (one per module):-

If we want to export a single value or to have a fallback value for your module, you could use a default export:
// module “utils.js”

export default function cube(x) {
  return x * x * x;

default export module very easy to import like

import cube from './my-module.js';
console.log(cube(3)); // 27

There are two styles of default exports:
1. Labeling declarations
You can prefix any function declaration or class declaration with the keywords export default to make it the default export:

export default function myFunct() {} // no semicolon!
export default class MyClass{} // no semicolon!

Or you can omit function name. That makes default exports the only place where JavaScript has anonymous function declarations and anonymous class declarations:

export default function () {} // no semicolon!
export default class {} // no semicolon!

2. Default export style 2: default-exporting values directly
The values are produced via expressions:

export default 'SalesforceXYZ';
export default XYZ();
export default /^xyz$/;
export default 5 * 7;
export default {yes: true,no: false};

Learn ECMAScript 2016 Before Creating Lightning Web Components

Lightning Web Components is very simple for Node JS and React Developers. However, it become complex for Salesforce developer who know only basic of JavaScript. Lightning Web Component creating by extending LightningElement class of lwc module. I will suggest you to learn ECMAScript 2015. By reading this blog and i sure after reading this blog you will became a LWC developer. To learn new technology learn fundamental of technology.

Here I will explain about ES5 and ES6 basic usage in Lightning Web Components

  1. Named import
  2. Default import
  3. Default export
  4. Named export
  5. Web Component
  6. Module?
  7. Class
  8. promise


Create Your First Lightning Web Component

Folder structure and naming convention of Lightning Web Components. 

  1. Component folder name must start with lowercase letter and it files.
  2. Folder Files name must be same as folder name.
  3. Component name must be unique in namespace.
  4. Component folder and it files must not include white space.
  5. If your component name have two word then capitalize other second word.

A Lightning Web Component must have one HTML(compponentName.html) file and two JavaScript Files(compponentName.js and compponentName.js-meta.xml).

Before creating Lightning Web Component you have to setup Salesforce CLI and Visual Studio Code IDE on you machine.

Follow Steps to install Salesforce CLI and VS Code:-

  1. Install the Salesforce CLI with npm
    • First install nodejs and run following command
      npm install sfdx-cli --global
  2. Java must be installed on your local machine for Visual Studio Code.
  3. Install Visual Studio Code and extensions for Salesforce DX.
  4. After installing VS Code open VS Code and install extensions inside VS Code see following screenshot. Installing Salesforce Extension Packinstall Salesforce Extension Pack in VS Code

Now ensure your development environment is ready on your local machine.

  • In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  • Enter sfdx to filter for commands provided by the Salesforce Extensions.SFDX Commmand in VS Code

If Salesforce Extension Pack Installed inside VS Code, then you are able to create Lightning Web Components.

Lets Create your first helloWorld Lightning Web Compponent(LWC).

  • In VS Code to Open the Command Palette press Ctrl+Shift+P.
  • In Command Palette type for sfdx: authorize an ORG. 
  • Click on highlighted text it will open ORG type selection screen.
  • After Org Type Selection next screen for org name enter any your ORG name without white space and press enter key.
  • This will redirect to Salesforce login page.
  • After login in your Slaesforce org you can create LWC or classes.

Let’s create first your Lightning Web Component.

import { LightningElement } from 'lwc';
export default class HelloLWC extends LightningElement {
    helloWord='Hello, LWC!'


    <!-- Create Lightning Card-->
    <lightning-card title="Hello LWC">
        <div class="slds-p-around_small">
            <!-- Use javascript property -->


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="HelloLWC">
    <!--Set isExposed true to expose your comonent in salesforce lightning experience-->

    <masterLabel>Hello LWC</masterLabel>

Supported and Unsupported Feature of Lightning Web Components

Lightning Web Components supports only to Lightning experiences and tools. It will not support in Salesforce Lightning Out so you can not use your Lightning Web components in Visualforce page directly like you are using Aura Component Lightning Out. But you can include Lightning Web Components in Aura Component then unsupported feature will support.

For example 

Create a Lightning Web Component named helloWorld, also create a Aura Component named TestComp.cmp. Now helloWorld Lightning Web Component use in side Aura Component.

Supported Experiences of Lightning Web Components

These Salesforce experiences and tools are supported.

  • Lightning Experience
  • Salesforce App
  • Lightning Communities
  • Lightning App Builder
  • Community Builder
  • First-Generation Managed Packages
  • Second-Generation Managed Packages
  • Unlocked Packages
  • Unmanaged Packages
  • Change Sets
  • Metadata API—LightningComponentBundle
  • Tooling API—LightningComponentBundle, LightningComponentResource

Unsupported Experiences and Tools

Lightning Web Components doesn’t currently support these Salesforce experiences and tools. To use a Lightning web component with these experiences and tools, wrap the component in an Aura component.

  • Lightning Out
  • Lightning Components for Visualforce
  • Standalone Apps
  • Salesforce Console (Navigation Item API, Workspace API, UtilityBar API)
  • Utility Bars
  • URL Addressable Tabs
  • Flows
  • Snap-ins Chat
  • Lightning for Gmail, Outlook Integration
  • EMP API, Conversation Toolkit API, Omni Toolkit API, Quick Action API
  • Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions
  • Chatter Extensions

Reference Salesforce Document

Lightning Web Component

An Introduction to Lightning Web Component

Salesforce now provide two programming models to create component one is Aura Component and new framework is that Lightning Web Component(LWC). You can create Lightning Web Component(LWC) using custom HTML and modern  Javascript (ES6).

Lightning Web Components is lightweight and delivers exceptional performance because most of the code you write is standard JavaScript and HTML.  Before start learning Lightning Web Component we suggest to learn JavaScript Modular Programming, click on following link to start modular programming.

Huge benefit of Lightning Web Component programming model is that you write Standard JavaScript code. To develop Lightning web components, use the latest versions of JavaScript.

Lightning Web Component

Lightning Web Components JavaScript support includes:

  • ES6 (ECMAScript 2015)
  • ES7 (ECMAScript 2016)
  • ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
  • ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)

How to Get Custom Label Value in Lightning Component?

Custom Label in Salesforce is text that will be covert to any language that Salesforce support. To access Custom Label in Lightning Component use following syntax.

<ui:outputText value=”{!$Label.c.LabelName}”/> where is namespace. Default namespace of an org is c. If you have created a namespace myapps, then your code to access custom label is {!$Label.myapps.LabelName}

If you have created a Custom Label which name is description, then your code in lightning component is {!$Label.c.description}.

In JavaScript controller or helper you can get custom label value $A.get(“{!$Label.c.description}”)

var desc = $A.get(“{!$Label.c.description}”);

Lightning:helpText Comonent in Lighting Out

There is some issue of CSS classes in lightning out if you are using <lightning:helpText> in lightning out. Here we are providing some CSS classes to use in your Cisualforce page.

Let’s create a lightning component which use <lightning:helpText> component named helpTextInLightningOut.cmp.

content=”The tooltip displays on the lower left of the icon or above the icon if space is available. It automatically adjusts its position according to the viewport.”

Create a Visualforce page to use above created lightning component. In your Visualforce page use <style> tag and  paste following CSS style.

.slds-popover__header {
	position: relative;
	padding: .5rem .75rem;
	word-wrap: break-word

.slds-popover {
	position: relative;
	border-radius: .25rem;
	width: 20rem;
	min-height: 2rem;
	z-index: 6000;
	background-color: #fff;
	display: inline-block;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16);
	border: 1px solid #d9dbdd

.slds-popover_tooltip {
	width: auto;
	max-width: 20rem;
	background: #16325c;
	border: 0
.slds-popover--tooltip .slds-popover__body,
.slds-popover_tooltip .slds-popover__body {
	font-size: .75rem;
	color: #fff

.slds-fall-into-ground {
	visibility: hidden;
	opacity: 0;
	transform: translate(0, 0);
	transition: opacity .1s linear, visibility .1s linear, transform .1s linear;
	will-change: transform

.slds-nubbin_bottom-left:before {
	width: 1rem;
	height: 1rem;
	position: absolute;
	transform: rotate(45deg);
	content: '';
	background-color: inherit;
	bottom: -.5rem;
	margin-left: -.5rem

.slds-nubbin_bottom-left:before {
	left: 1.5rem;
	top: 100%;
	margin-top: -.5rem

.slds-nubbin_bottom-left:after {
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .16);
	z-index: -1

.slds-popover :last-child {
	margin-bottom: 0

If you used above style in your Visualforce page, then Lightning:helpText component also work properly in lightning out same as it work in lightning community or in Salesforce lightning interface


Learn more about lightning:helpText click here.


Apex Action Function In Visualforce Page

You can call apex action function in visualforce page. We can use AJAX functionality in Visualforce page without writing JavaScript. We write an apex class DemoCtrotroller.cls and a Visualforce Page Demo. In following example getting related one Contact and one Opportunity of Account. There also a Account picklist and on change event getting contact and opportunity asynchronously.

Example of Apex Action Function


public with sharing class DemoCtrl {
    public Account acc{get;set;}
    public Contact con{get;set;}
    public Opportunity opp{get;set;}
    public List accList{get;set;}
    public String selectedAcc{get;set;} 
    public DemoCtrl()
        accList = new List();
        for(Account a : [Select id,Name from Account order by Name ASC])
          accList.add(new SelectOption(a.Id,a.Name));    
        List acc1 = [Select id,Name,Rating,Phone from Account order by Name ASC limit 1];
        List con2 = [Select id,FirstName,LastName,MobilePhone,Email from Contact Where AccountId=:acc1[0].Id limit 1];
        List opp2=  [Select id,Name,StageName,Probability from Opportunity Where AccountId=:acc1[0].Id limit 1];
            acc = acc1[0];
            acc = new Account();
          con = con2[0];    
            con = new Contact();
            opp = opp2[0];
            opp = new Opportunity();

    public PageReference changeAccount()
        List acc1 = [Select id,Name,Rating,Phone from Account Where Id=:selectedAcc];
        List con2 = [Select id,FirstName,LastName,MobilePhone,Email from Contact Where AccountId=:selectedAcc limit 1];
        List opp2=  [Select id,Name,StageName,Probability from Opportunity Where AccountId=:selectedAcc limit 1];
            acc = acc1[0];
            acc = new Account();
          con = con2[0];    
            con = new Contact();
            opp = opp2[0];
            opp = new Opportunity();
        return null;

<apex:page controller="DemoCtrl" sidebar="false">    
    <apex:form >
        <apex:actionFunction action="{!changeAccount}" name="methodOneInJavascript" rerender="alldetail">
            <apex:param name="accid" assignTo="{!selectedAcc}" value="" />
        <apex:sectionHeader title="Demo" />
        <apex:pageBlock >
            <apex:selectList value="{!selectedAcc}" size="1" onchange="methodOneInJavascript(this.value)">
                <apex:outputLabel >Select Account: </apex:outputLabel>
                <apex:selectOptions value="{!accList}"/>                
        <apex:pageBlock title="Account, Contact and Opportunity" id="alldetail">
            <apex:pageBlockSection title="Account Detail" columns="2">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Account Name:</apex:outputLabel>
                    <apex:outputField value="{!acc.Name}" label="Account Name"/>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Phone:</apex:outputLabel>
                    <apex:outputField value="{!acc.Phone}" label="Phone" />
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Rating:</apex:outputLabel>
                    <apex:outputField value="{!acc.Rating}" label="Rating" />
            <apex:pageBlockSection title="Contact Detail" columns="2">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >First Name:</apex:outputLabel>
                    <apex:outputField value="{!con.FirstName}" label="First Name" />
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Last Name:</apex:outputLabel>
                    <apex:outputField value="{!con.LastName}" label="Last Name" />
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Cell Phone:</apex:outputLabel>
                    <apex:outputField value="{!con.MobilePhone}" label="Cell Phone" />
            <apex:pageBlockSection title="Opportunity Detail" columns="2">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Opportunity Name:</apex:outputLabel>
                    <apex:outputField value="{!opp.Name}" label="Opportunity Name" />
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Stage Name:</apex:outputLabel>
                    <apex:outputField value="{!opp.StageName}" label="Stage Name" />
                <apex:pageBlockSectionItem >
                    <apex:outputLabel >Probability:</apex:outputLabel>
                    <apex:outputField value="{!opp.Probability}" label="Probability" />

Apex Action Function

SOQL Injection in Apex Salesforce

An SOQL Injection in Apex is computer attack to steal data from your database. Hence this is important to prevent SOQL Injection in Apex while writing query to select data from database. In Apex you can write Select query in two ways.
1. Inside brackets like [].

Example:- If you want to get all contact where name end with xyz. Then your select query will be like

String likeStr='%xyz';

List<Contact> conList = [Select Id,FirstName,LastName from Contact Where name like : likeStr];

In this type of query Salesforce by default apply SOQL Injection. We do not required to explicit write extra code for SOQL Injection in Apex class

(Contact:{Id=0037djdddkdkdkdk, FirstName=Andy, LastName=xyz})

2. Database.query() or Database.countQuery().

Example:- If you want to get all contact where name end with xyz. Then your select query will be like

String likeStr='%xyz';

List<Contact> conList = Database.query('Select Id,FirstName,LastName from Contact Where name like \''+String.escapeSingleQuotes(likeStr)+'\'');



Focus on dynamic query which are build by concatenate multiple string and use Escaping Single Quotes for all variable used in query. For escaping single quotes use simple static method of String class(String.escapeSingleQuotes(variableName)).

FLS Check in Apex Class

In an apex class you should check Field Level Security. Most of us do not check. This is best practice to explicitly check security before any database statement like SELECT, INSERT, UPDATE AND DELETE. If you create an app to for AppeExchange then it is must for your app. For example if a user have access to read all contact but not able to create or modify record. So you also have to check is logged in user able to create or update record in your apex class.

Learning FLS in apex class by steps

1. Check for Object is accessible or not means if you want to get account name and phone. Then your should be like

if(Schema.SObjectType.Account.isAccessible()) // Object Accessibility 
   //Fields Accessibility
   if(Schema.SObjectType.Account.Fields.Name.isAccessible() && Schema.SObjectType.Account.Fields.Phone.isAccessible())
        List<Account> accList = [Select Name,Phone from Account Limit 1];

2. Check create permission if you want to insert account record.

if(Schema.SObjectType.Account.isCreateable()) // Object Accessibility 
    //Fields Accessibility 
    if(Schema.SObjectType.Account.Fields.Name.isCreateable() && Schema.SObjectType.Account.Fields.Phone.isCreateable()) 
          Account accObj = new Account(Name='Test',Phone='1234567890');

NOTE 1: Do not write SOQL query without LIMIT or Where Clause.
In your SOQL query write where clause like [Select id from contact where name =’test’].
[Select id from contact LIMIT 1];

Generic Code to Insert Record in Object Salesforce

// Get object type by passing object name
Schema.SObjectType objType = Schema.getGlobalDescribe().get(objectName);

// Create instance of sObject
sObject genericObj = objType.newSObject();

//Set fieldValue for each fields, you want to set
//@param:fieldApiName must be of String type
//@param:fieldValue of any data type value

//Insert record by Insert statement
Database.insert(genericObj, true);

Use Standard Controller In Visualforce Page

How to use standard controller in Visualforce Page?

Using Standard Controller we easily insert update and delete record from custom Visualforce Page.

To associating Standard Controller with Visualforce Page use standardController attribute of <apex:page> tag.

To associate custom Object controller use custom object:-

<apex:page standardController=”Custom_Object_Name__c”>

To associate standard Object controller use standard object, suppose you want to bind with Lead object this your code will:-

<apex:page standardController=”Lead”>

Let’s try to save a lead using standard controller. There are some point need to focus during using standard controller:-

  1. Use <apex:pageMessages/> tag insde <apex:form> tag. This tag handle messages like error or warning.
  2. You must include all required fields in your form.
  3. Use any one action from (save,quicksave,delete,edit,cancel and list)
  4. In case of save action if record created successfully then controller redirect to record detail page.
  5. Use command button, action support or action function  to bind with a action(save,quicksave,delete,edit,cancel and list)
<apex:page standardController="Lead" showHeader="true" sidebar="true">
		<apex:outputLabel>Last Name</apex:outputLabel>
		<apex:inputField id="lastName" value="{!lead.LastName}"/>
		<apex:outputLabel>Company Name</apex:outputLabel>
		<apex:inputField id="company" value="{!lead.Company}"/>
		<apex:commandButton action="{!save}" value="Save" />

Output of above code will be

Standard Controller In Visualforce Page

In Lead and Contact  object Last name is mandatory(required) field. Also in Lead Object Company name is required. Click save button without enter field data. You will get error message  like following

Standard Controller In Visualforce Page

Encrypt and Decrypt String in Apex Salesforce

In apex class you can use EncodingUtil and Crypto classes to encrypt and decrypt string in apex class.

Useful methods of EncodingUtil to encode and decode string in apex class.

  1. String base64Decode(String inputString)
  2. String base64Encode(Blob inputBlob)
  3. Blob convertFromHex(String inputString)
  4. String convertToHex(Blog inputBlob)
  5. String urlDecode(String inputString, String encodingScheme)
  6. String urlEncode(String inputString, String encodingScheme)

Note: for URL encode and decode second parameter will be encoding scheme i.e., UTF-8. All methods are static so you can call by class name.

Example of all above methods to encode and decode string

base64Encode() and base64Decode

Blob blobData=Blob.valueOf('salesforce xyz');

// Encode 'salesforce xyz' String using base64
String encodedString = EncodingUtil.base64Encode(blobData);
//output: c2FsZXNmb3JjZSB4eXo=

//Just use decode method to decode above encoded string
Blob decodeString = EncodingUtil.base64Decode(encodedString);
//output: salesforce xyz

convertToHex and convertFromHex() methods

Blob blobData=Blob.valueOf('salesforce xyz');

// Encode 'salesforce xyz' String using base64
String encodedString = EncodingUtil.convertToHex(blobData);
//output: 73616c6573666f7263652078797a

//Just use decode method to decode above encoded string
Blob decodeString = EncodingUtil.convertFromHex(encodedString);
//output: salesforce xyz

if you want to test above code go to developer console press Ctr + E. A anonymous window will be open. Paste code in anonymous box and click execute button.

Encrypt and Decrypt String in Apex

In same way you can encode and decode url using urlEncode() and urlDecode() methods of EncodingUtil class.

Encrypt and Decrypt String in Apex Using ManagedIV

Encrypt and Decrypt String in Apex using ManagedIV. ManagedIV encryption and deryption required an security key of 16 bits. Use 16 bits security key for both encoding and decoding. If you want to get decoded data as string you can use toString() method of Blob class. Want to learn more about encode and decode string in Salesforce click next two linkencodingutil and Crypto classes.

public class MyEncodingUtil
	// Security key must be 16 characters string
	public static key='aAk!h@37WQ9%sAfk';

	public static String encodeString(String encodingString)
		Blob blobData = Crypto.encryptWithManagedIV('AES128', key, Blob.valueOf(encodingString));
		return EncodingUtil.base64Encode(blobData);
	public static String decodeString(String str)
		Blob blobData = EncodingUtil.base64Decode(str);		
		Blob decryptedBlob = Crypto.decryptWithManagedIV('AES128', key, encodedEncryptedBlob);		
		return decryptedBlob.toString();