Jitendra Zaa's Blog

Breaking 5 Myths – Scratch Orgs & Salesforce DX

posted by Jitendra on December 6, 2020December 7, 2020 under category Salesforce and tagged as Architect, CTA, Salesforce DX, scratch org, sfdx with 8 Comments

Its been around 3 years that Salesforce has released new tooling set for developers – Salesforce DX. I’ve been working on Salesforce since days of S-Control around 2008 and have seen extreme changes on platform for better.

To be honest, it’s tough to keep yourself up to date on latest changes that Salesforce has been doing , however there are resources like Medium, Trailhead and many other blogs to help you get up to speed.

I’ve seen days and written code on Force.com IDE, Developer Console, many web based IDE and definitely my heart and love at the moment is with VSCode more importantly Scratch Org & unlocked packages.

Purpose of this blog post is to bust some of myths around using Scratch Org in Salesforce DX however before I start, lets agree on below aspects of project development & management

Most of projects in Salesforce follows Agile and one of most important aspect of Agile is Devops. Your team should spend enough time & energy in planning Devops strategy like branch structure, tools, processes etc. In my experience , Devops is more about process rather than tool.
On basis of above point, Source of truth for code & configuration should be your Source Code Management , which in most of cases is Git.

What if your project is not following above 2 principles ? Well, you might already able to relate some of problems like why code is overwritten , no track of which class or fields created by who and why ? Your team spending most of time fixing deployment issue instead of working on actual implementation.

Lets not spend more time and directly jump on some of myths about using scratch org

Myth 1 – Scratch Org is only for packaging & ISV partners

Scratch Org can be used for quick POC or actual implementations. I’ve been using scratch org for each user story which normally takes 1-3 weeks of implementation. Every time, scratch org created, I get liberty to choose which Git branch would be source of truth. Can you refresh dev pro sandbox from Full copy or use 10 days old code that was in production ? There are many other considerations while creating sandbox, you don’t have much control on which metadata would be carried over as starting point.

Fix Error “Cannot assign to read only property” and print Proxy Object of LWC

posted by Jitendra on July 29, 2020July 31, 2020 under category Salesforce and tagged as code snippet, Lightning Web Component, LWC with 1 Comment

Quick code snippet to read content of Proxy object in Lightning web component & resolve error Cannot assign to read only property

As its code-snippet post, its going to be very short but frequently used.

Salesforce decorator @track is reactive , which means if value in JavaScript changes, equivalent HTML UI would also change. You don’t need to mark primitive data types as track, as its enabled by default for them. However for complex structure / object we need to mark variable as @track.

Whenever any JavaScript object marked as @track, Salesforce wraps that object resulting in proxy object. If you try to print that on console, you would not be able to see its value.

That being said, there is no change in way you access it, it’s exactly like any other Javascript object we use. So, if you want to see content of proxy object, just call below method and pass your proxy object.

//Get Javascript object equivalent to Proxy
    proxyToObj(obj){
        return JSON.parse(JSON.stringify(obj));
    }

Another way is, just keep another variable without @track decorator to see content. However problem would be – you need to make sure to keep it in sync every time content of original @track object changes.

Fixing error – Cannot assign to read only property

Above error occurs when we try to change public property on LWC marked as @api

@api someVar
.... some code

somemethod(event){
    //error on below line - Cannot assign to read only property
     someVar.isSelected = true;
}

Above code block would throw an error as we are trying. to change property on object declared by @api

@api someVar
.... some code

somemethod(event){
    //clone @api variable using method we just created
    let tmpObj = this.proxyToObj(someVar);
     tmpObj.isSelected = true;
    //now assign this tmp variable back to original
   someVar = tmpObj;
}

To fix above error, use can do something like

Salesforce Integration with Nodejs based applications using Canvas

posted by Jitendra on July 20, 2020 under category Integration, Node.js, Salesforce and tagged as Canvas, Integration Patterns, NodeJs, Video Tutorial with 2 Comments

How to use Canvas Signed Request Authentication with web based applications like Nodejs & how to use Canvas LifeCycle Handler Class

Salesforce provides many ways to integrate with external systems like SOAP, Rest, Bulk API, User Interface API and so on. One of useful way to integrate any existing web applications with Salesforce is using Canvas.

For sake of this post, I’m using Nodejs application and complete source code can be found here , on my Github repository. It can be deployed on Heroku easily, however I used my local computer to run canvas. That also proves point that integration is happening via Browser and therefore canvas application can be hosted on premise and not necessarily on DMZ layer.

Step 1 : Create Connected App in Salesforce

Enable OAuth in Connected app and provide any Callback URL. Canvas app does not use callback URL however we DO NEED scope.

Next step would be enabling canvas app itself connected app along with locations where we would be using it.

Change Icon Color in Lightning Web Component

posted by Jitendra on June 30, 2020June 30, 2020 under category Salesforce and tagged as CSS, Fill Property, Icon, Lightning Web Component, LWC with 2 Comments

Why fill css property not working for LWC Icon

Lightning Web Component provides hundreds of standard icon to choose from this list. And Lightning Web Components like lightning-icon or button-icon can be used to choose these icons.

If we want to change background color of these icons then only colors we have are green, yellow, red or gray as per their variant success, warning , error or inverse.

If you ever try to change color of these icons using fill property, you would be disappointed. Lightning Web Component used shadow DOM to encapsulate components from outer world, same principal here restricts us changing icon background color.

Try yourself [Not Working]

Solve for Common Errors in Unlocked Packages

posted by Jitendra on June 29, 2020July 2, 2020 under category Salesforce and tagged as Salesforce DX, sfdx, Unlocked Packages with Leave a comment

How to solve most frequent and common errors in unlocked packages

Error 1 : Language not supported in translation workbench. fr_CA Not available for deploy for this organization.

Solution : This error could be thrown from Salesforce DX while create unlocked package version. To solve this, we need to provide of scratch org configuration file informing that package needs translation. It seems little off that why would unlocked package need path to scratch org , however this is how it is. Example file project-scratch-def.json

{
    "orgName": "DemoScratch",
    "edition": "Developer",
    "features": [],
    "settings": { 
        "chatterSettings": {
            "enableChatter": true
        },
        "lightningExperienceSettings": {
            "enableS1DesktopEnabled": true
        },
        "languageSettings": {
            "enableTranslationWorkbench": true,
            "enableEndUserLanguages": true,
            "enablePlatformLanguages" : true
          }
    }
}

Also, note that edition is developer.

If you use edition enterprise and your unlocked package using some manage package component, it will start throwing various errors.
chances of getting error in enterprise edition lot higher compared to developer edition

Now, Sample command to create unlocked package version

sfdx force:package:version:create -p <package name> -d force-app -k <password> -w 10 -v <dev_hub_user_alias> -f config/project-scratch-def.json

You can refer this blog post for list of all frequently used SFDX commands.

Implement Infinite Scrolling for lightning-datatable

posted by Jitendra on June 10, 2020August 26, 2020 under category Lightning Web Components, Salesforce and tagged as datatable, Imperative Apex, Lightning Datatable, Lightning Web Component, LWC, Wire with 6 Comments

When to use wire vs Imperative approach to call Apex in Lightning Web Component

If you are thinking this post is about implementing infinite scrolling behavior for lightning-datatable component, then you only got half part right. Main purpose of this blog post is to compare side by side @wire vs Imperative way of calling Apex and decide which one to use when?

If you are looking for basics of LWC or how to use LWC in flow, Lightning Message Service, how to call Apex then follow this link.

In this post, you would learn

How to call Apex in LWC using @wire
How to call Apex in LWC by Imperative approach
How to call Apex on component load event equivalent to init in Aura
Why would you choose to call Apex either by @wire or Imperative Apex approach
How to bind wrapper class in Lightning-datatable component
How to enable infinite scrolling in Lightning-datatable by making server call

Shell Script – Read all file names in Git Pull Request

posted by Jitendra on June 5, 2020July 1, 2020 under category Linux and tagged as continuous integration, Devops, Git, shell Script with Leave a comment

Shell script to read all files part of Pull Request & iterate through them

In your CI / CD process, it could be very common scenario that you need to know name of all files thats part of any pull request. Example- in Salesforce you want to perform delta deployment with only components that are part of user story.

Below shell script demonstrates how we can read all file names and iterate through it. For Demo purpose, I’m just adding white space at end of each file however you can do anything as per you continuous integration pipeline requirement.

# File name - AddWhitespace.sh 
# Read list of all unique file and store as array - 231327
echo "Provide Pull Request Number"
read prNumber
echo "Your entered $prNumber"
#Read all files that are part of Git
fileNames=$(  git log origin/remoteBranchName --grep "$prNumber"  --pretty=format: --name-only | grep -v -e "^$" | sort | uniq )
#convert variable to array
IFS=$'\n' array=($fileNames) 
echo "------ Printing file names"
for element in "${array[@]}"
do   
    echo "Trying to add White space in $element"
    printf " " >> $element  
done

To run above file just use command

bash AddWhitespace.sh

Share JavaScript Code in Lightning Web Component to Read URL Parameters

posted by Jitendra on May 4, 2020May 4, 2020 under category Salesforce and tagged as Lightning Web Component, LWC with 1 Comment

Building Reusable LWC Component to read query string from URL

In this post, we would create a Lightning Web Component that can be shared across other LWC as a JavaScript library.

We are going to create LWC Component to acts as a utility method to read query parameter , as shown below

Gravatar – Reusable Lightning Web Component

posted by Jitendra on May 2, 2020May 4, 2020 under category Salesforce and tagged as Lightning Web Component, LWC with 1 Comment

Avoid asking your users to upload pictures – Use Globally Recognized Avatar , Reusable Lightning Web Component

Wouldn’t it would be great if we can use existing avatar of user on basis of email id instead of asking user to upload their profile pic ?

Gravatar is Globally recognized avatar used by millions of user and many websites like WordPress, github, stackoverflow etc.

Click here for Live Demo – Gravatar Component on public community

In this post, we would create a reusable lightning component which would receive below three parameters to construct avatar

Email address to render avatar
Size of avatar
Should image be rendered as rounded corner

Gravatar would need MD5 equivalent of email address. There is no native Javascript library to compute MD5 hash, either we have to use Javascript library or we can use Apex to compute MD5 using crypto class. I preferred Apex class instead of any other library a shown below

Salesforce Load Testing using SOAPUI

posted by Jitendra on April 23, 2020April 23, 2020 under category Salesforce and tagged as Automated Testing, Groovy, performance, Salesforce, SoapUI, Testing with Leave a comment

Previously, I have added multiple posts in this blog on how you would face governor limit errors on each step of Salesforce implementation and how we can leverage selenium to perform load testing of Salesforce to some extent.

SOAP UI is powerful tool and in this post we will see how it can be used to perform load testing of Salesforce API.

Step 1 : Download PartnerWSDL from your Salesforce instance and create SOAP UI Project.

Step 2 : Create a Test Suite in SOAP UI