Introduction to Lightning Web Components – #LWC

As we all know that Salesforce has introduced the new concept to develop the Lightning Components which is LWC and is beta mode. In this post, we are going to learn how we can start working with LWC and all about LWC

I have recorded the videos regarding the same how we can set up the VS Code to start the coding with Salesforce DX. As, LWC is in beta mode and not available either in Sandbox or Developer environment we need to work with Salesforce Spring 19 Pre-Release Org. Here is the video which will take you to step by step how you can set up the tools and start development.

  • What is LWC?
  • Existing System
  • New LWC Structure
  • Comparison of Aura Framework and LWC
  • Setup Visual Code studio
  • Setup Salesforce CLI
  • Create Hello World LWC
  • Walkthrough with the key concept of LWC

Next Step – What the next video

  • LWC Folder Structure.
  • Supported Salesforce Experiences and Tools
  • Unsupported Experiences and Tools
  • Reactive Properties in JavaScript.
    • Public
    • Private
  • How to use attributes in LWC.
  • How to call the JavaScript method from LWC.

Sharing is Caring 🙂 If you have any doubt or query please comment them below in the comment box or you can reach me @ OR you can tweet me @cloudyamit


Salesforce: Sharing Cheat Sheet

Awesome writeup.

The Silver Lining

Sharing is caring.

Sharing is complex, but necessarily so. It gives you incredibly fine-grained control over data access through it’s flexibility but requires quite a deep understanding to do it properly.

There are great articles out there that describe sharing in detail e.g. object and record level security

An Overview of Security

I don’t want to recreate what’s in those articles, instead I’m providing a short, sharp cheat sheet of the major topics you need to understand. So without further ado…

Sharing Cheat Sheet

Sharing Metadata Records

  • “Object[Share]” for standard objects
  • “Object[__Share]” for custom objects
  • Fields: access level, record ID, user or group ID
  • Share records are not created for for OWDs, role hierchies or the “View All” or “Modify All” permissions

Implicit Sharing

  • For Accounts, Contacts, Cases and Opportunities only.
  • A platform feature, cannot be disabled.
  • Access to a parent account—If you have access to a child…

View original post 681 more words

Things to keep in mind while developing the Salesforce App-exchange Application

In this post, I will discuss what are the important parameters that need to be taken care while developing the App-Exchange Application using Salesforce. Before we dive into the concepts I would like to tell you that after developing the application, every application goes with the below security checks

  1. Checkmarx: – It is a free tool available to scan the Complete Code that is in your org where development has been done.
  2. Security Review: – The second step after submitting the code to the checkmarx and resolving all the issues is to Submit the package for the security review where salesforce representatives check the Quality of the code and functionality as well.

So, In order to develop the application which is secure and minimize the risk of data compromise or any other confidential information a developer must need to keep the following points into the mind while developing the application

1Cross-Site Scripting 
2S(O)QL Injection 
3Cross Site Request Forgery 
4Secure Communications and Cookies 
5Storing Secrets 
6Arbitrary Redirects 
7Access Control 
8Lightning Security Best Practices 
9Marketing Cloud App Security
10Secure PostMessage
11Secure WebSockets

Here is a Link to Trailhead module which explains everything about secure coding guidelines with the practical example

Resources: – 

  1. Salesforce Document
  2. Salesforce Security Guide
  3. An Overview of Security

Implement Omni Channel from Scratch – Salesforce

In this post, we will learn how to implement Omni Channel and in my previous post, we have implemented the Live Agent if you have not read yet then Read Here.

Prerequisite: Live agent must be enabled in order to use Omni Channel.


Problem while using Live Agent: – The company XYZ has now successfully enabled the live agent at their company site and it was working fine however as business growing company  the Global Support VP is getting complaints

  1. Some agents are getting many cases and some are not getting any cases at all.
  2. Agents need to Case manually from the Queues if the case is created manually or any other resource like Email-to-Case. And assigning the cases manually leads the wastage of time.
  3. Also, it is hard to manage what is the capacity of the particular agent and what is the traffic. 

Salesforce Admin has come up with an idea to implement the Omni Channel which will resolve all above problem and will increase the efficiency of the Support Agent.


Introduction to Omni Channel:- Omni-Channel is a flexible, customizable feature, and you can configure it declaratively—that is, without writing code. Use Omni-Channel to manage the priority of work items, which makes it a cinch to route important work items to agents quickly. Manage your agents’ capacity to take on work items so that they’re given only the number of assignments that they can handle.

Best of all, Omni-Channel routes all these assignments to the correct agents automatically. Agents no longer have to pick and choose work assignments manually from a queue, which saves everyone in your call center time, effort, and brainpower.

Permission to set up the Omni Channel is Customize Application at profile level.

Omni Channel.png

Step1 – Enable Omni Channel:- Setup -> Build -> Customize -> Omni-Channel -> Omni-Channel Settings -> Select Enable Omni-Channel Checkbox -> Save

Enable Omni Channel.png

Setp2 – Create Service Channel:- Service Channels let you turn any Salesforce object―such as a case, lead, SOS session, or even a custom object―into a work record. Omni-Channel then plucks these work items from their queues―like flowers from the garden of agent productivity―and routes them to your agents in real time.


Setup -> Build -> Customize -> Omni-Channel ->  Service Channels -> New -> 

Service Channel.png

Step3 – Create Routing Configurations: – Routing Configurations determine how work items are routed to agents. They let you prioritize the relative importance and size of work items across your Omni-Channel Queues. That way, the most important work items are handled accordingly, and work is evenly distributed to your agents. After all, we want to make sure every agent gets to have an equal amount of fun, right?

Setup -> Build -> Customize -> Omni-Channel -> Routing Configurations -> New -> 

Routing Configurations.png

Explanation of above Screenshot

  1. Overflow Assignee:- Sets the user or queue that Omni-Channel routes items to when your org reaches Omni-Channel limits.
  2. Routing Priority: – The order in which work items from the queue that are associated with this routing configuration are routed to agents.
  3. Routing Model: Specify how incoming work items are directed to agents using Omni-Channel.
    1. Least Active: – Incoming work items are routed to the agent with the least amount of open work. 
    2. Most Available: – Incoming work items are routed to the agent with the greatest difference between work item capacity and open work items. 

Step4 – Create Queue and Associated with Routing Configurations: – 

Setup -> Administrator -> Manage Users -> Queues -> New ->

Create Queue.png

Step5 – Add Omni Channel to the Console Application: – 

Setup -> Create -> Apps -> Edit Next to Sample Console App(OR You may Select your) -> Scroos Down to “Choose Console Components” Section -> Add Omni Channel From “Available Items” to “Selected Items”

Add Omni Channel.png

Now, as we have done almost part of implementing the Omni Channel. Let’s have a look how our console application looks like

Click on App Launcher and Select Sample Application


Step6 – Add Presence Status to Omni Channel: – 

To see the list of available status like Online, Offline, Away, Available For Cases, Available For Chat and etc. We need to create the Presence Status.

Setup -> Build -> Customize -> Omni-Channel -> Presence Status -> New -> 

Presence Status

Repeat the above process to add more presence status.

Step7 – Add Presence Status to Correct Users Profile: – 

Adding the presence status to the Omni Channel that does not mean it will be available in Omni Channel Utility. To make visible these statuses we need to add to the appropriate user’s profile or permission set.

Setup -> Manage Users -> Profiles -> Select the profile on which you want to enable the status (in this demo we will add in System Administrator Profile)->  Scroll down to “Enabled Service Presence Status Access”  section and Click Edit -> 

Presence Status to profile.png

Add presence status from “Available Service Presence Statuses” to “Enabled Service Presence Statuses” Section and save.

Add Presence Status to profile

Step8 – See if presence status is available in Omni Channel utility or Not: – 

Click on App Launcher and Select Sample App

Omni Channel Sttus.png

Now, in Final let us test the App. Copy and paste the code if Live Chat Deployment and Chat Button that we did create in our previous post and save as .html file. if you have not implemented the Live Agent refer this link to implement the same.

From Omni channel Select any online statue and run the HTML file of Live Agent that we did save earlier.


OutPut 1.png

If you are facing any issues please come up in the comments section with.

Sharing is Caring 🙂


  1. Live Agent
  2. Omni Channel
  3. Trailhead




Create Lightning Charts With Chart.Js

Create Dynamic Chart using Chart.Js


Everyone loves a smooth and slick UI. And what if, if you have an awesome UI for which you have to design once and will work across the devices, which is nothing but responsive. One such library which was great but not supported in Lightning experience was Chart.js. As some of its external libraries had older versions, Chart.js wasn’t supported in Lightning Locker Service. Oh, wait a min, what is a Locker Service? That itself is a story to tell about for another day. Anyways you can check out the documentation here (Lightning locker service).

But that is not the situation now. Due to the latest version updates of Chart.js, it is finally compatible with Lightning Locker Service. You may be wondering how can I implement Chart.js in my org? Well, through this blog post am going to explain how to build a Generic Chart.js Lightning component and by…

View original post 197 more words

Dynamic Binding Salesforce Lightning Component(Generic)

Welcome back All, here we will learn about the dynamic field of Lightning Component. As Most of you must be aware of that In Lightning, Component Dynamic component is not available. Recently I was working on one of my projects and implemented the Dynamic binding using the lightning component so I am going to share how I implemented the same so that it may help others.

As we all know that we can use the Dynamic Binding in the VisualForce page but in Lightning Component it is not Possible. 

In this example, We will show the list of Objects in a picklist and when user will select any object it will dynamically show the TOP 15 records in a table.



Step1 – Create Apex Class


Step2 – Create the Lightning Component


See the comments into the component.

Step3: – Click on Controller from the right and paste the below code for Controller Javascript


doInit : function(component, event, helper) {
helper.onInit(component, event, helper);
doHandleChange : function(component, event, helper) {
helper.onHandleChange(component, event, helper);

Step4: – Click on Helper from the right and paste the below code for Helper Javascript


onInit : function(component, event, helper) {
/* Call the Apex class method to fetch the List of all object */
var action = component.get('c.listAllObject');
action.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS' && component.isValid()){
/* set the value to the attribute of the component */
var responseValue = response.getReturnValue();
var lstOptions = [];
for(var i=0; i < responseValue.length; i++){
value : responseValue[i].split('####')[1],
key : responseValue[i].split('####')[0]
component.set('v.objectList', lstOptions);

var errors = response.getError();
if(errors || errors[0].message){
onHandleChange : function(component, event, helper){
/* Call this method whenever user will select the Obejct
* and show the Dynamic Content */
var selObject = component.find('selectObject').get('v.value');
var action = component.get('c.listAllFields');
if(selObject!=null && selObject!='' && selObject!=undefined){
"objectName" : selObject
action.setCallback(this, function(response){
var state = response.getState();
if( state === 'SUCCESS' && component.isValid()){
var responseValue = response.getReturnValue();
var objectValue = responseValue.sObjectData;
var fieldList = responseValue.fieldList;

/* Create Dynamic Table */
var sObjectDataTableHeader = [];
// Create table Header
for (var i=0; i < fieldList.length; i++) {
//Get the count of columns.
var columnCount = sObjectDataTableHeader.length;
//Create a HTML Table element.
var table = document.createElement("TABLE");
//table.border = "1";
//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = sObjectDataTableHeader[i];
var dvTable = document.getElementById("sfdctable");
dvTable.innerHTML = "";
/* Create Dynamic Table End */

for(var j=0; j < objectValue.length; j++){
// Dynamic table Row
row = table.insertRow(-1);
// Dynamic Table Row End
for (var i=0; i < fieldList.length; i++) {
// Dynamic table Row
var cell = row.insertCell(-1);
cell.innerHTML = objectValue[j][fieldList[i].apiName];
component.set('v.isSending' , false);


var errors = response.getError();
$A.log('Error Details '+errors);
if( errors || errors[0].message){
console.log('Error Details '+errors[0].message);
component.set('v.isSending' , false);

See the comments.

Step5: – Create Lightning Application

<aura:application access=”Global” extends=”force:slds” >
<c:DynamicBindingDemo />

Click on Preview to see the output of the component.

Happy learning 🙂

Sharing is caring 🙂 😉



Complete Code




How to implement Live Agent into Salesforce From Scratch

To Create a Basic Live Agent Implementation into Salesforce we need to follow the 7 easy steps that are given below:

Step1 – Enable Live Agent: In order to enable Live agent user must have Customize Application permission

  1. From Setup in Salesforce Classic, enter Live Agent Settings in the Quick Find box, then select Live Agent Settings.
  2. Select Enable Live Agent.
  3. Click Save.

Enable Live Agent.png

Step2 – Create Live Agent Users :

  1. From Setup in Salesforce Classic, enter Users in the Quick Find box, then select Users.
  2. Click Edit next to a user’s name.
  3. Select Live Agent User. If you don’t see this checkbox, verify that your support organization has purchased enough Live Agent feature licenses.
  4. Click Save.

Create Live Agent Users.png

Step3 – Create And Assign Live Agent Skills :

  1. From Setup, enter Skills in the Quick Find box, then select Skills.
  2. Click New.
  3. Enter a name for the skill.
    For example, you can create a skill that’s called “Accounts” for agents who specialize in questions about customer accounts.
  4. In the Assign Users area, select the users whom you want to associate with the skill.
  5. In the Assign Profiles area, select the profiles that you want to associate with the skill.
  6. Click Save.
To enable supervisors to assign skills, enable the “Assign Live Agent Skills to Users” permission on their profiles.
Create Skills.png
Step4 – Create Live Agent Configuration :
  1. From Setup in Salesforce Classic, enter Live Agent Configurations in the Quick Find box, then select Live Agent Configurations.
  2. Click New.
  3. Choose the settings for your Live Agent configuration.
  4. Click Save.

Step5 – Create Live Agent Deployments :

  1. From Setup in Salesforce Classic, enter Deployments in the Quick Find box, then select Deployments.
  2. Click New.
  3. Choose the settings for your deployment.
  4. Click Save. Salesforce generates the deployment code.
  5. Copy the deployment code, and then paste it on each Web page where you want to deploy Live Agent. For best performance, paste the code immediately before the closing body tag (that is, ).


Step6 – Create Chat Button :

  1. From Setup in Salesforce Classic, enter Chat Buttons in the Quick Find box, then select Chat Buttons & Invitations.
  2. Click New.
  3. Select Chat Button from the Type field.
  4. Choose the remaining settings for your chat button.
  5. Click Save.
  6. Copy the button code, and then paste it on each Web page where you’ve deployed Live Agent. Make sure that you paste the code in the area on the page where you want the button to appear.

If you have any problem then please come up into comment section with


Salesforce Atricle


How to Call Salesforce API from Lightning Component

You may have heard about that we can not make the Salesforce API Call directly from the lightning component. If you do make the callout from the lightning component then you will get the below error

INVALID_SESSION_ID:This session is not valid for use with the API.

For Example when you will execute the below code from the Developer Console then you will get the Valid Response

HTTP h = new HTTP();
HTTPRequest req = new HTTPRequest();
HttpResponse resp = new HttpResponse();

req.setHeader('Authorization', 'Bearer ' + UserInfo.getSessionId());
req.setEndpoint(URL.getSalesforceBaseUrl().toExternalForm() + '/services/data/v41.0/query?q=Select+Id,+Name+From+Account');
resp = h.send(req);
System.debug('#### Response Status '+resp.getStatus());
System.debug('#### Response Status Code '+resp.getStatusCOde());

But if you will call the same block from the Lightning Component then you will get INVALID_SESSION_ID:This session is not valid for use with the API. Error.

I gone through with this error and found THIS SALESFORCE DOCUMENT where they have specified why we can not make API Call from JavaScript Code.

After reading the document, I have come up with 2 Solutions that are given below: –

1 – Connected App and Named Credentials as Callout Endpoints and Auth Providers

2 – Using VF Page – VF page will be used to get the Session Id of the current log in user and this VF page will be used into Apex class for fetching the Session Id.

In this tutorial we will use VF page for making callout because it is an easy and simple method method. Follow the below steps

Step1 – Open Developer Console, File -> New -> VisualForce Page -> Enter Name “GetSessionIdVF” -> OK. Use below code for VF Page

<apex:page >

Step2 – Create a New Class which will use this VF page to get the Session Id and making API Call Out. File -> New -> Apex Class -> Name it “ApiCallLightningComponent” -> OK. Use below code for the class.

public class ApiCallLightningComponent {
 * @Name : - fetchUserSessionId
 * @Description: - Call the VF page and get the Log In Use Session Id
 * @Params : - none
 * @ReturnType : - String
 public static String fetchUserSessionId(){
 String sessionId = '';
 // Refer to the Page
 PageReference reportPage = Page.GetSessionIdVF;
 // Get the content of the VF page
 String vfContent = reportPage.getContent().toString();
 System.debug('vfContent '+vfContent);
 // Find the position of Start_Of_Session_Id and End_Of_Session_Id
 Integer startP = vfContent.indexOf('Start_Of_Session_Id') + 'Start_Of_Session_Id'.length(),
 endP = vfContent.indexOf('End_Of_Session_Id');
 // Get the Session Id
 sessionId = vfContent.substring(startP, endP);
 System.debug('sessionId '+sessionId);
 // Return Session Id
 return sessionId;
 * @Name - makeAPICall
 * @Description - Responsible for making API Call out
 * @params - None
 * @ReturnType - String
 public static String makeAPICall(){
 String sessionId = fetchUserSessionId();
 HTTP h = new HTTP();
 HTTPRequest req = new HTTPRequest();
 HttpResponse resp = new HttpResponse();
 req.setHeader('Authorization', 'Bearer ' + sessionId);
 req.setEndpoint(URL.getSalesforceBaseUrl().toExternalForm() + '/services/data/v41.0/query?q=Select+Id,+Name+From+Account');
 resp = h.send(req);
 System.debug('#### Response Status '+resp.getStatus());
 System.debug('#### Response Status Code '+resp.getStatusCOde());
 return JSON.serialize(resp.getBody());

See the comments.

ApiCallLightningComponent class contains 2 methods fetchUserSessionId and makeAPICall, One for getting the Session Id and Other for making the Callout that will be called from the JavaScript.

Step3 – Create a lightning component, File -> New -> Lightning Component -> Name it “MakiAPICall” -> OK. Use below code for the Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes, flexipage:availableForRecordHome,force:hasRecordId, forceCommunity:availableForAllPageTypes, force:lightningQuickAction" controller="ApiCallLightningComponent" access="global" >
<div class="slds-m-around_x-small">
			<lightning:button variant="brand" label="Make CallOut" iconName="action:apex" iconPosition="left" onclick="{!c.doHandleClick }" /></div>

Click on the Controller and use below code

doHandleClick : function(component, event, helper) {
helper.onHandleClick(component, event, helper);

Click on the helper and then use below code for helper

onHandleClick : function(component, event, helper) {
// Get the action of Controller (Apex) Class
var action = component.get('c.makeAPICall');

// set the callback which will return the response from apex
action.setCallback(this, function(response){
// get the state
var state = response.getState();
if( (state === 'SUCCESS' || state ==='DRAFT') && component.isValid()){
// get the response
var responseValue = response.getReturnValue();
// Parse the respose
var responseData = JSON.parse(responseValue);
} else if( state === 'INCOMPLETE'){
console.log("User is offline, device doesn't support drafts.");
} else if( state === 'ERROR'){
console.log('Problem saving record, error: ' +
} else{
console.log('Unknown problem, state: ' + state +
', error: ' + JSON.stringify(response.getError()));
// send the action to the server which will call the apex and will return the response

Step4 – In Final Step Test the Component using Lightning Application. File -> New -> Lightning Application -> Enter Name -> Submit -> Use below Code

<aura:application extends='force:slds' >

Note: – If Your component name is different then use the name of your component instead of MakiAPICall.

Output of the above code

Call API From Lightning Component

You can find the complete Here.

Happy Learning 🙂

Happy Coding 😉

Sharing is Caring

Resources –