Monday 13 February 2023

LWC key Features #Salesforce



Lightning Web Components (LWC) is a new programming model for building web components on the Salesforce platform. It’s a modern, lightweight, and fast alternative to Aura components and offers a number of new features and benefits to developers.

Here are some key features of LWC:

Modern Web Standards: LWC is built on modern web standards like ES6, HTML, and CSS. This makes it easy for developers who are already familiar with these technologies to get started quickly with LWC.


Reusable Components: Components can be easily reused across multiple pages and applications in Salesforce. This helps reduce duplication of code and saves time for developers.


Lightning-Fast Performance: LWC uses a shadow DOM to encapsulate component logic and styles, which helps ensure lightning-fast performance.


Easy Integration with Apex: LWC components can easily integrate with Apex code to access server-side functionality. This enables developers to create complex applications that can scale to meet business needs.


Strong Security: LWC components are secure by design, which helps prevent XSS attacks and other types of security vulnerabilities.

Let's look at a simple example of how to create an LWC component in Salesforce.

Here’s a component that displays a greeting:

php
<template> <p>Hello, {greeting}!</p> </template> <script> export default class Greeting extends LightningElement { @track greeting = 'World'; } </script>


In this example, we’re using the <template> tag to define the HTML template for our component. The <p> tag displays the greeting, which is stored in a property called greeting.

The <script> tag contains the JavaScript logic for our component. We’re using the export default statement to make our component available to other parts of our application. The LightningElement class provides the core functionality for our component, and the @track decorator is used to indicate that the greeting property should be reactive, meaning that any changes to its value will automatically be reflected in the HTML template.

And that’s it! With just a few lines of code, we’ve created a fully functional LWC component that can be used in a Salesforce application.

In conclusion, LWC is a powerful and modern way to build web components for the Salesforce platform. With its modern web standards, reusable components, lightning-fast performance, easy integration with Apex, and strong security, it’s a great choice for any Salesforce developer.


Saturday 14 January 2023

Life Cycle Hooks in LWC #salesforce

Lifecycle Hooks A lifecycle hook is a callback method triggered at a specific phase of a component instance’s lifecycle.


There are five types of callback functions :
  1. Constructor()
  2. connectedCallback()
  3. disconnectedCallback()
  4. render()
  5. renderCallback()

constructor()
  1. Called when the component is created.
  2. This hook flows from parent to child, which means that it fires in the parent first. 
  3. You can’t access child elements because they don’t exist yet. Properties aren’t passed yet, either. Properties are assigned to the component after construction and before the connectedCallback() hook.

connectedCallback()

  1. Called when the element is inserted into a dom.
  2. This hook flows from parent to child.
  3. You can’t access child elements because they don’t exist yet.

The connectedCallback() hook can fire more than one time. For example, if you remove an element and then insert it into another position, such as when you reorder a list, the hook fires several times. If you want code to run one time, write code to prevent it from running twice.


The connectedCallback() hook is invoked with the initial properties passed to the component.


renderCallback()

  1. Called after every render of the component.
  2. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.
  3. This hook flows from child to parent.

render()
  1. Call this method to update the UI.
  2. It may be called before or after connectedCallback().
  3. It’s rare to call render() in a component. The main use case is to conditionally render a template. 


disconnectedCallback()
  1. Called when the element is removed from a document.
  2. This hook flows from parent to child.
  3. Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.

errorCallback()

  1. Called when a descendant component throws an error.
  2. The error argument is a JavaScript native error object, and the stack argument is a string.
  3. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.


Thank you!

Sunday 19 August 2018

Best in Market - List of Code Review tools #Salesforce

Salesforce is an awesome platform, and has an incredible community that helps their developer and admins to grow in their careers. With Salesforce’s communities we get a lot of great tools which make developer and admin life easy. One of the important practices in project implementation is code review, as it insures your team has visibility into your applications code. Here is the list of few tools which I have found to help review codes:





1 Checkmarx : 



Checkmarx provides an awesome tool to secure your apex and visualforce code as well. It's easy to integrate with your salesforce org and provides you a whole report.
Report has the points of changes and what to changes, I personlly recommend this tool for your application and code security.
https://www.checkmarx.com/

2. Codescan: 



Code Analysis Tools for Salesforce
Its an appexchange tool which is really easy to use and install in your salesforce org. It help developers to identify bugs and increase the quality of your code.
This tool provides incredible UI to analyse you orgs apex code.
https://www.codescan.io/ 



3. PMD source code analyzer :



 PMD is also of the recommended tool to use for your apex code, its easily catches the defects of your apex code and provide you how to get ride of those defects.
It searches the unused variables, empty catch blocks, unnecessary object creation. This tool really help to clean your code in apex as well as in Javascript and visualforce.
https://pmd.github.io/ 

4. Clayton : 




Clayton is a next gen tool which does everything when you need your Salesforce application to be the best. It's very easy to setup and use. 
Clayton integrates into your code repositories and enforces quality and security standards across your organisation, at all times, while your apps are built. It provides you analyses over not only apex but lightning component code as well.
https://www.getclayton.com/ 

5. Code Climate :




 It Automated code review for test coverage, maintainability and more so that you can save time, it provides you real time feedback of your code that help to maintain
 good code as you go. It provides test coverage line by line as well, integrated with your GitHub repo, run analysis locally and team management with permission visibility.

 https://codeclimate.com/ 


Tuesday 29 May 2018

Difference between Application Events and Component Events in Lightning #Salesforce

Component Events

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event. The component that fires an event is known as the source component.



The component that fires an event can set the event’s data. To set the attribute values, call event.setParam() or event.setParams().

Fire a component Event

In terms of firing an event you need to register that component event in your component and then you can fire the same. it looks something like below



A component can handle its own event by using the <aura:handler> tag in its markup. The name attributes in <aura:registerEvent> and <aura:handler> must match, since each event is defined by its name.



Application Events

Application event in simple words can be used in multiple components and component that has the handler for the event will be notified.



To create a custom application event, you need to use the <aura:event> tag in the event resource. You need to define type="Application" tag. To use you need to register application event same way as component event



To fire the application event you need to use event.setParam();



Events are of the most widely used in lightning component. so when you should use which one is also important.

thanks

Tuesday 22 May 2018

Converting Curl Request into Apex HTTP Request #Salesforce

Recently in a project I was working with a requirement, where we need to integrated Salesforce with that system, when I started going through the API documentation of the another system, they have provided everything with the curl request and response was in JSON.




So many of you guys might have already explored curl and converting the request as per another system requirement, but for me this was the first time. So if any of you have better approach then the one I am going to explain, please let me know.

So What is Curl ?

"cURL is a command line tool for getting or sending files using URL syntax.
Since cURL uses libcurl, it supports a range of common Internet protocols, currently including HTTP, HTTPS, FTP, FTPS, SCP, SFTP, TFTP, LDAP, DAP, DICT, TELNET, FILE, IMAP, POP3, SMTP and RTSP.
cURL supports HTTPS and performs SSL certificate verification by default when a secure protocol is specified such as HTTPS. When cURL connects to a remote server via HTTPS".

Wiki Link

So here is of the curl request that I was dealing with, and I have taken a normal one which can be easily converted to apex.


So in above request the main thing to be taken care is to identify the parameter, header, body, method and endpoint. To identify these you need to look for -X -u -d -H

-x stands for request method
-u stands for authorization header
-d stands for body of the request
-H also stands for header

So by knowing the parameter defined in the curl request you can easily and quickly create a request in apex. So the request in apex format looks like below




So here is an small description of curl request formatting.
Thank you!

Thursday 8 February 2018

Caching Data with Storable Actions #Lightning Component Salesforce

Caching data at the client side can significantly reduce the number of server round-trips and improve the performance of your Lightning components. Server actions support optional client-side caching, and the Lightning Data Service is built on top of a sophisticated client caching mechanism.

In Lightning terminology, a server action is an Apex method that you invoke remotely from your Lightning Component. A storable action is a server action whose response is stored in the client cache so that subsequent requests for the same server method with the same set of arguments can be accessed from that cache.



Storable actions are the only currently supported type of storage. Storable actions cache server action response values. The storage name must be actions. Caching is especially beneficial for high-performance, mostly connected applications operating over high latency connections, such as 3G networks When you initialize storage, you can configure the expiration time, which is the duration in seconds that an entry is retained in storage..

Using storable actions, the cache behavior is controlled by two parameters set internally in the framework :
  • Expiration age: This is the age of the cached response. Whenever the response is older then the existing one and same vice versa. Expiration age is currently set to 900 seconds in Salesforce lightning.
  • Refresh age: Refresh age is the age of the response, when it gets refreshed, if the response is newer then the existing one, it will override the response, but lightning also calls the server method and get the response, if it different then the existing then it will override it as well. Refresh age is 30 second in lightning experience.

what to cache ?

The caching of the data should be decided on what is the response of your action, there are two type of action, one which returns everytime same thing, and another one is which is doesn't return the same response or dynamic.

The method which returns the same response each time called should be cached and other not,The setStorable function takes an optional argument, which is a configuration map of key-value pairs representing the storage options and values to set.

Cache Miss

If the action is not a cache hit as it doesn’t match a storage entry:
  • The action is sent to the server-side controller.
  • If the response is SUCCESS, the response is added to storage.
  • The callback in the client-side controller is executed.

Cache Hit

If the action is a cache hit as it matches a storage entry:
  • The callback in the client-side controller is executed with the cached action response.
  • If the response has been cached for longer than the refresh time, the storage entry is refreshed. When an application enables storable actions, a refresh time is configured. The refresh time is the duration in seconds before an entry is refreshed in storage. The refresh time is automatically configured in Lightning Experience and the Salesforce mobile app.
  • The action is sent to the server-side controller.
  • If the response is SUCCESS, the response is added to storage.
  • If the refreshed response is different from the cached response, the callback in the client-side controller is executed for a second time..

How to enable Storage Actions ?

To configure client-side storage for your standalone app, use <auraStorage:init> in the auraPreInitBlock attribute of your application’s template. For example:. 


<aura:component isTemplate="true" extends="aura:template">
    <aura:set attribute="auraPreInitBlock">
        <auraStorage:init
          name="actions"
          persistent="false"
          secure="true"
          maxSize="1024"
          defaultExpiration="900"
          defaultAutoRefreshInterval="30" />
    </aura:set>
</aura:component>


Thanks

Wednesday 22 November 2017

Salesforce DX: Test Data migration using Salesforce DX

Here I am going to show case a small POC of Data migration using Salesforce DX, its really easy to use, and the process where you want to maintain the test data in different-different Sandbox, then Salesforce DX is for you.


So lets get started,
Before going further, if you have not installed Salesforce DX in your system and please go ahead and install it you system.

Here is the Trailhead link where you can find link to install and get to know more about SalesforcDX.



After installing open the git bash and check whether SalesforceDX got successfully installed or not.

So let me explain you a bit about this process using dx, here we will use two sandbox, one from where we will export the data and the other is the destination sandbox where we will import the data, now this is the first time process, where we are exporting the data from one sandbox, but if its recurring process then we will have the data in JSON format in our local machine, so we just need to export it to other sandboxes.

Please enter

$ sfdx force

If it show the cloud image made up of DX then its installed, now we will create a project first.

$ sfdx force:project:create -n web //create project, its not necessary you can skip this one also

//Add a new sandbox , on hitting this command it will ask you to login to you sandbox and authorize
$ sfdx force:auth:web:login --setalias my-sandbox --instanceurl https://salesforce.com

//after this do the same thing again and add another sandbox.
//Now if you want to check how many orgs you have added you can by below command
$ sfdx force:org:list

//you have to define an org as default to so that dx will fetch the data from that org. use below for the same
$ sfdx force:config:set defaultusername=abhi@sfdx.com.cloudy --global

//now export the data, here we are exporting only account data, but you can do allot more then this
$ sfdx force:data:soql:query --query "Select Id, Name From Account"

If you'll check that file that DX has created will have the content something like below


{
    "records": [
        {
            "attributes": {
                "type": "Account",
                "referenceId": "AccountRef1"
            },
            "Name": "Sinclair Community College"
        },
        {
            "attributes": {
                "type": "Account",
                "referenceId": "AccountRef2"
            },
            "Name": "The Institute of Electrical and Electronics Engineers, Inc."
        },
        {
            "attributes": {
                "type": "Account",
                "referenceId": "AccountRef61"
            },
            "Name": "TestLastName"
        }
    ]
}


In the command prompt you'll be able to see the data count as well.

Now to import the data to another sandbox, you just have to hit another command, as its so easy so here are the things need to consider before hitting the command

1. Define the correct source path of the JSON file.
2. Provide the correct sanbox username.
3. Sandbox should be from the list of the sandbox added in the DX.

//to import data to sandbox
$ sfdx force:data:tree:import --targetusername abhi-tripathi@sfdx.com.cloudy--plan sfdx-out/export-demo-Account-plan.json

Your command prompt


















Woohoo!! you have just performed the data migration using SalesforceDX

Here are some links that will be helpfull

https://trailhead.salesforce.com/trails/sfdx_get_started/modules/sfdx_dev_model

https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_test_data_example.htm

https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_cli_usernames_orgs.htm

https://trailhead.salesforce.com/trails/sfdx_get_started/modules/sfdx_app_dev

https://trailhead.salesforce.com/trails/sfdx_get_started/modules/sfdx_travis_ci

https://www.youtube.com/watch?time_continue=1596&v=exZ3TICOzd8

Thanks you!!