oAuth Use Case -  Headless API

Explained in the Easiest way

Wondering why? and When we use the Headless API flow

Use case example:

Imagine a company that uses Salesforce as its primary CRM platform. The company also maintains a separate customer portal that is hosted on a different server. The goal is to allow the customer portal to access Salesforce data and perform certain operations, such as retrieving customer information or updating records, without requiring manual user intervention.

Now in a simple and easy example decoded below:- 

Imagine:

You own a fancy showroom, and you've hired a reliable person (a third-party app) to pick up items after business hours.

Problem: The showroom is Closed

1. Authorization Call (Requesting Access):

The person arrives at your showroom, but it's closed. He calls you (the owner) and says, "I can't get in; the showroom is closed!" In the digital world, this is like the person making an "Authorization Call" by visiting a special URL: /services/oAuth2/authorize. It's like him asking for permission to access.

2. Admin (Owner) Intervention:

You, being the owner and having all the access, give him a special code (like an OAuth authorization code). It's your way of saying, "Okay, here's the secret code to open the lock."

3. Access Code Delivery (Getting the Digital Key):

The person receives the code and enters it at the showroom door. Now, instead of directly unlocking the door, the code triggers a system to send an SMS or email (access token) to the person. This is like a digital key being delivered through a special URL: /services/token. It's the final piece that allows him to access the showroom.

4. Entering the Showroom:

With the access token received on his phone, the person can enter the showroom without you physically handing him a key. It's like a digital key that grants access.

Benefits in Simple Terms:

Smooth Access: The person gets access to the showroom even if it's closed, just by using the special code and the digital key (access token).

Owner Control: As the owner, you control who gets the special code. It's not a physical key, but it works like one, and you can change it anytime.

No Need for Physical Keys: The person doesn't need a physical key; the code and digital key make the process seamless and secure.


Note:- 

All the information and step-by-step guide are available here 
https://resources.docs.salesforce.com/246/latest/en-us/sfdc/pdf/headless_identity_impl_guide.pdf

Avoid hitting maximum CPU time Limit error in Salesforce Using Before Save flows

Hi Folks,

The trending word is COVID-19.

Do you want me to talk about this? Naaah! Tired of Hearing CORONA.

Let's get to the business people. Before SAVE FLOWS. Yes, you read that right. Salesforce has introduced an awesome features and added one more vanilla and chocolate for the team called Functional/Implementation Consultants(IC's). Yeah, in Summer 20. 

For functional people working in Salesforce, now they have a new weapon. Flows can work before insert and before update calls.

There are a lot of benefits of using flows rather than using the trigger. Let's take them now:-

1. Less Code and more config.
2. Update New and Changed Records 10 Times Faster by Using Before-Save Updates in Flows.
3. Save CPU time.  HOW??

As per salesforce, this vanilla feature(Before Save Flows), actually runs prior to the before triggers and it saves the round of assignment rules, auto-response rules, workflow rules, and other customizations that take time to execute.

Well, don't get excited, before you implement for your client read the considerations of flows.

https://help.salesforce.com/articleView?id=000314438&language=en_US&type=1&mode=1

Enjoy and keep learning more every day! 

Salesforce Evergreen functions (Server less functions) - Open Sourcing

Hi Folks,

As another year is ticking down and going towards another shiny year ahead. I am sharing this post for salesforce beginners and not for the experts(Are you an expert think again 🤔🤔🤔) who are keen to know what is happening around Salesforce world. Yes, I say world where we are people helping each other as a community which is thriving to learn and prosper.

Let me start with Dreamforce 2019!  It was fabulous. No No don't judge, I didn't got a chance to visit, but I know it was an awesome event.

Salesforce had a spectacular event this year in November 2019 at  San Francisco, US. Around 170,000 attendees across the globe. It took all over the SF and salesforce had to bring ships at the port to accommodate the people. 

Well, there is lot you can read about salesforce event Dreamforce '19 that happened last month online. 

Its been again a long time I have shared or written any blog post. One of my colleague mentioned me about EverGreen functions and the competition ahead for developer like us. 

Yes, Evergreen 🌲🌲🌲 function yeah , you heard that right. 

Salesforce has opened the doors for not just apex coding but also for the developers working on core technologies like Java and Nodejs. 

🤯🤯🤯🤯🤯🤯🤯🤯

If you are a Salesforce developer then you must gear for more competition and yes of course, never ending learning , which is good for career growth. 

👍👍👍👍👍👍

EverGreen Functions

Evergreen functions are going to be a game changer altogether and the way developers are actually coding. 

 These Evergreen functions will be manged by Kubernetes (another open source tool), we will get on this later, which will be a big treat for our Java developers and of course Node.js developers. 
It is going to be a competition and a big scope of learning for salesforce developers.
Now, as per salesforce Evergreen functions will be very much a follower of Architectural design patterns.

I would like to talk about few of which Evergreen functions are capable of and supports . I have just listed few of them below:-

• Function as a Service:- Obviously, the logic of your application and processing the events will not be depending only on Apex, rather it will use the same packaging methods of apex for JAVA and Node js also. These evergreen functions can be directly called from apex or from Platform events if we have java or node Js (which has one of the best library for push Notifications).
• Microservices:- The word micro-services is in itself is says a lot and if we add another term 'Serverless' to it. Writing all the HTTPs application with a serverless function just Imagine! Yes, the elasticity we usually talk about in our small applications. Yes, we can manage these small apps for our Dev teams easily. 

All of these information can be found on Developer Key Note

As a developer, for me these are very exciting times to move ahead in career and learn what is all happening in development. 

I seriously think Salesforce has opened gates for us to learn more and develop the applications in the most standard way for our business. 

With note I would love to end this post, and a promise to keep sharing, demystifying and learning more about Evergreen functions., till then keep learning :) and coding :).


Note:- This is just an introductory post for Evergreen functions.

Cheers, 

Merry Christmas

IOT+Salesforce - Raspberry pie(Introduction) with Salesforce

Hi Folks,

I have taken a round of the sun and I reach here. Kidding! its more than 12 months I have written any blog. So here we go.

IOT- Salesforce + Raspberry pie

Internet of things (IOT) is going to be most talked and hyped topic this year . WHAT! Am I sounding like a visionary LOL :P. 

Lets get to the business. Internet of things in simple terms everything you see around will be going to be connected to internet. Yes, but how salesforce is looking at this currently, lets have a look. 

I am going to share a video in this one , actually series of videos from now on. 

Happy coding !! 

Note :- Its just and introductional video. I ll be soon coming up with end to end blog.

Lightning Best Practice to Access Data for Increasing performance of Application

Hi Folks,

Lightning Platform is the new buzz word. Lets talk about its best practice in a bit more detail.

My upcoming blogs will be on lightning best practice and will share my experience and findings.  Now, lets jump to main topic.

Data Access

In Lightning, accessing data is very easy as we have our super hero aura framework that does the magic. Many of the developers are stuck by the performance of the application. If not then sometimes client comes back to us and complaining about performance. 

For all these issues we have an old remedy but in new style. Word is CACHING! CACHING!. 

Ways to do Caching in lightning components:-

Caching in lightning is done by unique way . You dont have to write a full code for caching or to do something at browser level . 

action.setStorable();

({
    myAction : function(component, event, helper) {
        var action = component.get("c.getAccounts"); 
        //alert('startTime'+startTime);
        action.setStorable();
        action.setCallback(this, function(actionResult) {
            
            var state = actionResult.getState();
            if (state === "SUCCESS") {
                console.log("time taken to load in ms ", 
                            
                            performance.now()- startTime);
                        component.set('v.childRecords', actionResult.getReturnValue());

                var state = actionResult.getState();
            
            
        });
        var startTime = performance.now();
        $A.enqueueAction(action);
    }
})

This function does every thing you need to cache your data for caching. Lets take an example. 

I have a component in which I have display more than 1000 records in my component and that on press of button.

In my demo below, when action calls the server it takes around 500 ms and when clicked second time it takes around 2 ms. This is how you can cache the data without calling the server. This is the magic being handled by aura framework.



Watch the demo below:-

#Salesforce #Lightning #SetStorable #BestPractices #caching #cache


Thanks
Happy Coding :) :)

Animated Lightning Progress Bar Based on Input

Hi Folks,

Its all Lightning Now!

I was looking at Lightning Design System, it is the coolest, it struck my eye to Progress  Bar. So I thought to play around little bit with it.
Although, there are numerous other blogs available for the same, thought to share the same for beginners.

So lets get started...

Lightning Design System(LDS) has very good out of box classes and CSS written for us which we can directly consume in our code.

Lightning Progress Bar

Lets take input to complete the progress bar in percentage. Lets take this step by step:-

1. Below is the code for Component or app.
      I have added the code in app . you can add that code in a component also.

<aura:application extends="force:slds">
<!-- <AnkushTest:ProgressBarComponent />-->
           
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:attribute name="inputVal" type="Integer" default="0" />
    <aura:attribute name="timeout" type="object" />
    <!-- ==============Using Lightning Progress bar tag  ==================   -->
    <div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
     <lightning:progressBar value="{!v.value}" />
    </div>
   
    <!-- ==============Using Lightning Design System ==================   --> 

    <div class="slds-m-around_small">
       
        <div class="slds-m-bottom_large">
            <label>Type the value : <ui:inputNumber  change="{!c.onChanged}" /></label>
        </div>
        <div>
            <div style="width:50%" class="slds-progress-bar slds-progress-bar_circular slds-progress-bar_large"
                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.value}" role="progressbar">
                <span class="slds-progress-bar__value" style="{! 'width:  ' + v.value + '%;'}">
                    <span class="slds-assistive-text">{!'Progressing Value : ' + v.value + '%'}</span>
                </span>
                <div class="slds-text-align--center"><ui:outputNumber value="{!v.value}"/>
                    <ui:outputNumber value="100"/>
                    </div>
            </div>
        </div>
    </div>
    
    
   <style>
     .slds-progress-bar__value{
         background: green !important;
        }
    </style>
</aura:application>

Step By Step Explnation:-

There are two ways you can make progress bar
   A. By Using <lightning:progressBar> tag: It is a standard tag which renders as a horizontal bar. It        has various attributes which you can find easily on <lightning:progressBar>
  B.  Another way is by using Progress Bar .


2. We need to take input from user to make it animated i.e we need to keep refreshing the component or app after every nth sec to make it animated. For the same I have added that code in Helper.js

({
    Onchange : function(cmp, ev) {
       
        var currentValue=cmp.get('v.value');
        var finalValue=cmp.get('v.inputVal');
        var increment=1;
        if (finalValue<currentValue) {
            increment=-1; // in case the value needs to decreased if the value entered was less thn the initial value
        }
      
        var timeout = window.setInterval($A.getCallback(function() { // calling the function every n seconds
           
                var value=cmp.get('v.value');
                value+=increment; // Incrementing the value till it reaches the input value
                if (value==finalValue) {
                    window.clearInterval(cmp.get('v.timeout'));
                    cmp.set('v.timeout', null);
                }
                cmp.set('v.value', value); // set the incremented value to component 
            
        }), 200);
        cmp.set('v.timeout', timeout);
        
    }
})

In above code, the if loop inside window.setinterval makes sure that till the input value is equal to desired value this refresh should happen. once it value is achieved then set clear your interval.

3. Controller code :-

({
    onChanged : function(component, event, helper) {
        helper.Onchange(component, event);
    }
})

Just try it out , it will be fun ..

In case you face any issue just drop me message or mail.

Cheers!!
Happy Coding !

How to create Dependent Picklist Using lightning Component and change background Color

Hi Folks,

As it is rightly said "The more you share , the more you learn". With this thought I ll keep exploring and ll keep sharing some basic stuff for lightning beginners.

Lets jump to scenario first:-

We need to create Dependent Picklist using Lightning Component, Sounds very easy isn't it . Hold on there is a twist to it we need to change the background color based on selected value.

Lets get started:-
Firstly , we need to have attribute to hold parent picklist value i.e

<aura:attribute name="pOptions" type="List"/>

Step 2 :-

<lightning:select name="pPicklist"  label="Alphabets" aura:id="pPicklistId" onchange="{!c.onPickchange}">
            <option value="">None</option>
            <aura:iteration items="{!v.pOptions}" var="p">
                <option value="{!p.value}">{!p.text}</option>
            </aura:iteration>
        </lightning:select>

This actually is creating  the parent picklist which is a list of alphabets. It has a onchange controller.

 myAction : function(component, event, helper) {
        var pVals = [
            {text:"A", value:"A"},
            {text:"B", value:"B"}
        ];
        var pValsColor = [
            {text:"White", value:"White"},
            {text:"blue", value:"blue"}
        ];
        var cVals = {
            "A":[
                {text:"A1", value:"A1"},
                //{text:"Choose Color", value:"Choose Color"}
            ],
                "B":[
                {text:"B1", value:"B1"},
                {text:"Choose Color", value:"Choose Color"}
            ]
        };
        component.set('v.pOptions',pVals);
        component.set('v.DepenedentObject',cVals);
        component.set('v.cColor',pValsColor)
    },

This controller is  called whenever the page is loaded and it sets the initial values to picklist.


Step 3:-
Now, we have to create child picklist values.

<div class="slds-form--stacked">
            <lightning:select name="cPicklist"  label="Childs" aura:id="cPicklist" disabled="{!v.disabledPick}" onchange="{!c.myColor}">
                <option value="">None</option>
                <aura:iteration items="{!v.cOptions}" var="k">
                    <option value="{!k.value}">{!k.text}</option>
                </aura:iteration>
            </lightning:select>
        </div>
            <div class="slds-form--stacked">
        <lightning:select name="cPicklistColor"  label="Color" aura:id="cPicklistColor" onchange="{!c.myColor}" disabled="{!v.disabledColorPick}">
            <option value="">None</option>
            <aura:iteration items="{!v.cColor}" var="k">
                <option value="{!k.value}">{!k.text}</option>
            </aura:iteration>
        </lightning:select>

This above code is creating the child picklist and also has onchange.





Here is full code for you below to test and try:- 

<aura:component >
    <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="pOptions" type="List"/>
    <aura:attribute name="cOptions" type="List"/>
    <aura:attribute name="selectedRedColor" type="Boolean" default="false"/>
    <aura:attribute name="cColor" type="List"/>
    <aura:attribute name="DepenedentObject" type="object"/>
    <aura:attribute name="disabledPick" type="Boolean" default="true"/>
    <aura:attribute name="disabledColorPick" type="Boolean" default="true"/>
    <aura:handler name="init" value="{!this}" action="{!c.myAction}"/>
    
    <div class="slds-align_absolute-center">
        <lightning:select name="pPicklist"  label="Alphabets" aura:id="pPicklistId" onchange="{!c.onPickchange}">
            <option value="">None</option>
            <aura:iteration items="{!v.pOptions}" var="p">
                <option value="{!p.value}">{!p.text}</option>
            </aura:iteration>
        </lightning:select>
        <div class="slds-form--stacked">
            <lightning:select name="cPicklist"  label="Childs" aura:id="cPicklist" disabled="{!v.disabledPick}" onchange="{!c.myColor}">
                <option value="">None</option>
                <aura:iteration items="{!v.cOptions}" var="k">
                    <option value="{!k.value}">{!k.text}</option>
                </aura:iteration>
            </lightning:select>
        </div>
            <div class="slds-form--stacked">
        <lightning:select name="cPicklistColor"  label="Color" aura:id="cPicklistColor" onchange="{!c.myColor}" disabled="{!v.disabledColorPick}">
            <option value="">None</option>
            <aura:iteration items="{!v.cColor}" var="k">
                <option value="{!k.value}">{!k.text}</option>
            </aura:iteration>
        </lightning:select>
    </div>
    <div class="slds-is-relatived" style="position: absolute; top: 1rem; left: 1rem;">
        <aura:if isTrue="{!v.selectedRedColor}">
            <style >
                html{
                background-color: blue ;
                }
                
            </style>
            <p class="slds-text-color_default"> Show Color :-  I am Blue  </p>
        </aura:if>
        
    </div>
    </div>

</aura:component>

Lets now take a look at controller :-

({
    myAction : function(component, event, helper) {
        var pVals = [
            {text:"A", value:"A"},
            {text:"B", value:"B"}
        ];
        var pValsColor = [
            {text:"White", value:"White"},
            {text:"blue", value:"blue"}
        ];
        var cVals = {
            "A":[
                {text:"A1", value:"A1"},
                //{text:"Choose Color", value:"Choose Color"}
            ],
                "B":[
                {text:"B1", value:"B1"},
                {text:"Choose Color", value:"Choose Color"}
            ]
        };
        component.set('v.pOptions',pVals);
        component.set('v.DepenedentObject',cVals);
        component.set('v.cColor',pValsColor)
    },
    onPickchange : function(component, event, helper) {
        var cValues = component.find('pPicklistId').get('v.value');
        component.set('v.cOptions',component.get('v.DepenedentObject')[cValues]);
        //alert(cValues);
        console.log(component.get('v.DepenedentObject')[cValues]);
        if(cValues != '')
            component.set('v.disabledPick',false);
        else
            component.set('v.disabledPick',true);
    },
    
    myColor : function(component, event, helper) {
        //alert('function called');
        var cValuesColor = component.find('cPicklist').get('v.value');
        var sColor = component.find('cPicklistColor').get('v.value');
        //alert(sColor);
        if(sColor == 'blue'){
           // alert(sColor);
            component.set('v.selectedRedColor',true);
        }
        else{
            //alert(sColor);
            component.set('v.selectedRedColor',false);
        }
        if(cValuesColor == 'Choose Color')
            component.set('v.disabledColorPick',false);
        else if(cValuesColor != 'Choose Color'){
            component.set('v.disabledColorPick',true);
        }
    }
    
})

Click below to see 
Working demo on You tube

In case you find any issue just drop me a mail on ankushsalesforce@gmail.com


Happy Codding
Cheers !!

Thanks
Ankush